浏览器的介绍

常见的浏览器

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：

效果图

我们重点需要学习的是 Chrome 浏览器。

浏览器的市场占有份额

浏览器的市场占有份额：https://tongji.baidu.com/research/site?source=index#browser

效果图

浏览器的组成

浏览器的主要组件包括：

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。

2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。

3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

4. 网络 - 用于网络调用，比如 HTTP 请求。它具有平台无关的接口，各平台底层使用不同的实现。

5. UI 后端 - 用来绘制基本的窗口小部件，比如组合框和窗口。它公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

6. JavaScript 解释器 - 用来解析和执行 JavaScript 代码。

7. 数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML5 规范（例如，Web Storage、IndexedDB、WebSQL、FileSystem等）提供了完整的（虽然轻量级）数据库存储机制。

浏览器的工作原理

浏览器工作的主要流程：

1. 解析 HTML 生成 DOM 树：浏览器解析 HTML 文档，生成 DOM（Document Object Model）树。

2. 解析 CSS 生成 CSSOM 树：浏览器解析 CSS 文件和内联样式，生成 CSSOM（CSS Object Model）树。

3. 将 DOM 树和 CSSOM 树结合生成渲染树：浏览器将 DOM 树和 CSSOM 树结合，生成渲染树（Render Tree）。

4. 布局渲染树：浏览器计算渲染树中各个节点的位置和大小，这个过程称为布局（Layout）或回流（Reflow）。

5. 绘制渲染树：浏览器将渲染树中的各个节点绘制到屏幕上，这个过程称为绘制（Painting）。

浏览器内核

浏览器内核（渲染引擎）是浏览器的核心，不同的浏览器使用不同的内核：

• Trident：IE 浏览器使用的内核
• Gecko：Firefox 浏览器使用的内核
• WebKit：Safari 浏览器使用的内核
• Blink：Chrome、Opera、Edge（新版）浏览器使用的内核（基于 WebKit）

了解浏览器内核的差异对于前端开发非常重要，因为不同的内核可能对 HTML、CSS 和 JavaScript 的解析和渲染有所不同，这就是所谓的"浏览器兼容性问题"。