转自：www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html#ibm-pcon
随着 Web2.0 技术的不断推广，越来越多的应用使用JavaScript技术在客户端进行处理，从而使JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript 的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。
概览
无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()。例如清单 1
清单 1 JavaScript代码内嵌示例
</span><span class="pln" style="color: rgb(72, 72, 76);">Source Example</span><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><p/></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"><script><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="atn" style="color: teal;">type</span><span class="pun" style="color: rgb(147, 161, 161);">=</span><span class="atv" style="color: rgb(221, 17, 68);">"text/javascript"</span><span class="tag" style="color: rgb(0, 0, 136);">></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> document</span><span class="pun" style="color: rgb(147, 161, 161);">.</span><span class="pln" style="color: rgb(72, 72, 76);">write</span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="str" style="color: rgb(221, 17, 68);">"Today is "</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">+</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="pun" style="color: rgb(147, 161, 161);">(</span><span class="kwd" style="color: rgb(30, 52, 123);">new</span><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="typ" style="color: teal;">Date</span><span class="pun" style="color: rgb(147, 161, 161);">()).</span><span class="pln" style="color: rgb(72, 72, 76);">toDateString</span><span class="pun" style="color: rgb(147, 161, 161);">());</span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"></script></span></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="pln" style="color: rgb(72, 72, 76);"> </span><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p><p><code style="border: none; border-radius: 3px; word-wrap: break-word; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; max-width: 100%; background-color: transparent;"><span class="tag" style="color: rgb(0, 0, 136);"/></code></p></pre><p style="margin-top: 10px; margin-bottom: 10px; font-size: 15px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 24px; white-space: normal; widows: auto;">当浏览器遇到<script>标签时，当前 HTML 页面无从获知 JavaScript 是否会向<p><span style="widows: auto;">标签添加内容，或引入其他元素，或甚至移除该标签。因此，这时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。
