认识我们的浏览器

浏览器毫无疑问是互联网时代使用最广泛的软件，也是我们探索网络世界的窗口。本文将简要介绍浏览器的组成和工作机制。 对于前端开发同学而言，唯有深入理解浏览器的工作机制才能编写更加高效的代码。

浏览器的主要组件

用户界面: 包括地址栏，书签等你可以看见和操作的部分，俗称UI。

浏览器引擎: 用来查询及操作渲染引擎的接口。

渲染引擎: 用来显示请求的内容，例如你访问一个页面，它负责解析服务器返回的html和css文本，并将解析后的结果显示为我们看到的网页。比如目前广泛使用的apple safari 和 google chrome的webkit渲染引擎(chrome后续的blink渲染引擎也是基于webkit的)。

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

UI 后端: 用来绘制界面，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

JS解释器: 用来解释执行JS代码，比如google chrome v8引擎，玩nodejs的同学不会陌生。

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

各组成部分和依赖关系如下图所示：

浏览器的功能

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是html，但也包括PDF、image及其他格式。资源的位置用URI指定(Uniform Resource Identifier 统一资源标识符) 。

html和css规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。

对于前端开发者而言，浏览器还是开发调试web页面和js脚本的利器。

网页呈现流程

渲染引擎首先通过网络获得所请求文档的内容，这些内容通常是文本。

渲染引擎开始解析html，并将html标记解析为DOM树。接着，它解析外部css文件及文档中style标签中的样式信息，这些样式信息以及html中的可见性指令将被用来构建另一棵树Render树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。

再下一步就是绘制，即遍历Render树，并使用UI后端层绘制每个节点。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局Render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

渲染引擎是单线程的，除了网络操作以外，几乎所有的事情都在单一的线程中处理，在Firefox和Safari中，这是浏览器的主线程，Chrome中这是tab的主线程。网络操作由几个并行线程执行，并行连接的个数是受限的（通常是2－6个）。

文档通过网络请求获取后的渲染流程如下：

通常前端性能优化主要就是优化渲染，比如我们常常听说移动端首屏渲染，网站首页打开时间等，有兴趣的同学可以深挖。

结语

当然随着智能手机和移动互联网的高速发展，网页的呈现不单只发生在普通的浏览器中，比如通过微信订阅号看到这篇文章的，这里微信通过嵌入浏览器渲染引擎 (基于webkit的qq浏览器引擎) 渲染和显示订阅号的web页面。

本文作者：汪国超（点融黑帮），点融网前端开发,对新技术尤其是前端新技术特别有兴趣，吃货一枚， 喜欢旅游看美剧。