浏览器内核及类型
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。另外，还有一部分是指“js引擎”。一般来说，主要有这两部分组成浏览器内核。
-
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
-
JS引擎则：解析和执行javascript来实现网页的动态效果。
-
内核类型
- Trident：IE浏览器的内核，由于在IE中广泛使用，所以也简称IE内核咯。不喜欢IE，不介绍了。
- Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，Gecko的特点 是代码完全开源。该内核的浏览器仍然还是Firefox (火狐) 用户最多， 所以有时也会被称为** Firefox内核 **。此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X 中使用。
- Presto：目前Opera采用的内核，商业引擎。该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。
- Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，符合W3C标准。Safari、Chrome都是该内核。在手机上的应用也十分广泛，我感觉现在的智能机无论是Android还是iPhone都是该内核吧。所以在开发移动webapp的时候，只要遵循webkit内核标准来，就基本上可以外android和iPhone上完美运行了。至于国内的UC和QQ等手机浏览器也都是根据Webkit修改过来的内核。我感觉webkit要一统天下了。
渲染引擎
英文叫做：Rendering Engine。顾名思义，就是用来渲染网页内容的，将网页的内容和排版代码转换为可视的页面。
JS引擎
通常用来衡量浏览器跑分。JavaScript的渲染速度越快，动态页面的展示也越快。最快的当然后opera浏览器了。
-
常见的集中js引擎：
- V8：应用于Chrome、傲游3。
- Nitro：应用于Safari 4及后续的版本。
- Chakra：查克拉，IE9启用的新的JavaScript引擎。
- Linear A/Linear B/Futhark/Carakan
Linear A应用于Opera 4.0-6.1版本，Linear B应用于Opera 7.0～9.2版本，Futhark应用于Opera 9.5-10.2版本，Carakan应用于Opera 10.5及后续的版本。
-
测试浏览器对HTML5标准的支持，分数越高越好：http://www.html5test.com/
浏览器渲染原理
-
浏览器加载页面的过程
- 解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。
- 构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
- 布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
-
绘制渲染树（Painting the render tree） : 遍历渲染树，每个节点将使用UI后端层来绘制。
主要的流程就是：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中，每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。
举例：
1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2.浏览器开始载入html代码，开始解析标签。发现<head>标签内有一个<link>标签引用外部CSS文件；
3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件并下载；
4.浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5.浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7.继续下去，浏览器发现了一个包含一行Javascript代码的<script>标签，立刻运行它；
8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。由于突然消失了这么一个元素，浏览器不得不重新渲染这部分代码；
...............
9.解析到等到了</html>的到来，结束
10.此时，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；浏览器又得从新渲染了，并向服务器请求了新的CSS文件，重新渲染页面。 -
reflow：当浏览器发现页面某个部分发生了点变化影响了布局后，需要倒回去重新渲染，内行称这个回退的过程叫reflow。频繁的reflow会导致页面加载非常缓慢，要尽量减少reflow操作。比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
-
repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。
网友评论