认识浏览器

   好文章推荐地址：http://www.nowamagic.net/academy/detail/48110105

1.浏览器分为两大部分：shell+内核，内核=呈现引擎+JS引擎（这是两个不同的东西，即使渲染引擎相同，js引擎也不一定相同，safari和chrome都是相同的webkit渲染引擎，但是使用了不同的JS引擎）。

2.呈现引擎：主要负责取得网页内容、解析HTML和CSS内容，然后进行渲染呈现。浏览器的呈现引擎不同，对于网页语法的解释就会不同，渲染效果也不痛。

      JS引擎：解析js语言，执行js语句实现网页的动态效果。

3.浏览器结构：

（1）用户界面。包括浏览器的窗口，除了主窗口显示请求的页面之外，其他部分都属于用户界面。

（2）浏览器引擎。在用户界面和呈现引擎之间传送命令。

（3）渲染引擎。负责显示请求的内容。解析HTML和css内容，并且将解析的内容显示在屏幕上。（chrome与其他浏览器不同，每个标签页对应一个呈现引擎实例，每个标签页都是一个独立的进程）

（4）JS引擎。解析和执行js代码。

（5）网络。用于网络调用，例如发起http请求，其接口与平台无关，并未所有平台提供底层实现。

（6）用户界面后端。用于绘制基本的窗口小部件，公布了与平台无关的接口，在底层通过调用操作系统的用户界面方法进行绘制。

（7）数据存储。持久层，浏览器需要往硬盘上存储数据，包括cookie、localstorage、sqllite等。

4.浏览器呈现的过程：

（1）解析Html，构建DOM树，同时解析外部css和内嵌css样式数据，生成样式规则树。

（2）将样式规则树应用于DOOM树构建渲染树。

（3）对渲染树进行布局，为每一个节点分配显示的坐标

（4）绘制。有呈现引擎遍历呈现树，由用户界面后断层将每个节点绘制出来。

为了尽快将内容显示出来，呈现引擎不会等所有资源都加载完毕才开始显示，以上是一个渐进的过程，呈现引擎会一边接收内容，一边进行显示，所以我们一般需要把css样式放在头部，使之尽早进行加载，如果将样式放在后面，会造成反复进行渲染，降低性能。

5.