前端工程师面试题（四）

说一下浏览器如何渲染页面的？

解题思路：

关键：DOM 树、StyleSheet、 布局树、 分层、光栅化、合成

标准答案：

1. 浏览器拿到 HTML，先将 HTML 转换成 DOM 树，再将 CSS 样式转换成 StyleSheet，根据 DOM 树和 StyleSheet 创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。
2. 分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就 ok，transform，z-index 等，浏览器会自动优化生成图层。【加分回答】
3. 光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前值渲染可视区附近区域。【打分回答】

拓展：分享讨论区一个同学（牛客150990719号）的回答：

1. HTML 被 HTML 解析器解析成 DOM 树。
2. CSS 被 CSS解析器解析成 CSS 规则树。
3. 浏览器会将 CSS 规则树附着在 DOM 树上，并结合两者生成渲染树 Render Tree。
4. 生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点。
5. 将布局绘制（paint）在屏幕上，显示出整个页面。

题目来源于牛客网（前端工程师面试题）