前端dom优化

一.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))