[·Òë]High Performance JavaScript(031)
Firebug
Firefox is a popular browser with developers, partially due to the Firebug addon (available at http://www.getfirebug.com/), which was developed initially by Joe Hewitt and is now maintained by the Mozilla Foundation. This tool has increased the productivity of web developers worldwide by providing insights into code that were never before possible.
¶Ô¿ª·¢ÈËÔ±À´Ëµ£¬FirefoxÊÇÒ»¸öʱ÷ÖµÄä¯ÀÀÆ÷£¬²¿·ÖÔÒòÊÇFirebug²å¼þ£¨http://www.getfirebug.com/£©ÓÉJoe HewittÊ×´´ÏÖÔÚÓÉMozilla»ù½ð»áά»¤¡£´Ë¹¤¾ß¾ßÓÐǰËùδÓеĴúÂë¶´²ìÁ¦£¬Ìá¸ßÁËÈ«ÊÀ½çÍøÒ³¿ª·¢ÕßµÄÉú²úÁ¦¡£
Firebug provides a console for logging output, a traversable DOM tree of the current page, style information, the ability to introspect DOM and JavaScript objects, and more. It also includes a profiler and network analyzer, which will be the focus of this section. Firebug is also highly extensible, enabling custom panels to be easily added.
FirebugÌṩÁËÒ»¸ö¿ØÖÆÌ¨ÈÕÖ¾Êä³ö£¬µ±Ç°Ò³ÃæµÄDOMÊ÷ÏÔʾ£¬ÑùʽÐÅÏ¢£¬Äܹ»·´¹ÛDOMºÍJavaScript¶ÔÏó£¬ÒÔ¼°¸ü¶à¹¦ÄÜ¡£Ëü»¹°üÀ¨Ò»¸öÐÔÄܺÍÍøÂç·ÖÎöÆ÷£¬ÕâÊDZ¾½ÚµÄÖØµã¡£FirebugÒ×ÓÚÀ©Õ¹£¬¿ÉÌí¼Ó×Ô¶¨ÒåÃæ°å¡£
Console Panel Profiler ¿ØÖÆÌ¨Ãæ°å·ÖÎöÆ÷
The Firebug Profiler is available as part of the Console panel (see Figure 10-1). It measures and reports on the execution of JavaScript on the page. The report details each function that is called while the profiler is running, providing highly accurate performance data and valuable insights into what may be causing scripts to run slowly.
Firebug·ÖÎöÆ÷ÊÇ¿ØÖÆÌ¨Ãæ°åµÄÒ»²¿·Ö£¨Èçͼ10-1£©¡£Ëü²âÁ¿²¢±¨¸æÒ³ÃæÖÐÔËÐеÄJavaScript¡£µ±·ÖÎöÆ÷ÔËÐÐʱ£¬±¨¸æÉîÈ뵽ÿ¸ö±»µ÷Óú¯ÊýµÄϸ½Ú£¬Ìṩ¸ß¾«È·µÄÐÔÄÜÊý¾ÝºÍ±äÁ¿²ì¿´¹¦ÄÜ£¬£¨ÓÐÖúÓÚ£©ÕÒ³ö¿ÉÄܵ¼Ö½ű¾ÔËÐбäÂýµÄÔÒò¡£
Figure 10-1. FireBug Console panel
ͼ 10-1 FireBug¿ØÖÆÌ¨Ãæ°å
One way to run a profile is by clicking the Profile button, triggering the script, and clicking the P
Ïà¹ØÎĵµ£º
AJAX (Òì²½ JavaScript ºÍ XML) ÊǸöвúÉúµÄÊõÓï,רΪÃèÊöJavaScriptµÄÁ½ÏîÇ¿´óÐÔÄÜ.ÕâÁ½ÏîÐÔ
ÄÜÔÚ¶àÄêÀ´Ò»Ö±±»ÍøÂ翪·¢ÕßËùºöÂÔ,Ö±µ½×î½üGmail, Google suggestºÍgoogle MapsµÄºá¿Õ³öÊÀ²ÅʹÈË
ÃÇ¿ªÊ¼Òâʶµ½ÆäÖØÒªÐÔ.
ÕâÁ½Ïî±»ºöÊÓµÄÐÔÄÜÊÇ:
* ÎÞÐèÖØÐÂ×°ÔØÕû¸öÒ³Ãæ±ãÄÜÏò·þÎñÆ÷·¢ËÍÇëÇó.
* ¶ÔXMLÎĵµµÄ½âÎöºÍ´¦Àí£®
......
Repaints and Reflows ÖØ»æºÍÖØÅŰæ
Once the browser has downloaded all the components of a page—HTML markup, JavaScript, CSS, images—it parses through the files and creates two internal data structures:
µ±ä¯ÀÀÆ÷ÏÂÔØÍêËùÓÐÒ³ÃæHTML±ê¼Ç£¬JavaScri ......
Recursion Patterns µÝ¹éģʽ
When you run into a call stack size limit, your first step should be to identify any instances of recursion in the code. To that end, there are two recursive patterns to be aware of. The first is the straightforward recursive pattern represented ......
Data Format Conclusions Êý¾Ý¸ñʽ×ܽá
Favor lightweight formats in general; the best are JSON and a character-delimited custom format. If the data set is large and parse time becomes an issue, use one of these two techniques:
×ܵÄÀ´ËµÔ½ÇáÁ¿¼¶µÄ¸ñʽԽºÃ£¬× ......
Use the Fast Parts ʹÓÃËÙ¶È¿ìµÄ²¿·Ö
Even though JavaScript is often blamed for being slow, there are parts of the language that are incredibly fast. This should come as no surprise, since JavaScript engines are built in lower-level languages and are therefore compiled. Thou ......