首页 > 试题广场 >

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

[问答题]
说一下浏览器如何渲染页面的？
添加回答
推荐
可乐加冰upuppp头像 可乐加冰upuppp

得分点

dom树、stylesheet、布局树、分层、光栅化、合成

参考答案

标准回答

浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。

加分回答

分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层

光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域

延伸阅读

图片说明

早期没有分层和光栅化，流程如下

1.解析HTML文件，创建DOM树
2.解析CSS,形成CSS对象模型
3.将CSS与DOM合并，构建渲染树（renderingtree）
4.布局和绘制
图片说明

编辑于 2021-09-15 12:15:04 回复(0)
牛客342653670号头像 牛客342653670号
不会
发表于 2021-09-02 14:23:05 回复(0)
Dexlux头像 Dexlux
  1. 解析html和css，生成dom树和cssom树
  2. 计算样式
  3. 布局
  4. 分层
  5. 生成绘制指令
  6. 分块
  7. 光栅化
  8. 画
发表于 2023-06-19 18:12:31 回复(0)
牛客209285208号头像 牛客209285208号
解析HTML 构建DOM，并行请求css/image/js ，css文件下载完成、开始构建css数
css树构建结束后，和DOM一起生成渲染树
布局：计算每个节点在屏幕中的位置
显示：通过显卡把页面画到屏幕上
发表于 2021-09-02 15:49:14 回复(0)
牛客385753152号头像 牛客385753152号

  1. 解析HTML，将HTML代码解析成文档对象模型（‌DOM）‌,生成DOM tree；

  2. 解析CSS，‌生成CSS对象模型（‌CSSOM）‌生成CSSOM tree；
  3. 浏览器将DOM树和CSSOM树合并，‌构建渲染树（‌Render tree）‌。‌
  4. 浏览器根据渲染树中的节点信息，‌计算每个节点的位置和大小，‌进行页面布局。‌
  5. 浏览器遍历渲染树，‌将每个节点绘制到屏幕上，‌形成最终的页面视图。‌
发表于 2024-08-19 14:50:11 回复(0)
牛客490369987号头像 牛客490369987号
123

发表于 2022-10-10 23:01:37 回复(0)
牛客108947936号头像 牛客108947936号
1. 解析html代码，生成DOM tree

2. 解析css代码，生成CSSOM tree

3. 通过DOM tree 和 CSSOM tree 生成 Render tree

4. Layout（布局），计算Render tree中各个节点的位置及精确大小

5. Painting（绘制），将render tree渲染到页面上

发表于 2022-09-08 20:58:33 回复(0)
提交观点

问题信息

上传者：小小
难度：
7条回答 789浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号