DOM性能优化

DocumentFragments描述：

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

1.javascript/css设置动画或变换

2.【计算样式】

       根据css选择器，对每个DOM元素匹配对应的CSS样式。

       从而确定每个DOM元素上应该应用什么CSS样式规则。

3.【布局】

       计算每个DOM元素最终在屏幕上显示的大小和位置。

4.【绘制】

       本质上就是填充像素的过程。

       包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。

        一般来说，这个绘制过程是在多个层上完成的。

5.【渲染层合并】

在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，

然后在屏幕上呈现。

  1.调整窗口大小

  2.改变字体

  3.增加或者移除样式表

  4.内容变化

  5.激活CSS伪类

  6. *** 作CSS属性

  7.JavaScript *** 作DOM

  8.计算 offsetWidth和 offsetHeight

  9.设置 style 属性的值

  10.CSS3 Animation或Transition

  1.页面首次加载

  2.DOM元素添加、修改(内容)和删除(Reflow + Repaint)

  3.仅修改DOM元素的颜色

  4.应用新的样式或修改任何影响元素外观的属性

  5.Resize浏览器窗口和滚动页面

  6.读取元素的某些属性( offsetLeft、 offsetTop、 offsetHeight、 offsetWidth、 getComputedStyle() 等)

注：动画效果优选transform、opacity属性，因为二者不会造成页面的重排或重绘。

【生成独立RenderLayer的情况】

  1.页面的根节点的RenderObject

  2.有明确的CSS定位属性（ relative ， absolute 或者 transform ）

  3.是透明的

  4.有CSS overflow、CSS alpha遮罩（alpha mash）或者CSS reflection

  5.有CSS 滤镜（fliter）

  6.3D环境或者2D加速环境的canvas元素对应的RenderObject

  7.video元素对应的RenderObject

【生成独立GraphicsLayer的情况】

  1.有3Dtransform或者perspective的CSS属性的层

  2.使用加速视频解码的video元素的层

  3.3D或者加速2D环境下的canvas元素的层

  4.插件，比如flash

  5.对 opacity 和 transform 应用了CSS动画的层

  6.使用了加速CSS滤镜（filters）的层

  7.有合成层后代的层

  8.同合成层重叠，且在该合成层上面（z-index）渲染的层

  9.有backface-visibility属性的层

  10.will-change:transform的层

注：过多的GraphicsLayer会造成过大的内存消耗，特别对移动端性能影响较大，注意适度使用

1.【减少重排/重绘】DOM 的多个读 *** 作（或多个写 *** 作），应该放在一起。不要两个读 *** 作之间，加入一个写 *** 作。

2.【减少重排】如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。

3.【减少重排/重绘】不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。

4.【减少重排/重绘】尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如， *** 作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行 *** 作，然后再用克隆的节点替换原始节点。

5.【减少重排/重绘】先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次 *** 作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

6.【生成独立的RenderLayer】position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

7.【减少重排/重绘】只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8.使用虚拟DOM的脚本库，比如React等。

9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染，优化js动画

10.【减少重排】left/top->translate    width/height->scale,rotate,opacity

11.【生成独立的GraphicsLayer】尽可能多的利用硬件能力，开启GPU加速

12.尽可能少的使用box-shadows与gradients，二者过于耗性能

*动画性能优化方法持续整理中......

你好！文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

---