标签:dom节点 创建 维护 name 局部变量 函数 自己 forms 一起
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等特殊集合;
标签:dom节点 创建 维护 name 局部变量 函数 自己 forms 一起
原文地址:https://www.cnblogs.com/ljyqd/p/12881190.html