Javascript 加载性能优化

阻塞特性

浏览器对javascript的处理主要有2部分：下载和执行

• 下载在有些浏览器中是并行的，有些浏览器中是串行的，如IE8、Firefox3、Chrome2都是串行下载的
• 执行在所有浏览器中默认都是阻塞的，当js在执行时不会进行html解析等其它操作

阻塞特性：

javascript有个阻塞特性，当浏览器执行javascript代码时，不能同时做其它任何事情。无论当前javascript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。浏览器在下载和执行脚本是进出现阻塞的原因在于，脚本可能会改变页面或javascript的命名空间，它们对后面页面内容造成影响。

一、脚本位置

浏览器在碰到一个引入外部javascript文件的标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了。例：

  无标题文档        
页面的内容。。。

由于脚本的阻塞特性，页面会在3个javascript文件全部下载执行完成后，页面才会继续渲染，把脚本放在页面顶部会导致明显延迟，通常表现为显示空白页，用户无法浏览内容，也无法与页面交互。

ie8+、firefox 3.5+、safari4+、chrome2+都允许并行下载javascript文件，但是在下载的过程中仍然会阻塞图片等其它资源的下载。

由于脚本会阻塞页面其它资源的下载，因此推荐将javasrcipt尽量放到body标签的底部，以减少对整个页面下载的影响。

二、组织脚本

由于标签在下载时会阻塞页面的渲染，所以减少标签数量有助于改善这一情况。建议将多个javascript文件合并为一个，这样可以减少性能的消耗。同时也可以减少请求的数量。

参考：在服务端合并和压缩javascript和CSS文件

三、无阻塞脚本

1、延迟脚本

HTML4 为标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+支持，因此它不是一个理想的跨浏览器解决方案。声明了defer 属性的script会在DOM加载完成，window.onload 事件触发前被解析执行：

  script defer example    alert('defer');
     alert('script');
 window.onload = function(){
     alert('load');
 }
    

这段代码在支持defer属性的浏览器弹出顺序是：script、defer、load；不支持defer属性的浏览器弹出的顺序是defer、script、load。

2、动态脚本元素

function loadScript(url, callback) {
     var script = document.createElement('script') script.type = 'text/javascript';
 if (script.readyState) {
 //for ie script.onreadystatechange = function() {
 if (script.readyState == 'loaded' || script.readyState == 'complete') {
     script.onreadystatechange = null;
     callback();
 }
 }
    ;
 }
 else {
 //other browser script.onload = function() {
     callback();
 }
    ;
 }
     script.src = url;
     document.getElementsByTagName('head')[0].appendChild(script);
}
    

loadscript函数用法

 //单个文件 loadScript('file1.js', function(){
     alert('loaded!');
 }
    );
 //多个文件 loadScript('file1.js', function(){
 loadScript('file2.js',function(){
 loadScript('file3.js', function(){
     alert('all files loaded!');
 }
    );
 }
    );
 }
    );
    

这种技术的重点在于：无论何时启动下载，文件的下载和执行过程不会阻塞页面其它进程，你甚至可以将代码放在页面的head区域而不影响页面的其它部分（下载该文件的http链接除外）。

3、XMLHttpRequest 脚本注入

此技术会先创建一个XHR对象，然后用它下载javascript文件，最后创建动态的script元素将代码注入到页面中。

var xhr = new XMLHttpRequest();
    xhr.open('get', 'file1.js', true);
xhr.onreadystatechange = function() {
     if (xhr.status >
    = 200 &
    &
     xhr.status 

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！