issues
search
ChuChencheng
/
note
菜鸡零碎知识笔记
Creative Commons Zero v1.0 Universal
3
stars
0
forks
source link
浏览器如何渲染页面
#11
Open
ChuChencheng
opened
4 years ago
ChuChencheng
commented
4 years ago
大致流程
DOM
读取 HTML 的原始字节,根据文件编码(例如 UTF-8)转换成字符
令牌化,转化为 token
词法分析、语法分析
构建 DOM 树
CSSOM
读取字节,转换成字符
令牌化
词法分析、语法分析
构建 CSSOM 树
构建渲染树(Render Tree)
在 Gecko 下也叫 Frame Tree
从 DOM 树根节点开始遍历每个可见节点
对于每个可见节点应用对应的 CSSOM 规则
输出渲染树
渲染树包括节点内容与计算的样式
布局(Layout)
这个过程在 Gecko 下叫 Reflow
从渲染树跟节点开始遍历,计算每个节点在视口的确切位置与大小
输出 “盒模型”
绘制(Painting)
将渲染树中的每个节点转换成屏幕上的实际像素
参考
How browsers work
构建对象模型
渲染树构建、布局及绘制
大致流程
DOM
CSSOM
构建渲染树(Render Tree)
在 Gecko 下也叫 Frame Tree
渲染树包括节点内容与计算的样式
布局(Layout)
这个过程在 Gecko 下叫 Reflow
绘制(Painting)
参考