[·Òë]High Performance JavaScript(033)
Summary ×ܽá
When web pages or applications begin to feel slow, analyzing assets as they come over the wire and profiling scripts while they are running allows you to focus your optimization efforts where they are needed most.
µ±ÍøÒ³»òÓ¦ÓóÌÐò±äÂýʱ£¬·ÖÎöÍøÉÏ´«À´µÄ×ÊÔ´£¬·ÖÎö½Å±¾µÄÔËÐÐÐÔÄÜ£¬Ê¹ÄãÄܹ»¼¯Öо«Á¦ÔÚÄÇЩÐèҪŬÁ¦ÓÅ»¯µÄµØ·½¡£
• Use a network analyzer to identify bottlenecks in the loading of scripts and other page assets; this helps determine where script deferral or profiling may be needed.
ʹÓÃÍøÂç·ÖÎöÆ÷ÕÒ³ö¼ÓÔؽű¾ºÍÆäËüÒ³Ãæ×ÊÔ´µÄÆ¿¾±ËùÔÚ£¬ÕâÓÐÖúÓÚ¾ö¶¨ÄÄЩ½Å±¾ÐèÒªÑÓ³Ù¼ÓÔØ£¬»òÕß½øÐнøÒ»²½·ÖÎö¡£
• Although conventional wisdom says to minimize the number of HTTP requests, deferring scripts whenever possible allows the page to render more quickly, providing users with a better overall experience.
´«Í³µÄÖǻ۸æËßÎÒÃÇÓ¦¾¡Á¿¼õÉÙHTTPÇëÇóµÄÊýÁ¿£¬¾¡Á¿ÑÓ³Ù¼ÓÔؽű¾ÒÔʹҳÃæäÖȾËٶȸü¿ì£¬ÏòÓû§Ìṩ¸üºÃµÄÕûÌåÌåÑé¡£
• Use a profiler to identify slow areas in script execution, examining the time spent in each function, the number of times a function is called, and the callstack itself provides a number of clues as to where optimization efforts should be focused.
ʹÓÃÐÔÄÜ·ÖÎöÆ÷ÕÒ³ö½Å±¾ÔËÐÐʱËÙ¶ÈÂýµÄ²¿·Ö£¬¼ì²éÿ¸öº¯ÊýËù»¨·ÑµÄʱ¼ä£¬ÒÔ¼°º¯Êý±»µ÷ÓõĴÎÊý£¬Í¨¹ýµ÷ÓÃÕ»×ÔÉíÌṩµÄһЩÏßË÷À´ÕÒ³öÄÄЩµØ·½Ó¦µ±Å¬Á¦ÓÅ»¯¡£
• Although time spent and number of calls are usually the most valuable bits of data, looking more closely at how functions are being called might yield other optimization candidates.
ËäÈ»»¨·Ñʱ¼äºÍµ÷ÓôÎÊýͨ³£ÊÇÊý¾ÝÖÐ×îÓмÛÖµµÄµã£¬»¹ÊÇÓ¦µ±×Ðϸ²ì¿´º¯ÊýµÄµ÷Óùý³Ì£¬¿ÉÄÜ·¢ÏÖÆäËüÓÅ»¯·½·¨¡£
These tools help to demystify the generally hostile programming environments that modern code must run in. Using them prior to beginning optimization will ensure that development time is spent focusing on the right problems.
ÕâЩ¹¤¾ßÔÚÄÇЩÏÖ´ú´úÂë
Ïà¹ØÎĵµ£º
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 ......
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:
×ܵÄÀ´ËµÔ½ÇáÁ¿¼¶µÄ¸ñʽԽºÃ£¬× ......
µÚ¾ÅÕÂ
Building and Deploying High-Performance JavaScript Applications
´´½¨²¢²¿Êð¸ßÐÔÄÜJavaScriptÓ¦ÓóÌÐò
According to a 2007 study by Yahoo!'s Exceptional Performance team, 40%–60% of Yahoo!'s users have an empty cache experience, and about 20% of all page views are done ......
µÚʮՠTools ¹¤¾ß
Having the right software is essential for identifying bottlenecks in both the loading and running of scripts. A number of browser vendors and large-scale websites have shared techniques and tools to help make the Web faster and more efficient. This ......
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 develop ......