现代浏览器的工作原理(一)

前言

  学习现代浏览器的工作原理有助于前端开发工程师构建出性能更好的页面,性能优异的页面具有更好的用户体验,从而可以带来更大的用户流量。一直以来,笔者都想专心学习浏览器的工作原理,但苦于工作业务繁忙,学习进度一直止步不前。最近,在平时工作之余,笔者细心研读了以色列开发人员Tali Garsiel针对现代浏览器工作原理的研究成果以及html5标准文档等相关内容,并将自己的心得体会以学习笔记的形式记录下来。

现代浏览器的组成结构

  现代浏览器的组成可由图1表示:

现代浏览器组成

图 1 现代浏览器的组成结构(图片摘自Tali Garsiel的研究成果)

  图1中包含的现代浏览器各组件的功能如下:
  User Interface(用户界面):浏览器的用户界面通常包含地址栏、前进/后退按钮以及书签栏等。除了用来展示用户请求的页面内容的窗口外,浏览器其他部分均属于用户界面。
  Browser engine(浏览器引擎):在用户界面和呈现引擎之间传送指令。
  Rendering engine(呈现引擎):呈现引擎的作用是呈现用户请求的web资源。如用户请求的资源是html文档,则呈现引擎负责解析html以及css,然后将渲染出的页面展示在浏览器窗口。
  Networking(网络模块):实现网络调用,如http请求。该模块提供了一个跨平台的通用接口。
  UI backend(用户界面后端):用户界面后端被用来绘制基本组件如组合框和窗口,其向外部暴露了一个跨平台的通用接口,它的底层使用了操作系统的用户界面方法。
  JavaScript interpreter(JavaScript解释器):用来解析和执行JavaScript。
  Data storage(数据存储):数据存储属于浏览器的持久层。浏览器可能需要在本地保存数据,如cookies,同时浏览器支持各种存储机制,如localStorage、IndexDB、WebSQL以及FileSystem。

浏览器的呈现引擎

  呈现引擎默认可以解析html文档、xml文档以及图片并将解析后的内容展示给用户。通过各种插件(浏览器扩展程序)浏览器还可以展示其他各类型的web资源,如pdf插件可以让浏览器展示pdf文档。不同浏览器使用的呈现引擎也不一样,目前主流的呈现引擎有WebkitBlink(Webkit的一个分支)、GeckoTridentEdgeHTML(Trident的一个分支)。主流浏览器使用的呈现引擎如表1所示。

表 1 主流浏览器所使用的呈现引擎
浏览器 呈现引擎
Chrome Blink(Chrome 28+)、Webkit(Chrome 27-)
Safari Webkit
Firefox Gecko
Edge EdgeHTML
IE Trident

呈现引擎的主流程

  当网络模块下载完用户请求的html文档之后,呈现引擎会按照图2所示的流程来解析和呈现html文档中的内容。

呈现引擎的主要流程

图 2 浏览器呈现引擎的主要流程

  图2所示的流程是一个渐进式的流程。为了更好的用户体验,呈现引擎不会等到html文档解析完毕之后再去构建和布局呈现树,而是采用类似流水线式的方式,边解析边呈现。

Webkit和Gecko的主要流程对比

  Webkit和Gecko的流程图分别如图3和图4所示:

webkit的主要流程

图 3 Webkit的主要流程(图片摘自Tali Garsiel的研究成果)

gecko的主要流程

图 4 Gecko的主要流程(图片摘自Tali Garsiel的研究成果)

  从图3和图4可以看出,Webkit和Gecko的主要流程除了部分术语不同之外,逻辑基本一致。

参考文献

  1. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  2. https://www.w3.org/TR/html5/syntax.html
  3. https://www.zybuluo.com/yangfch3/note/671516