From a06e66c72675f733e12dca3287b4d3f0bf88a109 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 19 Jan 2021 21:23:49 +0800 Subject: [PATCH] update: reflow --- 13-前端面试/01-面试必看/09-浏览器渲染机制.md | 62 ++++++++++++-------- 13-前端面试/02-前端性能优化/02-渲染优化.md | 14 +++++ 2 files changed, 51 insertions(+), 25 deletions(-) diff --git a/13-前端面试/01-面试必看/09-浏览器渲染机制.md b/13-前端面试/01-面试必看/09-浏览器渲染机制.md index f416ffb..49ebb04 100644 --- a/13-前端面试/01-面试必看/09-浏览器渲染机制.md +++ b/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：重绘 ### 定义 diff --git a/13-前端面试/02-前端性能优化/02-渲染优化.md b/13-前端面试/02-前端性能优化/02-渲染优化.md index 23df404..af2c6ce 100644 --- a/13-前端面试/02-前端性能优化/02-渲染优化.md +++ b/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 做防抖 + +