浏览器

发表于 更新于 分类于

浏览器相关知识介绍

浏览器是指可以显示网页服务器或者文件系统的 HTML 文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以 是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为 HTML 格式。

国内网民计算机上常见的网页浏览器有，QQ 浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360 浏览器、 UC 浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。

移动端产品有（移动端的浏览器）：百度、搜狗、UC、腾讯

内核

  • IE 内核
    包括 360 安全浏览器、IE、 Greenbrowser、 Maxthon2、世界之窗、刚开始 的搜狗浏览器。 Chrome 内核，如 Chrome 浏览器。
  • 双核(IE 和 chrome/webkit 内核)
    双核的意思是一般网页用 chrome 内核(即 webkit 或高速模式)打开，网银等指定的网页用 IE 内核打开。 如 360 高速浏览器,搜狗高速浏览器，并不是 1 个网页同时用 2 个内核处理。
  • Firefox

浏览器的主要构成（High Level Structure）

浏览器的主要组件包括

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

需要注意的是，不同于大部分浏览器，Chrome 为每个 Tab 分配了各自的渲染引擎实例，每个 Tab 就是一个独立的进程。

浏览器主要组件

浏览器整个流程如上图所示

  1. 当用户输入一个 URL 时，浏览器就会向服务器发出一个请求，请求 URL 对应的资源
  2. 接受到服务器的响应内容后，浏览器的 HTML 解析器，会将 HTML 文件解析成一棵 DOM 树，DOM 树的构建是一个深度遍历的过程，当前节点的所有子节点都构建完成以后，才会去构建当前节点的下一个兄弟节点。
  3. 将 CSS 解析成 CSSOM 树（CSS Rule Tree）
  4. 根据 DOM 树和 CSSOM 树，来构建 Render Tree（渲染树），注意渲染树，并不等于 DOM 树，因为一些像 head 或 display:none 的东西，就没有必要放在渲染树中了。
  5. 有了 Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的 CSS 定义，以及它们的从属关系，下一步操作就是 Layout，顾名思义，就是计算出每个节点在屏幕中的位置。
  6. Layout 后，浏览器已经知道哪些节点要显示，每个节点的 CSS 属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步 painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

渲染引擎（The rendering engine）

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。

默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏 览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式，将由专门 一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了 CSS 之后的 html 及图片