字数
391 字
阅读时间
2 分钟
布局原理
回流和重绘
发生在渲染树的构建阶段，如果在这一过程中，遇到了元素的尺寸、布局或者 display 的改变，就需要重新构建渲染树没这就是回流
在回流的过程中，渲染树收到影响的地方会被重新构造，完成回流后，浏览器会重新绘制这一重新构造的部分，这一过程称之为重绘
渲染树的布局和绘制
布局
渲染树中每个节点都有一个 layout 方法，布局会从 render树 的底层节点开始，递归的计算渲染树中每个节点的 position 和 size 信息，最终得到每个 DOM 元素 在屏幕上显示的大小和位置
绘制
同样遍历 render tree，触发每个节点自身的 paint函数 ，然后调用浏览器的 UI接口 去绘制整个页面，每个元素的绘顺序是 背景元素——背景图片——边框——children——outline，后续可能触发重绘
script 标签的引入资源的三种方式
script 标签发送网络请求获取该 JS 脚本的代码内容
defer 本身就是 延迟 的意思
| script | JS 执行顺序 | 是否阻塞解析 HTML |
|---|---|---|
| async 属性 | 网络请求返回顺序 | 可能阻塞，也可能不阻塞 |
| 带 defer（延迟）属性 | 在 HTML 中的顺序 | 不阻塞 |
| < script > | 在 HTML 中的顺序 | 阻塞 |
贡献者
jiechen