浏览器在不断的演变中，并没有被要求呈现出一种特定的形态，但基本包括了如用户地址栏输入框、网络请求、浏览器文档解析、渲染引擎渲染网页、 JavaScript 引擎执行 js 脚本、客户端存储等功能。从原理构成上分为七个模块，分别是User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI后端）、Date Persistence（数据持久化存储）。结构如下所示：
和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个渲染引擎实例。每个标签页都是一个独立的进程。
其中，最重要的是渲染引擎（内核）和JavaScript解释器（JavaScript引擎）。浏览器内核主要负责 HTML、CSS 的解析，页面布局、渲染与复合层合成，主流的内核有：Blink、Webkit、Gecko、EdgeHTML、Trident。JavaScript引擎负责 JavaScript 代码的解释与执行，主流的 JavaScript 引擎有：V8、SpiderMonkey、JavaScriptCore、Chakra。
当加载一个网页时，粗略的说会经过以下这些步骤：
DOM 树的构建（Parse HTML）
构建 CSSOM 树（Recaculate Style）
合并 DOM 树与 CSSOM 树为 Render 树
布局（Layout）
绘制（Paint）
复合图层化（Composite）
Recaculate Style 是因为浏览器本身有User Agent StyleSheet，最终的样式是我们的样式代码与用户代理默认样式覆盖/重新计算得到的。
当遇到 JavaScript 脚本或者外部 JavaScript 代码时，浏览器便停止 DOM 的构建（阻塞 1）。停下 DOM 构建的同时，继续执行 JavaScript 代码或者下载外部脚本执行，要视情况而定。
当遇到 <script> 标签需要执行脚本代码时，浏览器会检查这个 <script> 标签以上的 CSS 文件是否已经加载并用于构建了 CSSOM，如果 <script> 上部还有 CSS 样式没加载，则浏览器会等待 <script> 上方样式的加载完成才会执行该 <script> 内的脚本（阻塞 2）。标签需要执行脚本代码时，浏览器会检查是否这个标签以上的 CSS 文件是否已经加载并用于构建了 CSSOM，如果上部还有 CSS 样式没加载，则浏览器会等待上方样式的加载完成才会执行该内的脚本（阻塞 2）。
标签需要执行脚本代码时，浏览器会检查是否这个标签以上的 CSS 文件是否已经加载并用于构建了 CSSOM，如果上部还有 CSS 样式没加载，则浏览器会等待上方样式的加载完成才会执行该内的脚本（阻塞 3）。DOM 树与 CSSOM 树的成功构建是后面步骤的根基（同步阻塞）。同时外部脚本、外部样式表的下载也是耗费时间较多的点。
网友评论