浏览器渲染原理

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

一：浏览器的主要功能

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