什么是浏览器

  1. Web 浏览器简称为浏览器，是一种用于访问互联网上信息的应用软件；浏览器的主要功能是从服务器检索 Web 资源并将其显示在 Web 浏览器窗口中；

  2. Web 资源通常是 HTML 文档，但也可能是 PDF、图像、音频、视频或其他类型的内容；资源的位置是通过使用 URI （统一资源标识符） 指定的，浏览器包含结构良好的组件，这些组件执行一系列任务让浏览器窗口能显示 Web 资源，下图是关于浏览器的架构图：

  3. 一个 Web 浏览器中，主要组件有：

    1. 用户界面 （user interface）
    2. 浏览器引擎 （browser engine）
    3. 渲染引擎 （rendering engine）
    4. 网络 （networking）
    5. JS 解释器 （JavaScript interpreter）
    6. 用户界面后端 （UI backend）
    7. 数据存储 （data storage）

浏览器的组成

用户界面（user interface）

  1. 用户界面用于呈现浏览器窗口部件，比如地址栏、前进后退按钮、书签、顶部菜单等；

  2. 如下图所示：

浏览器引擎（browser engine）

  1. 它是 UI 和渲染引擎之间的桥梁；

  2. 接收来自 UI 的输入，然后通过操纵渲染引擎将网页或者其他资源显示在浏览器中；

渲染引擎（rendering engine）

  1. 负责在浏览器窗口上显示请求的内容；例如，用户请求一个 HTML 页面，则它负责解析 HTML 文档和 CSS ，并将解析和格式化的内容显示在屏幕上；我们平时说的浏览器内核就是指这部分；

  2. 现代网络浏览器的渲染引擎：

    1. Firefox：Gecko Software
    2. Safari：WebKit
    3. Chrome、Opera (15版本之后) ：Blink
    4. Internet Explorer：Trident

网络（networking）

  1. 该模块处理浏览器内的各种网络通信；

  2. 它使用一组通信协议，如 HTTP、HTTPs、FTP，同时通过 URL 获取请求的资源；

JS 解释器（JavaScript interpreter）

  1. JavaScript 是一种脚本语言，允许我们动态更新 Web 内容、控制由浏览器的 JS 引擎执行的多媒体和动画图像；

  2. DOM 和 CSSOM 为 JS 提供了一个接口，可以改变 DOM 和 CSSOM；由于浏览器不确定特定的 JS 会做什么，它会在遇到 script 标签后立即暂停 DOM 树的构建；

  3. 每个脚本都是一个解析拦截器，会让 DOM 树的构建停止；

    1. JS 引擎在从服务器获取并输入 JS 解析器后立即开始解析代码；它将它们转换为机器理解的代表性对象；在抽象句法结构的树表示中存储所有解析器信息的对象称为对象语法树（AST）；这些对象被送入一个解释器，该解释器将这些对象翻译成字节码；
    2. 这些是即时 (JIT) 编译器，这意味着从服务器下载的 JavaScript 文件在客户端的计算机上实时编译；解释器和编译器是结合在一起的；解释器几乎立即执行源代码；编译器生成客户端系统直接执行的机器代码；

  4. 不同的浏览器使用不同的 JS 引擎：

    1. Chrome： V8 (JavaScript 引擎，Node JS 建立在此之上)
    2. Mozilla： SpiderMonkey (旧称“松鼠鱼”)
    3. Microsoft Edge：Chakra
    4. Safari：JavaScriptCore / Nitro WebKit

用户界面后端（UI backend）

  1. 用于绘制基本的窗口小部件，比如下拉列表、文本框、按钮等；

  2. 向上提供公开的接口，向下调用操作系统的用户界面；

数据存储（data storage）

  1. 这是一个持久层；浏览器可能需要在本地保存各种数据，例如 cookie；

  2. 浏览器还支持 localStorage、IndexedDB、WebSQL 和 FileSystem 等存储机制；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 什么是浏览器
  2. 2. 浏览器的组成
    1. 2.1. 用户界面（user interface）
    2. 2.2. 浏览器引擎（browser engine）
    3. 2.3. 渲染引擎（rendering engine）
    4. 2.4. 网络（networking）
    5. 2.5. JS 解释器（JavaScript interpreter）
    6. 2.6. 用户界面后端（UI backend）
    7. 2.7. 数据存储（data storage）