浏览器渲染原理

浏览器渲染原理学习后的总结如下：

一：浏览器的主要功能

1.用户界面-----地址栏，后退，前进按钮，书签目录等，也就是除了主窗口以外的部分。

2.浏览器引擎---用来查询及操作 渲染引擎的接口，另外还用来操作浏览器的数据存储。

3.渲染引擎-----用来显示请求的内容。

4.网络--------用来完成网络调用，例如http请求，它具有平台无关。

5.UI后端------用来绘制类似组合选择框，以及对话框等基本组件，具有不特定于某个平台的通用接口。

6.JS解析器----用来解释执行js代码。

7.数据存储----属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据。

二：渲染引擎是干什么的？

解析html构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树（渲染引擎首先通过网络获得所请求文档的内容，通常以8k分块的方式完成）。

 三：解析树-词法分析器

解析分为两个子过程 -> 语法分析和词法分析

1.词法分析：把字符初步解析成我们可以理解的词，学名token，html结构不算太复杂，我们需要90%的token大约只有标签开始，属性，标签结束，注释，CDATA节点。

2.语法分析：把开始标签结束标签配对，属性赋值好，父子关系联系好，构成dom树。

四：html解析器HTML Parser

1.对输入的内容进行解析，解析的过程其实就是解析字符串的过程。

2.文本节点生成后（词法解析后），开始解析第一个节点（html），并且是开始节点，便把它压入栈，如果遇到文本直接将该文本追加入栈...

3.每次把开始节点压入栈，结束标签时，找到对应的开始标签一起出栈操作，比如结束标签</title>，则将<title>XXX</tltle>，整个内容出栈。

4.正常情况下，所有的节点处理完，栈应该是空的。

五：css解析器

不同于html，css属于上下文无关方法。

将每个css解析为样式表对象。

六：渲染树构建

1.每一个渲染对象用一个和该节点的css盒模型相对应的矩形区域来表示。

2.渲染树和dom树：渲染对象和dom元素相对应，但这种关系不是一对一的，不可兼得dom元素不会被插入渲染树，例如head。另外display为none的元素也不会在渲染树中。

还有一些dom元素对应几个可见对象，他们一般是一些具有复杂结构的元素，无法用一个矩形来描述，例如select。

一些渲染对象和所对应的dom节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标示出真实的结构，并用一个占位结构标识

出它们原来的位置。

3.创建树的流程：处理html和body标签将构建渲染树的根，这个根渲染对象对应被css规范称为containing block的元素，它的大小就是viewport-浏览器窗口的显示区域，firefox称它

为viewportFrame，webkit称为renderView，这个就是文档所指向的渲染对象，树中其它的部分都将作为一个插入的dom节点被创建。

4.样式计算：从样式的底层节点开始，它具有最高优先级（通常是最特定的选择器），遍历规则树直到填满结构。

a.浏览器声明

b.用户声明

c.作者的一般声明

d.作者的important声明

e.用户的important声明

七：布局

1.布局：当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或者reflow（重构）。

布局是一个递归的过程，由根渲染对象开始，他对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每一个需要几何信息的渲染对象进行计算。

2.Dirty bit系统

为了不因为每一个小的变化全部重新布局，浏览器使用一个dirty bit系统，一个渲染对象发生了变化或者被添加了，就标记它及他的childen为dirty-需要layout。

3.全局和增量layout

当layout在整棵渲染树触发时，称为全局layout。

a.全局样式改变影响所有的渲染对象，比如字号的改变

b.窗口resize

layout也可以是增量的，这样只有标记为dirty的渲染对象会重新布局

4.增量layout的过程是异步的，全局的layout是同步触发的

5.当一个layout因为resize或是渲染位置改变（并不是大小改变），而触发时，渲染对象的大小将会从缓存中读取，而不会重新计算。

一般情况下，如果只有子树发生改变则layout不从根开始

6.当一个渲染对象在布局过程中需要折行时，则暂停并告诉它的parent需要折行，parent将创建额外的渲染对象并调用它们的layout。

八：绘制painting

绘制阶段：绘制渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上。

1.全局和增量：和布局一样，绘制也可以是全局的以及增量的。

2.绘制顺序，就是元素押入堆栈的顺序，这个顺序影响着绘制，堆栈从后向前进行绘制：

a.背景色

b.背景图

c.border

d.children

e.outline 

3.firefox显示列表

firefox读取渲染树并为绘制的矩形创建一个显示列表，该列表以正确的绘制顺序包含这个矩形相关渲染对象。在渲染树的基础上可以使重绘只需查找一次树，

而不需要多次查找--绘制所有的背景，所有的图片，所有的border等。不会添加被隐藏的元素。

4.webkit矩形存储

重绘前，webkit将旧的矩形保存为位图，然后只绘制新旧矩形的差集。

九：动态变化和渲染引擎的线程

1.动态变化：浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将导致该元素的重绘，元素位置的变化将导致元素的布局和重绘，添加

一个dom节点，也会导致这个元素的布局和重绘。

2.渲染引擎的线程：渲染引擎是单线程的，除了网络操作以外，几乎所有的事情都在单一的线程中处理，在firfox和safari中，这是浏览器的主线程，chrome

中这是tab的主线程。

3.事件循环：浏览器主线程是一个事件循环，它被设计的无限循环以保持执行过程的可用，等待事件（layout，painting）并执行它们。

参考来源：http://blog.csdn.net/lxcao/article/details/52859017