浅析渲染引擎与前端优化.docxVIP

浅析渲染引擎与前端优化本文以 Chrome 浏览器的内核 WebKit（更确切是 WebKit 分支 Blink，以下统称为 WebKit ）为例，对渲染引擎如何展示页面做个简单、全面的了解。作者：hanyuxinting来源：hanyuxinting|2016-12-08 10:57?收藏??分享本文主要是两方面内容：浅析浏览器内核的工作原理（以?WebKit 2?为例）。浅析由浏览器内核想到的前端优化，或者说前端优化规则是从哪儿来的。大家知道，大部分的 WEB 页面依托浏览器呈现，而浏览器能够将页面展示出来，基本依赖于浏览器的内核，即渲染引擎。今天以 Chrome 浏览器的内核 WebKit（更确切是 WebKit 分支 Blink，以下统称为 WebKit ）为例，对渲染引擎如何展示页面做个简单、全面的了解。浏览器的渲染引擎及其依赖模块渲染引擎主要是将 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 连接。对此前端优化建议：在页面中指定预取域名：link rel=”dns-prefetch” href=””大数据分析，推测用户可能点击的链接，提前预取。减少页面中的域名数量，可以直接减少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 为前缀，体现了浏览器的缓存机制。即请求资源时，浏览器会先看缓存中有没有这个资源，然后再决定是否向服务器发出请求。这引出两个问题，首先，缓存资源的生命周期。浏览器