浏览器渲染原理(一)

浏览器的主要功能

• 用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是除了用来显示你所请求页面的主窗口之外的其他部分。

• 浏览器引擎：用来查询及操作渲染引擎的接口。另外还用来操作浏览器的数据存储。

• 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

• 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

• UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

• JS解释器：用来解释执行JS代码。

• 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据

浏览器渲染机制

我们现在要在浏览器中显示以上结构的HTML：

1.客户端浏览器开始从用户向服务器发出请求，服务器响应的将如上的HTML返回给请求的客户端浏览器中。

2.加载从标签开始，并发现标签内有个外部样式文件要加载

4.此时客户端浏览器继续加载html文件里里的标签，在css.css文件加载完后，同时开始渲染页面。

5.客户端浏览器在里的标签中发现一个标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。

6.标签里的图片加载完了，则要显示出来，同时图片会占有一定的面积，又会影响到后面的布局，浏览器不得不又回来重新渲染一次这部分。

7.总算把body里的标签加载及渲染完后，浏览器又发现了一段代码：

8.浏览器又立刻向服务器发出请求加载js.js文件，服务器响应。

9.浏览器又在js.js文件中发现了一段代码是让标签隐藏的代码，此时浏览器又要重新去渲染被隐藏的部分。
10.最后到浏览器发现了为止。