浅析渲染引擎与前端优化精要.docx

浅析渲染引擎与前端优化本文以 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 引擎等。为了更好地呈现渲染效果，渲染引擎还会依赖网络栈、缓存机制、绘图工具、硬件加速机制等。浏览器的渲染过程浏览器的渲染过程，主要包括两大部分：网页资源加载过程和渲染过程。上图将整个网页渲染的过程做了大致的