高性能javascript笔记

javascript加载和运行

1. 脚本位置

尽管浏览器已经容许并行下载javascript文件，可是javascript下载过程仍然会阻塞其余资源的下载，如图片。页面仍然须要等待全部javascript代码下载并执行完成才能继续因此优化javascript的首要原则：将脚本放在底部（</body>以前)

2. 组织脚本

每一个<script>标签初始下载都会阻塞页面渲染，因此减小页面包含的<script>标签数量有助于改善这一状况。考虑到到HTTP请求会额外带来性能的开销。下载单个100B的文件比下载4个25B的文件更快。因此，减小页面中外链脚本文件的数量会改善性能。

3. 无阻塞的脚本

• 延迟的脚本：带有defer属性的<script>标签，须要浏览器支持
• 动态脚本元素:在跨浏览器兼容性和易用的优点，是最通用的无阻塞加载解决方案

• XMLHttpRequest注入：先建立一个XHR对象，而后用她下载javascript文件，最后经过建立动态<script>元素将代码注入页面中

  var xhr = new XMLHttpRequest();
    xhr.open("get","file.js",true);
    xhr.onreadystatechange = funtion(){
         if(xhr.readyState == 4){
              if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                   var script = document.creatElement("script");
                   script.type="text/javascript";
                   script.text=xhr.responseText;
                   document.body.appendChild(script);
                   }
              }    
    };
    xhr.send(null);
    //因为代码是在<script>标签以前返回的，所以它下载后不会自动执行。
    //一样的代码在全部主流浏览器中无一例外都能正常工做
    //局限性在于：javascript文件必须与请求的页面处于相同的域，即javascript不能从CDN下载

4. 无阻塞脚本加载工具

lazyLoad类库、LABjs等等

管理做用域

1. 做用域链和标识符解析

在函数执行的过程当中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取或存储数据。该过程搜索运行期上下文的做用域链，查找同名的标识符。搜索过程从做用域链头部开始也就是当前运行函数的活动对象，若是找到了，就使用这个标示符对应的变量；若是没有找到，继续搜索做用域链中的下一个对象，直到标识符被找到，或者没有可用于搜索的对象为止，这种状况下标识符被认为是未定义的。正是这个搜索过程影响了性能。

2. 标识符解析的性能

一个标识符所在的位置越深，他的读写速度就越慢，所以读写局部变量老是最快的，而读写全局变量一般是最慢的。全局变量老是存在于运行期上下文做用域链的最末端，所以是最远的。在没有优化javascript引擎的浏览器中，尽可能使用局部变量，若是某个跨做用域的值在函数中被引用了屡次，就把他存储到局部变量里。

```
function initUI(){
     var doc = document,bd = doc.body,links = doc.getElementByTagName("a");
     var i = 0,len = links.length;
     while(i<len){
     update(links[i++]);
     }
     doc.getElementById("btn").onclick = function(){
     start();
     };
     bd.className = "active"
}
//首先将document对象引用存储到局部变量doc中，全局变量的访问减小，当有不少全局变量被反复访问时，这种方法对性能的改善是很明显的。
```

3. 闭包，做用域和内存

将经常使用的跨做用域变量存储在局部变量中，而后访问局部变量嵌套的对象成员会明显影响性能，尽可能少用
一般来讲，把经常使用的对象成员、数组元素、跨域变量保存在局部变量中来改善javascript性能，由于局部变量访问速度更快。

DOM

```
function initHtml1(){
     for(var i = 0;i<15000;i++){
     document.getElementById('here').innerHTML+='a';
     }
}

function initHtml2(){
     var html = "";
     for(var i=0;i<15000;i++){
     html+='a';
     }
     document.getElementById('here').innerHTML = html;
}
```

initHtml1()比initHtml2()速度慢不少，initHtml2()使用局部变量存储更新后的内容，减小了DOM访问，所以，减小DOM访问次数，讲运算尽可能留在ECMAScript这端处理。