Timers are the de facto standard for splitting up JavaScript code execution in browsers. Whenever a script is taking too long to complete, look to delay parts of the execution until later.
Note that very small timer delays can also cause the browser to become unresponsive. It’s recommended to never use a delay of zero milliseconds, as this isn’t enough time for all browsers to properly update their display. In general, delays between 50 and 100 milliseconds are appropriate and allow browsers enough idle time to perform necessary display updates. (查看原文)
Normally, most browsers download components in parallel, but that’s not the case for external scripts. When the browser starts downloading an external script, it won’t start any additional downloads until the script has been completely downloaded, parsed, and executed. (Any downloads that were already in progress are not blocked.) (查看原文)
The DEFER attribute is an easy way to avoid the bad blocking behavior of scripts with the addition of a single word:
<script defer src='A.js'></script>
Although DEFER is part of the HTML 4 specification, it is implemented only in Internet
Explorer and in some newer browsers. (查看原文)
There is a drawback to the synchronous loading of script blocks: If lots of code has to be downloaded and executed while parsing the head of the document, there might be a noticeable lag before the page begins to render.
To alleviate this, we could have used the defer attribute on script elements. This indicates that the browser is allowed to load the script asynchronously. However, we cannot be sure when the script actually will be executed, it could be before or after the page has finished rendering. Opera ignores the defer attribute completely. (查看原文)
While the inline script is executing, all other downloads are blocked.
...
In addition to blocking parallel downloads, inline scripts block rendering.
...
If your site uses inline scripts, it’s important to understand how they block downloads and rendering, and to avoid this behavior if possible. Several workarounds are available:
• Move inline scripts to the bottom.
• Initiate the JavaScript execution using an asynchronous callback.
• Use the SCRIPT DEFER attribute.
...
Although this technique(Move inline scripts to the bottom) avoids blocking downloads, rendering is still blocked. (查看原文)
Preserving the order of JavaScript is critical, and this is true for CSS as well. Given the cascading nature of styles, loading them in different orders may yield undesired results. To provide consistent behavior, browsers ensure that CSS is applied in the order speci- fied. The Stylesheets in Order example confirms that stylesheets are applied in the order specified, regardless of the order in which the HTTP responses are received. (查看原文)
In the previous section, we confirmed that browsers apply CSS (stylesheets as well as inline styles) in the order in which they appear in the HTML document. Earlier in this chapter, we verified that inline scripts block other browser activity (downloads and rendering). These insights are fairly well known in the web development community. What is less well known is that browsers also apply CSS and JavaScript sequentially, and that this behavior can significantly delay downloaded resources when a stylesheet is followed by an inline script. This sequence causes subsequent resources to be blocked until the stylesheet is downloaded and the inline script is executed. (查看原文)
style-sheets followed by an inline script block any subsequent resources from downloading.
...
The solution is to place inline scripts so that they do not appear between a stylesheet and any other resource. The inline script should be placed either above the stylesheet or below the other resource. If the other resource is a script, there might be a code dependency between the inline script and the external script. For that reason, my general recommendation is to move the inline script above the stylesheet. This will avoid any code dependency issues. If you’re certain there are no code dependencies, moving the inline script below the visible resources allows these resources to load sooner, resulting in better progressive rendering. (查看原文)
A good rule of thumb is to store any out-of-scope variables in a local variable whenever it’s used more than once within the function.
...
A very common mistake that leads to performance issues is to omit the var keyword when assigning a variable’s value for the first time. As- signment to an undeclared variable automatically results in a global variable being created. (查看原文)
Minding scope chain depth is an easy way to get performance improvements with a small amount of work. Avoid unnecessarily augmenting the scope chain and inadver- tently slowing down execution. (查看原文)
Event delegation is the name commonly given to the technique of attaching a single event handler to a parent element that contains all of the elements that need to respond to the event. When the event is triggered on the child element, it bubbles up to the parent where it is handled. That single handler can distinguish which child element is the target of the event and receive additional parameters via some attribute on that element. (查看原文)
When the browser starts downloading an external script, it won't start any additional downloads until the script has been completely downloaded, parsed , and executed. (查看原文)
作者: Steve Souders 副标题: Performance Best Practices for Web Developers isbn: 0596522304 书名: Even Faster Web Sites 页数: 256 定价: USD 34.99 出版社: O'Reilly Media 出版年: 2009-6-20 装帧: Paperback
