diff --git a/13-前端面试/01-面试必看/09-01.浏览器渲染机制.md b/13-前端面试/01-面试必看/09-浏览器渲染机制.md similarity index 63% rename from 13-前端面试/01-面试必看/09-01.浏览器渲染机制.md rename to 13-前端面试/01-面试必看/09-浏览器渲染机制.md index 81011b3..f416ffb 100644 --- a/13-前端面试/01-面试必看/09-01.浏览器渲染机制.md +++ b/13-前端面试/01-面试必看/09-浏览器渲染机制.md @@ -86,32 +86,68 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是``。 + + ## 浏览器的渲染过程 -浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。 +### 渲染树 +![](http://img.smyhvae.com/20210118-2005.png) + +> 上方图片的来源：[Google 官方 | 渲染树构建、布局及绘制](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn) + +**渲染树**包含了网页中有哪些节点、各个节点的CSS样式（大小、颜色等）、以及他们的从属关系。 + +我们写完前端代码之后，计算机通过解释器把代码文本翻译成机器能理解的数据结构。比如说，html标签是由一对一对的尖括号表述的，可以被浏览器解析为有含义的标记。这些标记被翻译成节点对象，存放到链型数据结构中。这些节点被称之为**DOM对象**，这个链型数据结构就是**渲染树**。 + +### 渲染过程（重要） + +浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。来看看下面这张图。 ![](http://img.smyhvae.com/20180310_1257.png) -这里先解释一下几个概念，方便大家理解： +这里解释一下几个概念，方便大家理解： -- DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。 +- DOM树（DOM Tree）：浏览器将HTML标签解析成树形的数据结构。DOM树包含了有哪些节点，以及节点之间的嵌套关系。 -- CSS Rule Tree：浏览器将CSS解析成树形的数据结构。 +- CSSOM（CSS Rule Tree）：浏览器将CSS解析成树形的数据结构。CSSOM包含了节点的样式。 -- Render Tree: DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout） +- 渲染树（Render Tree）: DOM 树与 CSSOM 树合并后形成渲染树。渲染树只包含渲染网页所需的节点（但并不知道位置）。 -- layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去**计算出每个节点在屏幕中的位置**(宽高、颜色等)。 +- 布局（Layout）: **通过布局，计算出每个节点在屏幕中的位置**(大小、颜色等)。 -- painting：按照算出来的规则，通过显卡，把内容画到屏幕上。 +- 绘制（Painting）：按照算出来的规则，通过显卡，把内容画出来。 -- display：打击看到的最终效果。 +- conmposite：合成。浏览器在绘制的时候，不会把所有的内容都画在同一个层上。需要最终把这些层合成到一起，显示在屏幕上。 参考链接： -- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html) +- [浏览器渲染原理及流程](http://www.cnblogs.com/slly/p/6640761.html) +### 关键渲染路径 + +浏览器渲染分为五个阶段： + +> JavaScript/CSS --> Style --> Layout --> Paint --> Composite + +![](http://img.smyhvae.com/20210118-1950.jpg) + +> 上方图片的来源： + +关键渲染路径描述的是渲染从触发到绘制的全过程，一共经历了五个阶段： + +（1）通过JS、CSS代码来**触发**页面上的视觉变化。 + +（2）Style：浏览器要重新对样式进行计算。 + +（3）layout：同上一段。 + +（4）painting：同上一段。 + +（5）conmposite：同上一段。 + +理论上，上面的五个步骤都是必须要经历的。但是，有些样式并不会影响布局，也不会影响绘制。所以，浏览器对这方面的性能进行了优化，并不一定要经历布局和绘制这两个过程。这就需要我们先了解一下「重排」和「重绘」这两个概念。详见下一段。 ## Reflow：重排 @@ -141,11 +177,10 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 ### 定义 -**Repaint重绘制：**当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。 +**Repaint重绘制**：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。 说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。 - ### 什么时候触发 Repaint - DOM改动 @@ -169,28 +204,3 @@ PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用 参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889) - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/13-前端面试/01-面试必看/09-02.js运行机制：异步和单线程.md b/13-前端面试/01-面试必看/10-js运行机制：异步和单线程.md similarity index 100% rename from 13-前端面试/01-面试必看/09-02.js运行机制：异步和单线程.md rename to 13-前端面试/01-面试必看/10-js运行机制：异步和单线程.md diff --git a/13-前端面试/01-面试必看/10-01.页面性能优化.md b/13-前端面试/01-面试必看/11-页面性能优化.md similarity index 100% rename from 13-前端面试/01-面试必看/10-01.页面性能优化.md rename to 13-前端面试/01-面试必看/11-页面性能优化.md diff --git a/13-前端面试/01-面试必看/10-02.前端错误监控.md b/13-前端面试/01-面试必看/12-前端错误监控.md similarity index 100% rename from 13-前端面试/01-面试必看/10-02.前端错误监控.md rename to 13-前端面试/01-面试必看/12-前端错误监控.md diff --git a/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md b/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md index fdb5046..bf23a99 100644 --- a/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md +++ b/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md @@ -529,7 +529,7 @@ Chrome DevTools能够检测各种性能参数，其实也是调用了一些性 - SSL 安全连接耗时: connectEnd - secureConnectionStart -- 网络请求耗时 (TTFB): responseStart - requestStart。 +- 网络请求耗时 (TTFB): responseStart - requestStart - 数据传输耗时: responseEnd - responseStart diff --git a/13-前端面试/02-前端性能优化/02-渲染优化.md b/13-前端面试/02-前端性能优化/02-渲染优化.md new file mode 100644 index 0000000..23df404 --- /dev/null +++ b/13-前端面试/02-前端性能优化/02-渲染优化.md @@ -0,0 +1,13 @@ + + +## 浏览器的渲染机制 + +我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。 + +掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。 + +有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。 + +关于浏览器的渲染机制，可以看本教程的另外一篇文章： + +> 《前端面试/面试必看/浏览器渲染机制.md》