浏览器之间的差异性及浏览器渲染简介

参考文章：不同内核浏览器的差异以及浏览器渲染简介 ,并根据目前浏览器发展情况进行了修改。

一、常见浏览器及其内核

Web Browser	Chrome	IE	FireFox	Safari	Opera
Rendering Engine	Webkit-Blink	Trident	Gecko	Webkit	Presto/Blink

微软的新一代浏览器Microsoft Edge，宣布打算采用Chromium开源项目开发桌面版的Microsoft Edge浏览器，详情见Microsoft Edge: Making the web better through more open source collaboration.

对此 个人表示喜大普奔，毕竟IE太难用了，开发的时候做兼容也是非常恶心，但是起码在5年内，IE兼容还是要写的啊(╥╯^╰╥)

---

二、什么是内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

另一种关于内核的说明：维基百科(↓)

一、 排版引擎
排版引擎（layout engine），也称为浏览器引擎（web browser engine）、页面渲染引擎（rendering engine）或样版引擎，它是一种软件组件，负责获取标记式内容（如HTML、XML及图像文件等等）、整理信息（如CSS及XSL等），并将排版后的内容输出至显示器或打印机。

二、JavaScript引擎
顾名思义，JavaScript引擎就是用来渲染JavaScript的。
JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

JS引擎	应用程序(实现)
V8	Google Chrome
SpiderMonkey	Mozilla Firefox
JavaScriptCore	Safari
Chakra (JScript引擎)	Internet Explorer
Chakra (JavaScript引擎)	Microsoft Edge
KJS	Konqueror

---

三、浏览器渲染原理

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。

先来大致了解一下浏览器都是怎么干活的：

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

2. 浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；

3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4. 浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7. 浏览器发现了一个包含一行Javascript代码的