浏览器介绍
常见的浏览器
浏览器是网页运行的平台，常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等, 下图是 W3C 统计的网页浏览器使用趋势图:
由此可见, 重点需要学习的是 Chrome 浏览器
浏览器的组成
浏览器分成两部分:
- 渲染引擎, 即: 浏览器内核
- JS 引擎
渲染引擎(浏览器内核)
浏览器所采用的渲染引擎也称之为浏览器内核, 用于解析 HTML 和 CSS、布局、渲染等工作, 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
因此, 渲染引擎是浏览器兼容性问题出现的根本原因
渲染引擎的英文叫做 Rendering Engine, 通俗来说, 它的作用就是: 读取网页内容, 计算网页的显示方式并显示在页面上
常见浏览器的内核如下：
| 浏览器 | 内核 |
|---|---|
| chrome | Blink |
| Opera | Blink |
| 360 安全浏览器 | Blink |
| 360 极速浏览器 | Blink |
| Safari | Webkit |
| Firefox 火狐 | Gecko |
| IE | Trident |
备注
360 的浏览器, 以前使用的 IE 浏览器的 Trident 内核, 但是现在已经改为使用 chrome 浏览器的 Blink 内核
JS 引擎
也称为 JS 解释器, 用来解析和执行网页中的 JavaScript 代码
浏览器本身并不会执行JS代码, 而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码
JS 引擎执行代码时会逐行解释每一句源码, 转换为机器语言, 然后由计算机去执行
常见浏览器的 JS 引擎如下:
| 浏览器 | JS 引擎 |
|---|---|
| chrome、Opera | V8 |
| Mozilla Firefox 火狐 | SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-） |
| Safari | JavaScriptCore, 也称为 Nitro, 是 WebKit 引擎的一部分 |
| IE | Trident |
| Edge | Chakra, 此外, ChakraCore是Chakra 的开源版本, 可以在不同的平台上使用 |
| Opera | Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-） |
补充说明
- SpiderMonkey 是第一款 JavaScript 引擎, 由 JS 语言的作者 Brendan Eich 开发
- 先以WebKit为例, WebKit上由两部分组成:
- WebCore: 负责解析 HTML 和 CSS、布局、渲染等工作
- JavaScriptCore: 负责解析和执行 JavaScript 代码
浏览器工作原理
这一节有些深入, 小白可以暂时跳过, 以后学习JS的时候再回来看
浏览器主要由下面这个七个部分组成:
- User Interface(UI界面): 包括地址栏、前进/后退按钮、书签菜单等, 也就是浏览器主窗口之外的其他部分
- Browser engine(浏览器引擎): 用来查询和操作渲染引擎, 是UI界面和渲染引擎之间的桥梁
- Rendering engine(渲染引擎): 用于解析 HTML 和 CSS, 并将解析后的内容显示在浏览器上
- Networking(网络模块): 用于发送网络请求
- JavaScript Interpreter(JavaScript解析器): 用于解析和执行 JavaScript 代码
- UI Backend(UI后端): 用于绘制组合框、弹窗等窗口小组件, 它会调用操作系统的 UI 方法
- Data Persistence(数据存储模块): 比如数据存储 cookie、HTML5 中的 localStorage 和 sessionStorage
参考链接: