浏览器渲染原理

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