1. 前言

做为一名前端，对浏览器应该如自己的家一样，熟悉它的用处，内部结构及具体的工作原理，在优化页面及提高页面渲染速度方面， 应该更快的找到方法。

1. 浏览器内部的构成

1) 用户界面层:打开chrome界面上给用户提供功能的工具(地址栏，后退/前进按钮， 书签目录等也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分)
2) 浏览器引擎: 用来查询及操作渲染引擎的接口
浏览器引擎下面管理的本地数据的存储工作: 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
3) 渲染引擎: 用来显示请求的内容, 例如，html（解析），css 解析渲染， 图片并将解析后的结果渲染出来,也可以借助一些浏览器插件，比如pdf的渲染，借助pdf的插件;
介绍一下主流浏览器的底层内核的渲染引擎:
Firefox使用Geoko——Mozilla自主研发的渲染引擎
Safari和Chrome都使用webkit
IE的大部分内核是Trident, 在国内的浏览器厂商中，大部分是双核浏览器，或者多核浏览器，（采用了其他内核的webkit, Geoko的一般称作高速浏览器，单核的就是兼容浏览模式）
比如: UC浏览器（Webkit内核+Trident内核）,360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink)
4） 网络层的管理: 用来完成网络请求，例如http请求，它具有平台无关的接口，可以在不同平台上工作
5） UI 后端： 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
6） JS解释器： 用来解释执行JS代码（js代码底层解析，用以运行js代码做支撑）
7 ) 数据存储

image.png

争对chrome的特点: 为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。

2. 导航过程发生了什么

争对chrome的工作原理讲解:
当我们在浏览器地址栏中输入文字，并点击回车获得页面内容的过程在浏览器看来可以分为以下几步：

  1. 地址栏的URL分析(UI thread)，地址及对应的query

image.png

  1. UI thread通知network thread获取网页内容，并控制tab(由于chrome是多进程加载)

image.png

  1. network thread 会执行 DNS 查询，随后为请求建立 TLS 连接,如果 network thread 接收到了重定向请求头如 301，network thread 会通知 UI thread 服务器要求重定向，之后，另外一个 URL 请求会被触发。
  2. 读取响应:当请求响应返回的时候，network thread 会依据 Content-Type 及 MIME Type sniffing 判断响应内容的格式, 根据头部需要显示的内容：

image.png

1） 如果响应内容的格式是 HTML ，下一步将会把这些数据传递给 renderer process，如果是 zip 文件或者其它文 件，会把相关数据传输给下载管理器。
2） 网站的安全检测，如果域名或者请求内容匹配到已知的恶意站点，network thread 会展示一个警告页。此外 CORB(是否跨域的检测) 检测也会触发确保敏感数据不会被传递给渲染进程。

image.png

  1. 渲染进程

当数据及所有检测已经完成，则通知renderer process进行网页的渲染
image.png

  1. 开始导航或者讲页面开始确认并加载

数据以及渲染进程都可用了， Browser Process 会给 renderer process 发送 IPC 消息来确认导航一旦 Browser Process 收到 renderer process 的渲染确认消息，导航过程结束，页面加载过程开始。 此时地址栏会更新，显示出新页面的内容，为了可以关闭tab或者窗口后便于恢复， 这些信息会存放在硬盘中。

image.png

  1. 其中就会涉及到js的解析, html解析, dom的渲染，css解析渲染

image.png

3. DOM渲染的过程

【201805-D】浏览器原理down - 图9

3. 参考文献

https://developers.google.com/web/updates/
https://zhuanlan.zhihu.com/p/47407398