Web APIs DOM 重绘和回流

Posted 2022-07-13 黑马程序员官方

前期更新笔记内容：  Web API 基本认知 /    获取DOM元素 /   设置/修改DOM元素内容和元素属性 /  定时器-间歇函数  /  事件基础  /    高阶函数  /   环境对象  / 综合案例-Tab栏切换 / DOM节点 /DOM 时间对象

---

一、 重绘和回流

1.1.浏览器是如何进行界面渲染的
 

 

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

1.2 重绘和回流(重排)
 

回流(重排)

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

重绘

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

重绘不一定引起回流，而回流一定会引起重绘。

会导致回流（重排）的操作：

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化（如：input框的输入，图片的大小）
• 激活css伪类 （如：:hover）
• 脚本操作DOM（添加或者删除可见的DOM元素）
• 简单理解影响到布局了，就会有回流

 

---

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈  另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。