update: reflow

13-前端面试/01-面试必看/09-浏览器渲染机制.md

@@ -3,22 +3,6 @@
 
 ## 前言
 
-> 接下来的几篇文章，讲一下二面的内容。
-
-**二面的内容：**
-
-
-- 渲染机制
-
-- JS 运行机制
-
-- 页面性能
-
-- 错误监控
-
-本文接下来讲渲染机制。
-
-
 **渲染机制**包括的内容：
 
 - 什么是DOCTYPE及作用
@@ -27,6 +11,7 @@
 
 面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
 
+
 - Reflow：重排
 
 面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
@@ -37,6 +22,7 @@
 
 这里的Layout指的是浏览器的Layout。
 
+
 ## 什么是DOCTYPE及作用
 
 ### 定义
@@ -91,6 +77,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
 ## 浏览器的渲染过程
 
 
+
 ### 渲染树
 
 ![](http://img.smyhvae.com/20210118-2005.png)
@@ -115,7 +102,7 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
 
 - 渲染树（Render Tree）: DOM 树与 CSSOM 树合并后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。
 
-- 布局（Layout）: **通过布局，计算出每个节点在屏幕中的位置**(大小、颜色等)。
+- 布局（Layout）: 计算出每个节点在屏幕中的**位置和大小**。
 
 - 绘制（Painting）：按照算出来的规则，通过显卡，把内容画出来。
 
@@ -147,32 +134,57 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用
 
 （5）conmposite：同上一段。
 
-理论上，上面的五个步骤都是必须要经历的。但是，有些样式并不会影响布局，也不会影响绘制。所以，浏览器对这方面的性能进行了优化，并不一定要经历布局和绘制这两个过程。这就需要我们先了解一下「重排」和「重绘」这两个概念。详见下一段。
+理论上，上面的五个步骤都是必须要经历的。布局和绘制是关键渲染路径中，最重要、开销最高的两个步骤。
 
-## Reflow：重排
+但是，有些样式并不会影响布局，也不会影响绘制。所以，浏览器对这方面的性能进行了优化，并不一定要经历布局和绘制这两个过程。这就需要我们先了解一下「重排」和「重绘」这两个概念。详见下一段。
+
+
+
+
+
+## Reflow：重排（回流）
 
 ### 定义
 
-**重排 Reflow**：DOM结果中的各个元素都有自己的盒子（模型），这些都需要浏览器**根据各种样式来计算，并根据计算结果将元素放在它该出现的位置**，这个过程称之为Reflow。
+**重排 Reflow**：
+
+渲染对象在创建完成并添加到渲染树时，是将DOM节点和它对应的样式结合起来，并不包含位置和大小信息。
+
+我们还需要通过 `Layout` 布局阶段，来计算它们在设备视口(viewport)内的确切位置和大小，计算这些值的过程称为`回流`、`布局`或`重排`。
 
 
-### 什么时候触发 Reflow
 
-- 增加、删除、修改DOM节点时，会导致 Reflow 或 Repaint。
+参考链接：
 
-- 移动DOM的位置，或是加个动画的时候
+- [从浏览器渲染原理，浅谈回流重绘与性能优化](https://www.cnblogs.com/xiahj/p/11777786.html)
+
+- [你真的了解回流和重绘吗](https://github.com/chenjigeng/blog/issues/4)
+
+### 什么时候会触发 Reflow
+
+> 核心就是围绕DOM元素的**大小**和**位置**。
+
+- 增加、删除DOM节点
+
+- display: none
+
+- 移动元素位置，或是增加动画
 
 - 修改CSS样式时（宽高、display 为none等，都是通过css样式来修改的）
 
-- 当用户Resize窗口时（移动端没有这个问题），或是滚动的时候，**有可能**会触发（具体要看浏览器的规则）。
+- offsetLeft、scrollTop、clientWidth
 
-- 修改网页的默认字体时（这个影响非常严重）。
+- 修改浏览器窗口大小时（即Resize窗口，移动端没有这个问题），或是滚动的时候，**有可能**会触发（具体要看浏览器的规则）。
+
+- 修改网页的默认字体时（这个很消耗性能）。
 
 **面试总结：**
 
 首先要答出 Reflow 定义；其次，什么时候触发，至少要答出两条。更进一步，面试官可能还会问你**怎么避免reflow**，这个自己去查查吧。
 
 
+
+
 ## Repaint：重绘
 
 ### 定义

13-前端面试/02-前端性能优化/02-渲染优化.md

@@ -11,3 +11,17 @@
 关于浏览器的渲染机制，可以看本教程的另外一篇文章：
 
 > 《前端面试/面试必看/浏览器渲染机制.md》
+
+
+## 避免布局抖动（layout thrashing）
+
+1、尽量避免 reflow：
+
+比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起 reflow。我们可以使用 `transfrom:translate`让元素做位移，这个属性既不会触发 reflow，也不会触发 repaint，只会触发 conmposite。
+
+再比如说，vue、react这样的框架，采用了虚拟DOM，它会把涉及到DOM修改的操作积攒起来，然后统一计算，批量处理，最后应用到真正的DOM上。
+
+2、读写分离。
+## 使用FastDom 做防抖
+
+