JavaScript性能优化

Posted 2020-08-25 行动派

1. 优化页面加载时间
   • html标签顺序：把所有能够移动的<script>标签挪至HTML的</body>前。
   • javascript文件的GZip编码传输
   • 缩编、混淆和编译，使用工具进行代码的精简和优化
   • 请求时才延迟加载JavaScript文件
2. 优化文档对象的操作
   • 实现对页面元素的最小化访问
     • 以变量保存对DOM元素的引用以便后续使用
     • 通过对单独父元素的引用来访问子DOM元素
     • 

       var wrapper = document。getElementById("wrapper"),
             header = wrapper.getElementByTagName("header")[0],
             nav = wrapper.getElementByTagName("nav")[0];

       View Code
     • 对新建元素实施DOM修改操作后才将其添加当前实时页面
     • 

       var list = document.createElement("ul"),
       item = document.createElement("li");
       item.innerHTML="this is a list item";
       list.appendChild(item);
       document.body.appendChild(list);

       View Code　　　　　　

1. • 尽量利用已有的元素
     • 如果是创建多个有着相似标签特性的元素，可以使用DOM元素的cloneNode()方法来复制该元素及相关特性，减少标准的document.createElement()方法来创建元素。
   • 离线DOM的利用
   使用CSS而非JavaScript来操控页面样式，减少在浏览器引发重排的次数
   • 

     //演示当直接更新DOM元素的Style属性时所引发的重排
         var nav =document.getElementByTagName("nav");
         nav.style.backgroundColor = "#000";//在浏览器中引发一次重排
         nav.style.color = "#fff";//引发一次重排
         nav.style.opacity = 0.5;//引发一次重排

     View Code
     

     //应用CSS类至DOM元素以减少浏览器重排
         var nav = document.getElementByTagName("nav");
         nav.className="selected";//名称为selected的CSS类中包含着多项样式

     View Code
     

     //隐藏元素并修改元素的style属性，以此来减少浏览器重排的发生
         var nav = document.getElementByTagName("nav");
         nav.style.display = "none";//隐藏元素，引发一次浏览器重排
         nav.style.backgroundColor = "#000";//因为元素已隐匿，不会引发重排
         nav.style.color = "#fff";//不会引发浏览器重排
         nav.style.opacity = 0.5;//不会引发浏览器重排
         nav.style.display = "block";//使该元素重新显示，引发一次浏览器重排

     View Code
2. 提升DOM事件性能
   • 委托事件至父元素
   • 使用框架化处理频发的事件