浏览器工作原理及页面加载的优化建议

在B/S架构中，B端的主要载体是浏览器，浏览器的主要功能是向服务器请求资源，并把请求得到的内容展现出来，在本文中，我们主要讨论请求资源为html时，浏览器的工作原理。

要想了解浏览器的工作流程，必须先知道浏览器的组成，组成如下图：

由图可知，组成包含这几部分：

1.用户界面（user interface）:包括地址栏，前进/后退按钮，书签目录等，即我们平常看到的浏览器界面（除了请求得到的内容页面）；

2.浏览器引擎（browser engine）:用来查询和操作渲染引擎的借口；

3.渲染引擎（rendering engine）:用来显示请求的内容，例如，如果请求的是html，它负责解析html和css，并将解析结果显示出来。也被称为“浏览器内核”，不同浏览器主要的区别就在于渲染引擎的不同；

4.网络（networking）:用来完成网络调用，例如http请求，平台无关；

5.UI后端（UI backend）:用来绘制组合选择框等基本组件，具有不特定与某个平台的通用接口，底层使用操作系统的用户接口；

6.js解释器（javascript interpreter）:用来解释执行js代码；

7.数据存储（data persistence）:属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，html5定义了web database技术，这是一种轻量级完整的客户端存储技术；

工作流程：

渲染引擎首先通过网络获得请求文档内容（html）（通常以8k分块的方式完成）------》解析html以构建dom树-----》构建渲染树（rendering 树）-----》布局渲染树-----》绘制渲染树。

具体细节如下：

渲染引擎开始解析html，并将标签转化为dom树中的dom节点。然后，它解析外部的css文件及style标签中的样式信息。这些样式信息以及html中标签的可见性指令将用来构建渲染树。渲染树是由一些包含颜色大小等样式信息的矩形组成，它们将被按照正确的顺序显示到屏幕上。渲染树建好后，执行布局过程浏览器工作原理是怎样的，它将确定每个节点在屏幕上的确切坐标。然后是绘制，即遍历渲染树，并使用ui后端层绘制每个节点。

这个过程是逐步完成的，渲染引擎会尽可能早的把内容显示出来，即解析一部分内容，就显示出来，其他内容可能还在网络下载。

至于浏览器如何解析html，如何构建dom树，渲染树，我们不做深究，下面我们举个例子来说明上述过程：

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

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

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

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

5.浏览器在代码中发现一个

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

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布浏览器工作原理是怎样的，因此浏览器需要回过头来重新渲染（reflow）这部分代码。

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