DOM性能优化

DOM性能优化,第1张

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即是当时蕴酿出来的杰作。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11698836.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存