前言

这个系列的文章将会理清整个浏览器运行过程及原理。目的是，把浏览器的内核的各个部分描述清楚，职责分明利于思路清晰，也便于查找问题所在，也便于找到优化的方案。

全栈工程师终其一生都要了解的东西，应该就是浏览器的运行原理了。

WebKit才不是个黑盒。它是个白盒。并且，它是个打开的白盒。

概述

浏览器运行原理，指的是用户请求网站，服务器返回所有资源（包括HTML、CSS、JavaScript、图像等等）给浏览器，由浏览器构建界面，并开始响应用户操作的一系列过程。

市面上有一些浏览器内核：

1. Trident，
2. Edge
3. Gecko
4. KHTML
5. WebKit
6. Blink

其中最经典的是由Apple开源的WebKit浏览器内核，所以接下来的内容将会基于WebKit，它与其它浏览器内核的工作原理大致一样。

WebKit组成部分

借用网上的一张图：

从上面的图中可以看出，WebKit是依赖第三方库（如：图形库、网络库、存储等等）来与操作系统交互的。

图中的JavaScriptCore是WebKit的默认JS引擎，但是在Google的系列产品中被替换为V8 引擎。

重要概念区别

1. 浏览器内核，是浏览器最重要的部分，连接开发者和用户。
2. 渲染引擎，是浏览器内核最重要的部分，负责展示页面给用户。
3. JS 引擎，也是浏览器内核最重要的部分，负责JS代码的编译和运行。
4. V8 引擎，是众多JS 引擎中的一种，JavaScript Core是另外的一种。

浏览器大致运行原理

1. 加载资源和渲染页面
2. 执行JS脚本并注册响应用户操作的回调

参考

1. 书籍：

《WebKit 技术内幕》

2. 博客：

Inside look at modern web browser (part 1)
浏览器工作原理-webkit内核研究
认识 V8 引擎
深入剖析 WebKit
开发者需要了解的WebKit
webkit架构和模块