JavaScript 性能优化：解决脚本阻塞与无阻塞加载策略

JavaScript 阻塞机制与性能影响

JavaScript 在浏览器环境中的性能表现，往往被视为影响用户可用性的最关键因素。

JavaScript 具有阻塞特性，因为浏览器通常使用单一进程来同时处理用户界面（UI）渲染与 JavaScript 代码的执行。

无论是内嵌在 HTML 中的脚本还是外链引用的资源，浏览器在获取到代码后都会立即执行，因为这可能导致页面内容或结构的修改。

通过瀑布图可以清晰地观察到资源的下载时间与脚本执行时间（executing time）之间的关联。

如果在 HTML 的 head 部分引入 script 标签，而在 body 加载完成前脚本尚未执行完毕，浏览器将不会输出任何内容，导致用户看到空白页面。

 
<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>

当页面解析遇到 script 标签时，由于无法预知脚本内部的具体操作，浏览器必须暂停解析并等待脚本执行完毕，从而造成阻塞。

尽管 IE8 等现代浏览器支持并行下载多个 JavaScript 等资源，但这种并行机制仍可能对图片等其他资源的下载产生一定影响。

因此，最佳实践结论是将脚本标签放置在页面底部，即 body 结束标签之前。

脚本组织与合并策略

优化的核心目标是尽可能最小化页面的延迟时间。

当前面临的主要问题包括：

页面中引用了过多的 script 文件，或者内嵌了多个 script 标签。

每一个额外的 HTTP 请求都会带来显著的性能开销。

在 link 标签之后紧跟 script 标签是一种错误做法，因为脚本会等待 CSS 样式表加载完成，以确保获取最精准的页面描绘信息。

解决这一问题的结论是减少 script 标签的数量。

可以通过将多个 JavaScript 文件合并为一个文件，并利用打包工具进行处理。

例如，Yahoo 提供的合并处理器便是此类解决方案的代表。

无阻塞加载方案

JavaScript 倾向于阻止浏览器的某些关键处理过程，包括 HTTP 请求处理和界面更新，这是导致性能问题的核心原因。因此，必须减少 JavaScript 文件的大小并限制 HTTP 请求的数量。

然而，功能丰富性与代码体积之间存在矛盾：虽然将代码合并为单个文件可以减少请求数，但文件体积过大会长时间锁定浏览器。因此，我们需要采用逐步加载 JavaScript 文件的策略。

关键原则是：在页面主要加载完成后，再加载 JavaScript 文件。

利用 defer 属性延迟执行

可以使用 defer 属性来实现这一目标。

如果待下载的 JavaScript 文件不涉及 DOM 操作，defer 属性非常有用。它允许文件并行下载而不立即执行，而是在页面 onload 事件触发后再执行，该属性适用于任何 script 标签。

动态创建脚本标签

具体实现涉及一个封装函数。

 
function loadScript(url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
if(script.readyState) { //IE
script.onreadyStatechange = function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadyStatechange = null;
callback();
} 
} else {
script.onload = function(){
callback();
} 
} 
} 

此处需注意浏览器的兼容性处理，包括删除旧的事件监听器。

如果需要加载多个文件，可以采用链式调用的方式。

 
loadScript('file1.js', function(){
loadScript('file2.js',function(){
}) 
}); 

 
var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) {
var oScript = document.createElement('script');
oScript.text = xhr.responseText;
document.body.appendChild(oScript);
} 
} 
} 

状态码 304 表示从缓存获取，text 属性用于将 AJAX 返回的内容放入脚本中。

该方法兼容性较好且支持异步，但其缺点是无法跨域，也不能从 CDN 获取内容。