浏览器运行原理

浏览器

网页浏览器（英语：web browser），常被简称为浏览器，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。
网页浏览器虽然主要用于使用万维网，但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。

一、浏览器简介

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI（统一资源标符）指定。多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。 如今，大多数的浏览器都是或多或少地遵从规范。
目前使用的主流浏览器有五个：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。
浏览器按照引擎分类：
(1) Trident引擎：Internet Explorer
(2) Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari
(3) Gecko引擎：Firefox
(4) Presto引擎：早期Opera采用，后用webkit引擎。

二、组成

-浏览器的组成如下图所示：

-浏览器的主要组件包括：

1. 用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎：用来查询及操作渲染引擎的接口。
3. 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器：用来解释执行JS代码。
7. 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

三、内核

浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源加以解析排版并呈现给用户

默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式

• 【渲染引擎】
  firefox使用gecko引擎

  IE使用Trident引擎，2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge，使用edge引擎

  opera最早使用Presto引擎，后来弃用

  chrome\safari\opera使用webkit引擎，13年chrome和opera开始使用Blink引擎

  UC使用U3引擎

  QQ浏览器和微信内核使用X5引擎，16年开始使用Blink引擎

• 【js引擎】
  老版本IE使用Jscript引擎，IE9之后使用Chakra引擎，edge浏览器仍然使用Chakra引擎

  firefox使用monkey系列引擎

  safari使用的SquirrelFish系列引擎

  Opera使用Carakan引擎

  chrome使用V8引擎。nodeJs其实就是封装了V8引擎

四、资源加载

使用浏览器上网时，首先会在地址栏输入一个网址，浏览器会依据网址向服务器发送资源请求，服务器解析请求，并将相关数据资源传送回给浏览器，这些数据资源包括Page的描述文档、图片、JavaScript脚本、CSS等。此后，浏览器引擎会对数据进行解码、解析、排版、绘制等操作，最终呈现出完整的页面。Loader是浏览器的排头兵，负责资源加载的工作

Loader在浏览器中承上启下，一方面它作为网络模块的客户，通过网络模块来加载资源；另一方面它为Parser模块加载页面的内容，控制着浏览器后续的解析以及绘制过程

五、缓存

缓存在浏览器中也得到了广泛的应用，对提高用户体验起到了重要作用。在浏览器中，主要存在三种类型的缓存：Page Cache、Memory Cache、Disk Cache。这三类Cache的容量都是可以配置的，比如限制Memory Cache最大不超过30MB，Page Cache缓存的页面数量不超过5个等

• Page Cache：是将浏览的页面状态临时保存在缓存中，以加速页面返回等操作
• Memory Cache：浏览器内部的缓存机制，对于相同url的资源直接从缓存中获取，不需重新下载
• Disk Cache：资源加载缓存和服务器进行交互，服务器端可以通过HTTP头信息设置网页要不要缓存。

六、网页解析

可以将浏览器整体看作一个网页处理模块，这个模块的输入是网络上接收到的字节流形式的网页内容。输出是三棵树型逻辑结构：DOM树、Render树及RenderLayer树

浏览器的解析过程就是将字节流形式的网页内容构建成DOM树、Render树及RenderLayer树的过程

浏览器的解析对象是网页内容，网页内容包括以下三个部分：

1. HTML文档：超文本标记语言，制作Web页面的标准语言
2. CSS样式表（Cascading Style Sheet）：级联样式表，用来控制网页样式，并允许样式信息与网页内容相分离的一种标记性语言
3. JavaScript脚本：JavaScript是一种无类型的解释型脚本语言。常用于为网页添加动态功能