认识达内从这里开始

我们在浏览网页的时候一般都是通过浏览器来实现的，但是大家是否了解过浏览器运行网页背后的机制是如何运转的呢??下面我们就通过案例分析来简单了解一下浏览器的渲染引擎是如何使用的。

浏览器的渲染引擎及其依赖模块

渲染引擎主要是将 WEB 资源如 HTML、CSS、图片、JavaScript等经过一系列加工，终呈现出展示的图像。渲染引擎主要包含了对这些资源解析的处理器，如 HTML 解释器、CSS 解释器、布局计算+绘图工具、JavaScript 引擎等。为了更好地呈现渲染效果，渲染引擎还会依赖网络栈、缓存机制、绘图工具、硬件加速机制等。

一、域名解析 DNS

当我们在浏览器中输入 URL 后，浏览器先会进行域名解析。一般情况下，一次 DNS 域名解析大概需要 60-120 ms，一次 TCP 的三次握手需要 1.5 个 RTT(round-trip time)。WebKit 的方案是 采用 DNS 预取技术和 TCP 预连接技术。

DNS 预取技术利用现有 DNS 机制，提前解析网页中可能的网络连接。即对用户浏览网页中存在的链接，用较少的 CPU 和网络带宽来解析这些链接的域名或 IP 地址;等用户单击链接时，就会节省时间~ 特别是域名解析慢的时候~

同样，在地址栏输入链接时，候选项也会被默默地执行 DNS 预取~。在 DNS 预取后，会预先建立 TCP 连接。

对此前端优化建议：

在页面中指定预取域名：

大数据分析，推测用户可能点击的链接，提前预取。

减少页面中的域名数量，可以直接减少DNS的请求。

二、SPDY 和 HTTP2

因为请求带来的 TCP 三次握手的 1.5 RTT 延迟，Google 引入 SPDY，尝试解决HTTP的延迟和安全性(HTTP 明文方式)问题。不过，SPDY 促使了 HTTP2.0 的诞生后，自己也不再更新，逐步退出。

SPDY 基于 SSL 之上，轻松兼容 HTTP 新老版本。其优势如下：

多路复用。一个 TCP 连接传输多个资源。减少 TCP 连接成本。

不同资源，不同优先级。比如优先加载屏。

Header 头压缩。减少传送的字节数。SPDY 对 Header 压缩率可高达 80%。

SPDY 开拓了 HTTP 新局面，秒杀我们太多的前端优化工作，从本质上提升了页面加载速度。但我们前端优化的工作还是不能偏废。向着继续减少请求，减少 TCP 连接建立的路上，让我们继续。

合并资源，如 combo 合并 JavaScript 文件、CSS 文件，利用 sprite 合并图片，图片地图等;

当页面资源较小时，可直接放页面中，如小图可使用 Base64 编码格式引入。甚至一些基础样式，或屏依赖样式，都可以放在页面中;

资源压缩技术。如 Gzip 等。主要是对响应数据的压缩~

精简 JavaScript 和 CSS 代码。减少无用的空格。压缩混淆~

避免链接重定向、避免错误的链接请求。建立多次链接、多次 DNS 解析，阻碍 DNS 预取技术。及时更新掉你页面中没有价值的链接吧。

三、资源加载

域名解析完，TCP 连接也建立起来后，资源加载器就开始工作了。

资源及资源加载器

资源包括：HTML、JavaScript、CSS 样式表、图片、SVG、字体文件、视频音频等。资源加载器有三种：

特定加载器，只加载某一种。如ImageLoader类。

缓存机制的资源加载器。特定加载器通过它查找是否有缓存资源，属于 HTML 的文档对象。

通用的资源加载器。在WebKit需要从网络或文件系统获取资源时使用。只负责获取资源的数据，被所有特定资源加载器共享。

资源加载的过程

在 WebKit 中，资源都以 CachedResource 为基类，以 Cached 为前缀，体现了浏览器的缓存机制。即请求资源时，浏览器会先看缓存中有没有这个资源，然后再决定是否向服务器发出请求。

四、从 URL 到 DOM 树的构建

当我们拿到页面所需的资源后，渲染引擎便启动 HTML 解释器，对获取的资源进行解析处理。网页代码(字节流)经过词法分析器解码，再由语法分析器解释成词语 Token，并构建成节点 Node，直到终构建成一棵 DOM 树。

期间，当节点为 JavaScript 节点时，将启动 JavaScript 引擎，这时将阻塞 DOM 树的构建。因为 JavaScript 执行过程中， JavaScript 很可能会对 DOM 树进行读写操作。直到 JavaScript 执行完毕， DOM 树才会恢复构建。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。