JS 性能提升 -- 1

Posted 2021-02-19 蜡笔小新

1. for 循环

     循环体中减少计算:

    

for (let i =0, len = attr.length; i< len; i++) {
  // xxx 
}

// 替换下面的
for (let i =0; i< attr.length; i++) {
  // xxx 
}

　　

2. 深度拷贝中map代替数组

   Map的查找元素速度优于数组

 

3. canvas画图, new imag插入数量较大时, 采用

    xxx.property.x = new Image(20, 20);

   减少new image的操作, 提升性能

 

4. 自己新写Map的时候, 原生的方法更快

 

5. 删除废弃不用的代码

6.避免全局查找

  

// 将在一个函数中会用到多次的全局对象存储为局部局部变量
    var doc = documnet;
      var imgs = doc.getElementsByTagName("img");

      for (var i=0, len=imgs.length; i < len; i++){
        imgs[i].title = document.title + " image " + i;
      }

　

7. 避免不必要的属性查找, 尽量减少查找次数

 

8.用innerhtml代替DOM操作，减少DOM操作次数，优化javascript性能

　　当使用innerHTML设置为某个值时，后台会创建一个HTML解释器，然后使用内部的DOM调用来创建DOM结构，而非基于JS的DOM调用。由于内部方法是编译好的而非解释执行，故执行的更快。

 

9.修改样式时，可以使用div.style.cssText来一起修改样式，或者使用类来修改（便于维护）。

　var el = document.getElementById(‘mydiv‘);
   //修改3次Dom
  el.style.borderLeft = ‘1px‘;
  el.style.borderRight = ‘2px‘;
  el.style.padding = ‘5px‘；
  //推荐只需要修改1次Dom
  el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px;‘

　　

　

10. 懒加载; 事件委托;抖动和节流;虚拟dom[可以使用DocumentFragment文档片段实现], 一次插入;

  

可以使用DocumentFragment文档片段实现。它不属于DOM树，向它上边添加DOM节点不会引起浏览器的reflow和repaint；

可以先把所有待更新节点添加到DocumentFragment中，然后使用appendChild()方法将所有待更新节点一次性添加，

有效地降低了重排重绘的次数；在使用appendChild()方法时只会讲DocumentFragment的子节点树添加到DOM树中；

创建DocumentFragment对象时使用document.createDocumentFragment()方法，

同时可以把它保存到局部变量中减少属性查找次数；

 

11. 在需要大量条件判断时使用switch比使用if-else更高效；

 

12. HTMLCollection是一个会实时更新的对象，访问它的属性或方法的开销都很大，不需要使用其实时信息的情况下最好将其保存到局部变量再调用，以减小查询次数；尤其在循环体中尽量避免多次调用该对象；

以下条件下会返回HTMLCollection对象：
1、调用了getElementByTagName();
2、获取元素的childNodes属性；
3、获取元素的attributes属性；
4、访问document.forms、document.images等特殊集合；