浏览器渲染原理
2015-08-14 09:00:14 7 举报在网上看的别人写的浏览器渲染原理的文档，整理的，用来加深记忆
作者其他创作
大纲/内容
Parser
CSS parser
Display
浏览器开始解析html，并且将标签转化成内容树种DOM节点
painting
webkit 称李勇dom节点去创建 render tree的过程为 attachment
Frame Tree
HTML
CSS Parser
Style Sheet
Frame Constractor
Dom Tree
浏览器渲染原理
DOM
构建render tree
render树由一些包含颜色和大小等属性矩形组成，他们将被按照正确的顺序显示在屏幕上
开始布局，确定每个节点在屏幕上的确切坐标
Geoko（firefox）
Content Sink
Geoko在html和DOM之间增加了一层，称之为内容接收器，相当于制造DOM元素的工厂
Render Tree
Style rules
HTML Parser
Attachment
绘制render树
Geoko称可见的格式化元素组成的为frame树，每一个元素都是一个frame。webkit则用render来命名由渲染对象组成的树
解析html以构建Dom tree
布局render树
浏览器获取到要渲染的内容，比方说你在URL里输入www.taobao.com
Content Model
wekit渲染流程
解析外部的css文件及style中的信息，这信息及html中的可见性指令将构成render tree
Reflow
Geoko中元素的定位称为回流，webkit中称为布局
Style Rule Tree
CSS sheets
渲染引擎 Rendering Engine
Geoko引擎渲染主流程
Layout
Painting
0 条评论
下一页
