高性能javascript笔记

2024年3月21日 164次阅读 来源: hexy_xiaojie

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这端处置惩罚。

    原文作者：hexy_xiaojie
    原文地址: https://segmentfault.com/a/1190000002651482
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞