浏览器是如何工作的

2023-07-11

1. 背景

对于前端开发者来说，浏览器的底层原理通常不需要有太深入的了解。因为现代浏览器已经将所有的底层细节实现了很好的封装，前端开发通常只需要关注HTML+CSS+JavaScript这三样东西。

在软件工程领域，封装（encapsulation）是降低系统复杂度的一种常用手段。这对于开发者而言是件好事：只需要关心接口的使用方式，无需了解底层细节。这样开发的门槛就降低了。

但是伴随开发水平提升，逐渐就会遇到瓶颈。因为浏览器构建出的沙盒环境（sandbox）固然美好，但真实世界毕竟不是如此简单，如果能深入进去，了解浏览器的运行逻辑，就会更加清楚地知道为什么会出现这样的结果，为什么这样写会导致性能问题等。当懂得了这一切后，写起代码来，自然胸有成竹，韬略尽在眼中。

浏览器是个复杂的领域，像Chromium，源码达到千万行级别，和一个操作系统差不多。不过好在绝大多数开发者并不需要亲自开发浏览器，因此不需要深入了解每一行的代码运行，只要从宏观上把握大致原理即可。

这也是程序员学习的技巧之一：技术上了解到合适的深度即可。否则卷帙浩繁，一辈子都学不完。

How browsers work🔗是Mozilla官网上一篇很经典的文章，文字不多，核心的几块，主要是渲染都涉及到了。美中不足的是缺少网络，以及浏览器整体架构的介绍，这个在后面的文章中会补充。

2. 开始

整个过程，将从在地址栏输入google.com开始，然后以浏览器上渲染出Google网页结束。看似简单的过程，背后却发生了非常多工作。

3. 主要功能

浏览器的主要功能，就是将用户请求的资源，从服务器获取后，展示到屏幕上。

这里的资源可以是HTML，也可以是PDF，每个资源都有一个独一无二的标识符，URI（Uniform Resource Identifier）。

浏览器所能理解得资源，例如HTML和CSS，遵循一个规范，这个规范主要由W3C（World Wide Web Consortium）制定。

规范的好处在于，相同一份资源，在不同的浏览器上会以相同的方式处理，这样就减少了很多兼容性的问题。

4. 组织结构

一个浏览器，大致可分为7个部分。

用户界面。包括地址栏，前进/后退按钮，书签等。
浏览器引擎。响应用户的操作。
渲染引擎。负责将网络请求的内容展示，涉及HTML和CSS的解析，渲染等。
网络。负责网络请求，例如HTTP。
UI。窗口绘制。
JavaScript解释器。解析和执行JavaScript代码。
数据存储。例如，IndexDB、WebSQL等。

5. 渲染引擎如何工作

不同浏览器使用不同的渲染引擎，例如IE使用Trident，Firefox使用Gecko，Safari使用WebKit，Chrome，Edge和Opera都基于Chromium，使用WebKit的一个Fork版本，Blink。

渲染引擎从网络获取到数据后，开始了一场漫长的奇妙之旅。文本格式的数据，经过一步步的处理，将会成为显示在屏幕上的酷炫网页。

基本的流程如下：

解析HTML，构建DOM树
构建Render树
Render树布局
绘制Render树

5.1 Parser

HTML的parser，并不符合上下文无关语法（Context Free Grammar），因为用户的输入很有可能不符合规范，因此渲染引擎做了很多容错。因此无论HTML写成什么样，渲染引擎都不会crash。

浏览器总是会尽可能的将内容呈现。

解析的过程，有完整的规范：Parsing HTML documents🔗

与HTML不同，CSS符合上下文无关语法，也有定义的规范：Grammar of CSS 2.1🔗 。语法用BNF描述。这就有一系列工具可以使用，例如WebKit使用Flex和Bison从语法文件中自动创建解析器。

另外，在parse过程中也存在一些值得优化的地方。

比如，在解析过程中，遇到<script>标签，解析器会暂停，直到script被执行。如果引用的是外部脚本，那么必须先从网络中获，这个过程，默认是同步的。这会大大降低解析器的效率。

这也是为什么，<script>通常被建议使用在<body>尾部，否则会影响解析效率。

不过现在有了更好的方案，在<script>里增加defer属性，这样script的执行就是异步的，不会阻塞解析，同时会在DOM准备好后执行，并且保证在DOMContentLoaded前。

不仅如此，现代浏览器还会做更多的优化，例如推测性解析（Speculative parsing），利用多线程，加速解析的过程，但只针对外部资源。

5.2 Render

Render的过程，也是通过构建一棵树实现。

WebKit中的主要数据结构RenderObject这么定义：

class RenderObject{
  virtual void layout();
  virtual void paint(PaintInfo);
  virtual void rect repaintRect();
  Node* node;  //the DOM node
  RenderStyle* style;  // the computed style
  RenderLayer* containgLayer; //the containing z-index layer
}