一.dom操作优化:
在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流 (reflow)操作。我们应该尽可能的减少DOM操作。
1操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦。使用文档片段可以减少内存对拼接字符串的解析,优化内存。var
oFragment =document.createDocumentFragment();
var oFragment =document.createDocumentFragment();
var oP='<p>hellow word</p>'
oFragment.appendChild(oP);
document.body.appendChild(oFragment);
2. 尽量减少DOM调用 回流操作主要会发生在几种情况下:
* 改变窗体大小
* 更改字体
* 添加移除stylesheet块
* 内容改变哪怕是输入框输入文字
* CSS虚类被触发如 :hover
* 更改元素的className
* 当对DOM节点执行新增或者删除操作或内容更改时。
* 动态设置一个style样式时(比如element.style.width="10px")。
* 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值
解决问题的关键,就是限制通过DOM操作所引发回流的次数:
1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。
2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
2.1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
2.2. 设置该元素的display样式为“none”。
使用事件委托来减少事件处理器的数量3.DOM解析文本后,生成DOM树。即:一次性文本解析,生成对象当解析的html文件很大时,生成DOM树占用内存较大,同时遍历(不更新)元素耗时也更长。但这都不是重点,DOM的核心问题是:DOM修改导致的页面重绘、重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨!
DOM操作会导致一系列的重绘(repaint)、重新排版(reflow)操作。为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对 DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程,直到发生重新排版,用户一直被阻塞。
一般的浏览器中(不含IE),repaint的速度远快于reflow,所以避免reflow更重要。
导致repaint、reflow的操作:
* DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
* 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
* 应用新的样式或者修改任何影响元素外观的属性
* Resize浏览器窗口、滚动页面
* 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))