浏览器的主要构成
1.用户界面
2.浏览器引擎 - 用来查询及操作渲染引擎的接口
3.渲染引擎 - 用来显示请求的内容
4.网络 - 完成网络调用
5.UI后端 - 绘制基本的组件，具有通用接口，底层调用操作系统的用户接口
6.JS解释器
7.数据存储 - 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
浏览器主要组件.png
这里主要讨论渲染引擎
Geoko 引擎是由Mozilla自主研发的渲染引擎，Firefox浏览器是基于此引擎构建的；
webkit 是一款开源渲染引擎，Safari和Chrome都使用webkit。相关内容请参考http://webkit.org
渲染的主流程
渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程：
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎基本流程.png
这里的几个概念：
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
浏览器在服务器拿到数据后，会解析HTML，CSS以及js文件，形成DOM tree，CSS rule tree，并通过js操作它们。
解析完成后，浏览器引擎通过DOM tree，CSS rule tree 构建rendering tree。
css rule tree主要完成匹配，并把css rule赋给rendering tree的每个元素。
需要注意的是，rendering tree和DOM tree并不是完全一一对应的。不可见的DOM元素，是不会插入渲染数的。例如head元素，又如display:none的元素。(visibility:hidden 会出现在渲染树当中)
渲染树以及对应的DOM树.png
渲染树构建完成后，浏览器会
1.对这些元素进行定位和布局，这一步也叫做reflow或者layout。
2.绘制这些元素的样式，颜色，背景，大小及边框等，这一步也叫做repaint。
3.将各层的信息发送给GPU，GPU会将各层合成；显示在屏幕上。
reflow和layout做的事情基本相同，只是不同的渲染引擎的流程术语不同，webkit中元素的定位称为layout，Gecko中称为reflow。
reflow和repaint都是消耗浏览器性能的操作，简直说明一下
reflow(回流): 当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。
repaint(重绘): 改变元素的背景色，文字色，边框色等等不影响布局的属性时，屏幕需要重画但是元素的尺寸和位置没有变。
在reflow和repaint结束后，浏览器会将复合层传入GPU进行合成展示在屏幕上。
有些时候，动画不够流畅，主要就是因为进行了太多的reflow和repaint。例如
<style>
#a, #b {
position: absolute;
}
#a {
left: 10px;
top: 10px;
z-index: 2;
animation: move 1s linear;
}
#b {
left: 50px;
top: 50px;
z-index: 1;
}
@keyframes move {
from { left: 30px; }
to { left: 100px; }
}
</style>
<div id="#a">A</div>
<div id="#b">B</div>
在这个例子中，对于动画的每一帧；浏览器会计算元素的几何形状，渲染新状态的图像；并把它们发送给GPU。（你没看错，position也会引起浏览器重排的）尽管浏览器做了优化，在repaint时，只会repaint部分区域；但是我们的动画仍然不够流畅。
因为重排和重绘发生在动画的每一帧，一个有效避免reflow和repaint的方式是我们仅仅画两个图像；一个是a元素，一个是b元素及整个页面；我们将这两张图片发送给GPU，然后动画发生的时候；只做两张图片相对对方的平移。也就是说，仅仅合成缓存的图片将会很快；这也是GPU的优势——它能非常快地以亚像素精度地合成图片，并给动画带来平滑的曲线。
为了仅发生composite，我们做动画的css property必须满足以下三个条件：
1.不影响文档流
2.不依赖文档流
3.不会造成重绘
满足以上以上条件的css property只有transform和opacity。你可能以为position也满足以上条件，但事实不是这样，举个例子left属性可以使用百分比的值，依赖于它的offset parent。还有em、vh等其他单位也依赖于他们的环境。
我们使用translate来代替left
<style>
#a, #b {
position: absolute;
}
#a {
left: 10px;
top: 10px;
z-index: 2;
animation: move 1s linear;
}
#b {
left: 50px;
top: 50px;
z-index: 1;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(70px); }
}
</style>
<div id="#a">A</div>
<div id="#b">B</div>
浏览器在动画执行之前就知道动画如何开始和结束，因为浏览器没有看到需要reflow和repaint的操作；浏览器就会画两张图像作为复合层，并将它们传入GPU。
参考：
http://blog.jobbole.com/12749/
https://segmentfault.com/a/1190000008015671
网友评论