关于浏览器的那些事儿

关于浏览器的那些事儿

东拼西凑了一些浏览器内容(^-^)

主流浏览器对比与发展

• 推荐一个短视频介绍

浏览器/参数	厂商	内核	JS引擎	其他
Chrome	Google	Chromium、 Blink	V8	-webkit-
Safari	Apple	Webkit	JScore、 SquirrelFish(Nitro)(4.0+)	-webkit-
FireFox	Mozilla	Gecko	SpiderMonkey(1.0-3.0)、 TraceMonkey(3.5-3.6)、 JaegerMonkey(4.0+)	-moz-
Opera	OperaSoftware	Presto、 Webkit、 Blink	Linear A(4.0-6.1)、 Linear B(7.0-9.2)、 Futhark(9.5-10.2)、 Carakan(10.5-)	-o-
IE	Microsoft	Trident	JScript(IE9-)、 Chakra(IE9+)	-ms-
Edge	Microsoft	EdgeHTML	Chakra	-ms-
新Edge	Microsoft	Chromium	V8	-webkit-
UC	阿里巴巴	U3	U3集成?	同红芯浏览器一样换汤不换药
360/QQ/搜狗/猎豹、 百度/2345/傲游/世界之窗	见下文	Trident(兼容模式)+Webkit(高速模式)双内核	/	能用就行

1. Chrome 以前是 Chromium 内核(Chrome 内核)，在 Webkit 基础上修改，但代码可读性更高，比 Webkit 更好用。目前是使用重新升级换代后的 Blink 内核。谷歌还开发了自己的 JS 引擎 V8，使 JS 运行速度极大地提高，Node.js 也是以 V8 为底层架构封装。另外我们可以通过在地址栏输入 chrome://version/ 来查看浏览器相关信息，通过 chrome://dino 玩小游戏。
2. Safari 的 Webkit 源自 KHTML，苹果在比较了 Gecko 和 KHTML 后，选择了后者来做引擎开发，是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。苹果与谷歌冲突又研发使用 Webkit2 内核，谷歌则研发了 Chromium 内核，Webkit 也算是苹果为业界做出的最大贡献。
3. FireFox 的 Gecko 内核俗称 Firefox 内核，代码完全公开，可开发程度高，全世界的程序员都可为其编写代码，增加其功能。还有一个 JS 引擎 Rhino，也是由Mozilla基金会管理，虽然最终被废弃，但其开放源代码，完全以Java编写。
4. Opera 最早自己研发 Presto，后面用 Webkit，最后与谷歌一起发布使用 Blink，然后因用户体验下降逐渐衰落。
5. IE 是微软和 Spyglass 合作开发，随 Windows 绑定抢占市场，并且只能在 Windows 使用也不开源。
6. Edge 原名叫斯巴达，后改名 Edge，2015 年 3 月发布第一个预览版。微软计划在 Windows 中完全淘汰 Internet Explorer 后，为 Edge 添加 “IE 模式”，该模式允许用户在 Edge 内使用 IE 内核重新加载网页。
7. 新 Edge 是微软妥协下的产物，2018 年 12 月宣布新 Edge 将基于 Chromium 内核开发，正式版于 2020 年 1 月发布。可以通过 edge://version/ 来查看浏览器版本信息，通过 edge://surf/ 可以玩离线小游戏。
8. UC 浏览器的 U3 内核本质是基于开源内核 Webkit 开发，也有说是基于 Gecko 内核与 Trident 内核开发的。
9. 众多国产浏览器的厂商分别为360安全、Tencent、搜狗信息、豹好玩科技、Baidu、二三四五、网际傲游、凤凰工作室。这些浏览器适合需要经常访问那种古老系统的用户(兼容模式)

补充：还有一个 JS 引擎 - KJS，KDE 的 ECMAScript／JavaScript 引擎，最初由哈里·波顿开发，用于 KDE 项目的 Konqueror 网页浏览器中。

浏览器的原理

浏览器程序结构

• 用户界面(User Interface) - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口（显示页面），其他部分都属于用户界面。
• 浏览器引擎(Browser Engine) - 在用户界面和渲染引擎之间传送指令。
• 渲染引擎(Rendering Engine) - 显示（渲染）请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络(NetWorking) - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
• JavaScript 解释器(JavaScript Interpreter)。用于解析和执行 JavaScript 代码。
• 用户界面后端(UI Backend) - 用于绘制基本的窗口小部件，比如组合框和窗口。公开了与平台无关的通用接口，在底层使用操作系统的用户界面方法。
• 数据存储(Data Persistence) - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

浏览器程序结构发展

• 最早的浏览器上单进程结构，页面线程执行页面渲染，JS 线程执行 JS 代码等等，但是只要其中一个线程出问题，可能整个程序就崩溃了。

  • 例如：浏览器的一个标签页卡死，那么整个浏览器都无法使用，导致应用程序极其不稳定。
  • 单进程是可以共享数据的，所以并不安全。
  • 由于各个线程负责的任务过多，使用起来也并不流畅。

• 为了解决这些问题，现代浏览器使用了多进程结构。可分为浏览器进程、网络进程、缓存进程、GPU 进程、渲染器进程、插件进程。

  • 浏览器进程：控制用户界面，协调其他进程工作。
  • 网络进程：发起接收网络请求
  • 缓存进程：控制数据缓存
  • GPU 进程：负责浏览器界面与页面的渲染
  • 渲染器进程：控制 Tab 标签页的渲染，有可能会为每个标签页创建一个渲染进程(由浏览器启动模型决定)。独立每个页面一个进程可以起到进程隔离的作用，每个页面互不干扰。
  • 插件进程：控制使用的插件，Flash等等，不是浏览器安装的插件。

渲染主流程

1. 浏览器从网络层获取请求的文档内容，然后开始渲染流程。
2. 解析并开始构建 Content Tree（Element -> DOM nodes），同时解析样式数据（外部 CSS 和 Style 元素）。
3. 两者结合构建 Render Tree（渲染树包含带有视觉属性（如颜色和尺寸）的矩形们）。
4. 在渲染树创建后进入 Layout 阶段，给渲染树的每个节点设置在屏幕上的位置信息。
5. Paint 阶段，通过 UI backend 绘制 Render tree 到屏幕。

注意，渲染过程是渐进式的。浏览器会尽早展示文档内容，即不会在所有 HTML 文档解析完成后才会去构建 Render tree，而是部分内容被解析和展示，并继续解析和展示剩下的。

浏览器的页面渲染过程

参考文章

---

• 在浏览器地址栏输入 URL

• 浏览器会启动网络线程来请求 DNS 进行域名解析，最终返回一个 IP 地址。

• 一旦获取到服务器IP地址，浏览器就会通过TCP【三次握手】与服务器建立连接。这个机制的是用来让两端尝试进行通信。浏览器和服务器在发送数据之前，通过上层协议 HTTPS 可以协商网络 TCP 套接字连接的一些参数。TCP的【三次握手】技术经常被称为【SYN-SYN-ACK】，更确切的说是 【SYN, SYN-ACK, ACK】，因为通过 TCP 首先发送了三个消息进行协商，开始一个 TCP 会话在两台电脑之间。这意味着服务器之间还要来回发送三条消息，而我们的请求目前尚未发出。

  • 上图我们可以这样理解，因为 TCP 是一个工作在传输层的可靠数据传输的服务，它能确保接收端接收的网络包是无损坏、无间隔、非冗余和按序的。

    • 面向连接：一定是「一对一」才能连接，不能像 UDP 协议可以一个主机同时向多个主机发送消息，也就是一对多是无法做到的。
    • 可靠的：无论的网络链路中出现了怎样的链路变化，TCP 都可以保证一个报文一定能够到达接收端。
    • 字节流：消息是「没有边界」的，所以无论我们消息有多大都可以进行传输。并且消息是「有序的」，当「前一个」消息没有收到的时候，即使它先收到了后面的字节，那么也不能扔给应用层去处理，同时对「重复」的报文会自动丢弃。
    • 参考：ibanmen

  • TCP 是面向连接的协议，所以使用 TCP 前必须先建立连接，而建立连接是通过三次握手来进行的，简单解释上图可以是：

    1. 我对你说：我要跟你说话。（此时服务端确认客户端的发送能力没有问题）
    2. 你跟我说：我知道你要跟我说话，我们开始说话吧。（此时客户端确认服务端的接收和发送能力都没有问题）

    3. 我跟你说：好的，我们开始说话吧。（此时服务端确认客户端的接收能力也没有问题）

• TLS/SSL 协商：为了在【HTTPS】上建立安全连接，另一种握手是必须的。更确切的说是 TLS/SSL 协商，它决定了什么密码将会被用来加密通信，验证服务器，这就意味着在进行真实的数据传输之前建立安全连接。在发送真正的请求内容之前还需要三次往返服务器。虽然建立安全连接对增加了加载页面的等待时间，对于建立一个安全的连接来说，以增加等待时间为代价是值得的，因为在浏览器和 web 服务器之间传输的数据不可以被第三方解密。

• 经过上图 8 次往返，浏览器终于可以发出请求。一旦我们建立了到 web 服务器的连接，浏览器就代表用户发送一个初始的 HTTP GET请求，对于网站来说，这个请求通常是一个 HTML 文件。

• 一旦服务器收到请求，它将使用相关的响应头和 HTML 的内容进行回复。此时网络线程会通知 UI 线程执行后续操作。

• UI 线程会创建一个渲染器进程来渲染页面，浏览器进程会通过 IPC 管道将数据传递给渲染器进程。

• 渲染器进程的主线程接收到数据(HTML)，开始渲染解析。

• 通过标签词法解析，将内容解析为多个标记，然后构造 DOM 树，先创建 document 对象，再不断修改，向其中添加各种元素。

  • 解析引入的 css、js、img 等等，图片与 css 不会阻塞 HTML 的解析，因为不影响 DOM 树的构造。但

    • 使用 Reset CSS 来统一浏览器样式
    • 不用兼容 IE 时，直接排除掉。
    • 写 CSS3 新样式属性时，加浏览器前缀兼容早期浏览器。

    @keyframes
    transform
    transtion
    animation
    border-radius
    box-shadow
    flex
    ...

    • 避免使用不兼容的 js 代码（时间处理问题、屏幕宽高问题、event 事件问题、DOM 节点问题、事件传播问题、阻止默认事件问题、鼠标滚轮滚动事件问题等等）。
    • 鼠标指针 cursor: hand; 只有 IE 浏览器识别，其他浏览器不识别。统一使用 cursor: pointer;
    • 超链接访问过后 hover 样式就不出现的问题，需要注意伪类顺序 link-visited-hover-active。
    • css hack

    background-color: yellow0; // 0 ie8
    +background-color: pink; // + ie7
    _background-color: orange; // _ ie6

    • 使用一个功能之前判断浏览器是否支持，比如使用 ajax 要判断是否支持 XMLHttpRequest，IE6 之前不支持。还有使用本地存储、通知弹窗等 HTML5 新特性时更须注意。

    参考来源

    • 参考 HTML 引擎)
    • 参考 JavaScript 引擎
    • 参考浏览器原理