web前端优化--DOM性能优化
2015-09-14 19:50
239 查看
1、DOM访问与修改的优化:
DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能。
(1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变量,而不是再次去访问DOM。
(2)减少重绘与重排:
批量修改:使用文档片段documentFragment、使用类名一次性修改多个样式、或者使用CSSText属性
如 ele.style.cssText = 'color:red;border:1px solid green';
元素脱离文档流,再做修改:将元素隐藏或者克隆一份,在对其进行修改,完成修改后再显示。(对隐藏元素的操作不会引起重绘重排)
(3)选择器的使用,使用更快的querySelectorAll('#div1 .active')。
注意:使用getElementsByTagName等返回HTML集合的方法时,这些返回的HTML集合会实时连接着底层文档,比如增加了一个元素,HTML结合会立即反应出来。
可以使用变量缓存,或者将HTML集合拷贝到一个数组中,访问数组的效率会比访问HTML集合要快
下面这段代码会陷入死循环:
改成下面这种,将集合长度缓存下来,就不会出现上面的情况
(4)使用事件委托:避免对同类元素同时绑定事件,而是使用事件冒泡机制,在父元素上绑定。
(5) innerHTML 与DOM :innerHTML稍快 (除了Webkit内核的浏览器)
DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能。
(1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变量,而不是再次去访问DOM。
(2)减少重绘与重排:
批量修改:使用文档片段documentFragment、使用类名一次性修改多个样式、或者使用CSSText属性
如 ele.style.cssText = 'color:red;border:1px solid green';
元素脱离文档流,再做修改:将元素隐藏或者克隆一份,在对其进行修改,完成修改后再显示。(对隐藏元素的操作不会引起重绘重排)
(3)选择器的使用,使用更快的querySelectorAll('#div1 .active')。
注意:使用getElementsByTagName等返回HTML集合的方法时,这些返回的HTML集合会实时连接着底层文档,比如增加了一个元素,HTML结合会立即反应出来。
可以使用变量缓存,或者将HTML集合拷贝到一个数组中,访问数组的效率会比访问HTML集合要快
下面这段代码会陷入死循环:
function loopAlways(){ var odivs = document.getElementsByTagName('div'); for(var i=0;i<odivs.length;i++){ console.log(odivs.length); //odivs是一个HTML集合,实时和文档连接,记录最新变化 var d = document.createElement('div'); document.body.appendChild(d); } }
改成下面这种,将集合长度缓存下来,就不会出现上面的情况
var odivs = document.getElementsByTagName('div'); for(var i=0,len=odivs.length;i<len;i++){ var d = document.createElement('div'); document.body.appendChild(d); }
(4)使用事件委托:避免对同类元素同时绑定事件,而是使用事件冒泡机制,在父元素上绑定。
(5) innerHTML 与DOM :innerHTML稍快 (除了Webkit内核的浏览器)
相关文章推荐
- Retrofit中使用GSON解析定制格式的JSON
- webapi ,前台json传入raw读取
- JSON 序列化 和 JSON 反序列化
- bzoj1032 [JSOI2007]祖码Zuma
- react router 学习总结
- JS中复制数组
- Wow6432Node
- JSP 四个内置对象的保存范围
- JSP 响应对象 response
- js校验15位/18位身份证件号(地区、生日、性别)
- JSP 对话对象 Session
- JQuery最好用的API在线文档
- css学习 选择器
- css3的linear-gradient
- css学习绝对定位、相对定位
- JSP中JSP中include指令和include行为的区别
- Js_动画显示背景图片
- jquery的tree table(树表)
- html表格排序之完全详解
- Javascript常用前台表单验证