一. 浏览器渲染过程
- 解析 HTML,生成 DOM Tree。
- 解析 CSS,生成 CSSOM(CSS Object Model)。
- 合并 DOM Tree 和 CSSOM,生成 Rendering Tree。
- 布局,计算节点的位置和大小信息。
- 绘制,将节点绘制到页面上。
Load 和 DOMContentLoaded
- Load事件触发时,所有资源都已加载完毕(CSS,JavaScript,图片等)。
- DOMContentLoaded事件触发时,仅代表HTML加载完成,不保证CSS,JavaScript,图片的加载。
脚本的defer和async
- defer:脚本与HTML并行加载,但是要等到HTML加载完再执行
- async:脚本与HTML并行加载,加载完马上执行(执行会阻塞HTML解析)
- 注意:并行加载不会阻塞,但脚本执行会阻塞。
二. 重绘(Repaint)
- 元素外观变化会引起浏览器重绘,以更新外观。
- 触发:修改元素的
color
、background-color
,修改visibility
为hidden
(修改可见性没有引起空间变化)
三. 重排(Reflow)
- 重排一定会引起重绘。
- 元素的布局,尺寸变化会引起浏览器重排,以重新计算位置大小。
- 触发:
场景 | 描述 |
---|---|
display:none | 空间发生变化 |
页面首次渲染 | 必须发生 |
浏览器窗口resize | 修改浏览器空间 |
元素尺寸变化 | 内外边距、边框、大小变化 |
<p>内容变化、<img>图片修改 | 内容动态变化引起空间变化 |
使用动画或JavaScript修改元素位置 | 位置变化引起重排 |
动态添加或删除DOM元素 | 浏览器需要重新计算位置 |
四. 优化
1. 使用JavaScript操作元素样式时通过修改class的方法合并操作
2. 使用transform完成位置移动
3. 简化并优化CSS选择器,尽量将嵌套层减少到最小
4. 先设置元素为display:none;然后再进行页面布局等操作;设置完成后将元素设置为display:block;这样的话就只引发两次重绘和重排;
5. 将需要添加动画的元素置于额外图层(脱离文档流)
6. 尽量不要使用table布局
7. 动态插入大量元素时使用DocumentFragment过渡
网友评论