浅析渲染引擎与前端优化

本文主要是两方面内容: 浅析浏览器内核的工作原理(以 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 […]

© 2017 JDC. All Rights Reserved.