JS-重绘和回流

4次阅读
没有评论

共计 493 个字符,预计需要花费 2 分钟才能阅读完成。

浏览器如何进行界面渲染

JS-重绘和回流
  • 解析(Parser)HTML,生成 DOM 树(DOM Tree)
  • 同时解析(Parser)CSS,生成样式规则(Style Rules)
  • 根据 DOM 树和样式规则,生成渲染树(Render Tree)
  • 进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置/大小)
  • 进行绘制 Painting(重绘):根据计算和获取的信息进行整个页面的绘制
  • Display:展示在页面上

回流(重排)

当 Render Tree 中的部分或者全部元素的尺寸、结构、布局等发生变化时,浏览器就会重新渲染部分或者全部文档的过程称为回流

重绘**

由于节点(元素)的样式的改变并不影响它在文档流的位置和文档流的布局时(比如:color、background-color、outline等),称为重绘

重绘不一定引起回流,而回流一定会引起重绘

会导致回流(重排)的操作:

  1. 页面的首次刷新
  2. 浏览器的窗口大小发生变化
  3. 元素的大小或位置发生改变
  4. 改变字体的大小
  5. 内容的变化(如:input 框的输入,图片的大小)
  6. 激活 CSS 伪类(如:hover)
  7. 脚本操作 DOM(添加或者删除可见的 DOM 元素)

简单理解影响到布局了,就会有回流

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计493字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码