JS 性能提升 -- 1

Posted 蜡笔小新

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 性能提升 -- 1相关的知识,希望对你有一定的参考价值。

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等特殊集合;

以上是关于JS 性能提升 -- 1的主要内容,如果未能解决你的问题,请参考以下文章

十条jQuery代码片段助力Web开发效率提升

你不知道的Node.js性能优化,读了之后水平直线上升

面试:提升页面性能优化的方法有哪些?

VsCode 代码片段-提升研发效率

Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)

JS 性能提升 -- 1