重绘和回流

游览器渲染过程

渲染过程发生在通过http得到资源后的游览器内部,其过程如下:

  • 游览器首先对HTML进行解析,这部分由游览器的HTML文档引擎实现,如KHTML(其细节与原理以后有时间会分析源码后再写一篇),这时得到dom元素并生产DOM树(dom tree),每一个HTML标签<Tag>都会在DOM树有对应的节点,根节点就是document对象,对应<html></html>元素。

  • 于此同时,游览器会对CSS进行解析,其解析优先级为:以style属性书写的CSS -> 用户link引入的CSS -> 用户import引入的CSS -> 游览器默认的CSS规则,并且考虑CSS覆盖于优先级,忽略不能被解析的错误CSS与无意义的前缀名,保留有意义的可被正确解析的CSS。

  • CSS解析完毕后,通过之前生成的渲染树加上解析完毕后的CSS,就能构建一课渲染树(render tree),每一个元素一般会对应一个节点,不一般的情况大家也能想到就是通过display:none进行修饰的元素就不会出现先渲染树中(敲黑板:因此也就不会有物理空间了,笔试常考),以及某些可以换行的块级元素&lt;p&gt;是一行一个节点。

  • 完成渲染树后,游览器开始绘制页面。


重绘和回流

  • 重绘:当渲染树中的元素样式改变不影响布局时,发生重绘,重绘不会改变整课渲染树,只会改变部分渲染树的节点属性,如颜色,风格,字体样式,阴影,模糊,背景等。
  • 回流:当渲染树种元素的样式改变影响了布局时,发生回流,回流会让页面重新构造,并让受到影响的部分失效,完成回流后,游览器会重新展示受影响的部分,这个过程也是重绘。所以发生回流是一定会发生重绘的。引起回流的样式改变有:
    • 添加或删除可见的dom元素;
    • 修改了可见dom元素的大小、位置、布局、隐藏(display:none会回流,visibility: hidden不会回流);
    • 修改了可见元素的内容,需要重新计算,如改变图片的src,改变文字的数量;
    • 游览器的窗口变化,改变缩放比例,改变字号,滚动;
    • 页面渲染初始化;
    • 添加了一个样式表其中有引起回流的样式;

前端优化之减少重绘与回流

通过上面分析,已经熟悉了重绘与回流的概念和过程,那么其优化无非就是减少引起重绘和回流的样式改变。

  • 使用改变类名的方式改变样式,可以一次性将多个样式改变,从而减少重绘和回流的产生次数,同时也增加了页面的可维护性。
  • 使用display:none隐藏元素
  • 尽量不要计算元素
  • 能用重绘解决的就不要用回流解决

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕