性能优化之无阻塞加载脚步方法比较

    秋招结束了~~，好像偷懒了很久，没更博了。总结一下自己近来看书的内容。

说明一下，内容大部分来自《高性能网站建设进阶指南》。

乱入内容

Web应用和传统桌面应用有一个共同的目标：尽可能快地响应用户输入。

 

怎样才算是快？Jakob Nielsen是Web可用性领域知名且备受推崇的专家，引用他的观点来说就是：如果JavaScript代码执行时间超过了0.1秒，页面将会给人不够平滑快捷的感觉，如果执行时间超过了1秒，则会感到应用程序缓慢，超过了10秒，那么用户将会非常沮丧。

 

性能分析器：Firebug性能分析器

当延迟变得很严重时：线程处理Web Workers、Gears

 

无阻塞加载脚步

     script标签的阻塞行为会对页面性能产生负面影响。大多数浏览器在下载或执行脚本的同时不会下载其他内容。有时候这种阻塞是非必要的。所以，有些情况我们希望以不阻塞其他内容下载的方式来加载JavaScript。可以做到这点使页面加载更快的有：

1.XHR Eval

2.XHR注入

3.Script in Iframe

4.Script DOM Element

5.Script Defer

6.document.write Script Tag

 

①XHR Eval

比较好理解，就是为了并行加载更多的脚本，把一些脚本拆分，然后通过ajax的方式请求脚本，再通过eval来执行。

实例代码：

   var xhrObj=getXHRObject();
   xhrObj.onreadystatechange=function(){
      if(xhrObj.readyState==4&&200==xhrObj.status){
         eval(xhrObj.responseText);
      }
  };
xhrObj.open('GET','A.js',true);
xhrObj.send(' ');

//获取XHR对象的基本方法
function getXHRObject (){
   if (typeof XMLHttpRequest != "undefined"){
          return new XMLHttpRequest();
   } else if (typeof ActiveXObject != "undefined"){
 if (typeof arguments.callee.activeXString != "string"){
     var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
          "MSXML2.XMLHttp"],
          i, len;
     for (i=0,len=versions.length; i < len; i++){
     try {
        new ActiveXObject(versions[i]);
        arguments.callee.activeXString = versions[i];
        break;
     } catch (ex){
       //跳过
     }
    }
  }
   return new ActiveXObject(arguments.callee.activeXString);
  } else {
      throw new Error("No XHR object available.");
  }
}

缺点：

　　通过XMLHttpRequest获取的脚本必须部署在和主页面相同的域中。

②XHR注入

    类似于XHR Eval，XHR注入技术也是通过XMLHttpRequest来获取JavaScript的，但与eval不同的是，该机制通过创建一个script的DOM元素，然后把XMLHttpRequest的响应注入script中来执行JavaScript的，某些情况下使用这种机制的性能会优于eval。

示例代码：

   var xhrObj=getXHRObject();
   xhrObj.onreadystatechange=function(){
      if(xhrObj.readyState==4){
         var scriptElem=document.createElement('script');
         document.getElementsByTagName('head')[0].appendChild(scriptElem);
         scriptElem.text=xhrObj.responseText;
      }
  };
xhrObj.open('GET','A.js',true);
xhrObj.send(' ');

③Script in Iframe

   主页中的iframe和其他组件是并行加载的，与用iframe在一个HTML页面中包含另一个页面的传统做法不同，Script in Iframe技术利用iframe无阻塞加载JavaScript，实现过程完全在HTML中完成。

示例代码：