说一下浏览器如何渲染页面的?
解题思路:
关键:DOM 树
、StyleSheet
、 布局树
、 分层
、光栅化
、合成
标准答案:
浏览器
拿到HTML
,先将 HTML 转换成DOM 树
,再将 CSS 样式转换成StyleSheet
,根据 DOM 树和 StyleSheet 创建布局树
,对布局树进行分层,为每个图层生成绘制列表,再将图层分成图块,紧接着光栅化将图块转换成位图,最后合成绘制生成页面。- 分层的目的:避免整个页面渲染,把页面分成多个图层,尤其是动画的时候,把动画独立出一个图层,渲染时只渲染该图层就 ok,transform,z-index 等,浏览器会自动优化生成图层。【加分回答】
- 光栅化目的:页面如果很长但是可视区很小,避免渲染非可视区的样式造成资源浪费,所以将每个图层又划分成多个小个子,当前值渲染可视区附近区域。【打分回答】
拓展:分享讨论区一个同学(牛客150990719号)的回答:
- HTML 被 HTML 解析器解析成 DOM 树。
- CSS 被 CSS解析器解析成 CSS 规则树。
- 浏览器会将 CSS 规则树附着在 DOM 树上,并结合两者生成渲染树 Render Tree。
- 生成布局(flow),浏览器通过解析计算出每一个渲染树节点的位置和大小,在屏幕上画出渲染树的所有节点。
- 将布局绘制(paint)在屏幕上,显示出整个页面。