前端性能优化（二）01-页面性能优化之浏览器——浏览器的主要作用 & 浏览器的组成结构

页面性能优化

前端性能优化可以分为两大部分：浏览器部分、代码部分。

浏览器部分又可以分为：

• 网络层面
• 浏览器渲染层面
• 服务端层面

代码部分又可以分为：

• 构建层面
• 编码层面
• 机制(SSR，英文Server Side Render：服务器端渲染)
• 规范

首先来看看浏览器部分：前端的页面主要在浏览器上运行着，那么我们追根溯源，从浏览器的原理开始，研究如何进行页面性能优化。

浏览器

目前使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。本文中以开放源代码浏览器为例，即 Firefox、Chrome 浏览器和 Safari（部分开源）。根据 StatCounter 浏览器统计数据，目前（2019年 6 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率 62.7%。由此可见，如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。

浏览器的主要作用

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这些网络资源包括以下内容：

• HTML
• CSS
• JavaScript的
• 媒体（图片，视频等）

也可以分为HTML文档(HTML/CSS/JS)、PDF、图片、视频和其他类型。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。如今，大多数的浏览器都是或多或少地遵从规范。

浏览器的用户界面有很多彼此相同的元素，其中包括：

• 用来输入 URI 的地址栏
• 前进和后退按钮
• 书签设置选项
• 用于刷新和停止加载当前文档的刷新和停止按钮
• 用于返回主页的主页按钮

奇怪的是，浏览器的用户界面并没有任何正式的规范，这是多年来的最佳实践自然发展以及彼此之间相互模仿的结果。HTML5 也没有定义浏览器必须具有的用户界面元素，但列出了一些通用的元素，例如地址栏、状态栏和工具栏等。

有一些比较有趣的事情：

Safari是乔布斯在2003年的Macworld大会发布的，9年过去了，08年才发展起来的Chrome用了不到Safari一半的时间远远把Safari甩在了后面，这让Safari情何以堪。

两大浏览器都是基于苹果的布局引擎Webkit，按道理Safari是占优势的，因为两者都分别是自己操作系统的默认浏览器，许多人就顺便使用了，懒得去下载别的浏览器。

许多人可能会想，这还不简单，Chrome运行于Windows操作系统，而Safari大部分时候都用于苹果自己的系统，Windows .VS. OS X，哪个使用人群广？很显然是前者，所以Chrome当然比Safari发真快，可是，实际上Safari要比Chrome更早登陆Windows。

在2007年六月，Safari for Windows Beta版就已经发布，正式版于2008年三月发布，而Chrome直到2008年的九月才发布，Chrome只用了一年的时间就超过了Safari。

大量Benchmark测试表明Chrome不管在网页打开还是JavaScript表现方面，速度都最快。

但是，当Safari发布Windows版的时候，测试结果也是一样的，不管在Mac还是PC上测试，那时候都是最快的，如果仅仅是因为速度，那么Safari在2007年六月的表现就应该和chrome在2008年九月的时候一样。

难道Chrome胜在插件？也许，不过Safari在2010年年中的时候也有了许多插件，当然，Chrome的插件质量更好更丰富，如果这也足够让Safari落后于Chrome，那么开发商们可能早就将游戏植入Chrome，而且，Firefox也先于Chrome和Safari植入插件，现在不也败给了Chrome吗？

主要原因：

1. Safari用起来不舒服，google推广给力
2. 独特的用户体验(UI、交互、云、Google全家桶)

那么Safari就一文不值了？

但是，Mac上的用户使用safari更加的省电、省资源，稳定性会更好。**插件不需要爬梯子！！！**更低的学习成本。

IE(Internet Explorer)的黑历史：

IE 浏览器的开发应该是在 1994 年中开始的，那是我还在读大学。微软为了对抗当时的主流浏览器 NetScape，准备开发自己的浏览器并在 Windows 中默认捆绑销售。但是，留给微软的时间并不充裕，他们没时间从零开始，于是和 Spyglass 合作开发，于是，计算机历史上最著名也最臭名昭著的浏览器 IE 诞生了。因为强大的功能和捆绑策略，IE 迅速击败了 NetScape，成为浏览器市场的绝对霸主。

在 2002 年，IE 已经拥有了95%的市场份额，几乎打败了所有的竞争对手。大为僵，又不思进取，于是颠覆者前仆后继。Firefox 开始迅速崛起，Chrome 后来居上，反观 IE，出现了各种安全漏洞和兼容性问题。2006年，IE 被评为“史上第八糟科技产品”。在相当长的时间里，IE 浏览器是前端程序员员的噩梦。

带给我们的思考：

• 软件迭代更新的重要性(居安思危)
• 用户体验、用户感知的重要性(人性化产品)
• 互联网时代，什么都是可以替代的
• 分享、免费、共筑共赢才是互联网的精神

浏览器的组成结构

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

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

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

   也可以叫呈现引擎（Rendering Engine）或者布局引擎（Layout Engine）

   默认情况下，渲染引擎可显示 HTML 和 XML 文档与图片。通过插件（或浏览器扩展程序），还可以显示其他类型的内容；例如，使用 PDF 查看器插件就能显示 PDF 文档。但是在本章中，我们将集中介绍其主要用途：显示使用 CSS 格式化的 HTML 内容和图片。

   浏览器（Firefox、Chrome 浏览器和 Safari）是基于两种渲染引擎构建的。Firefox 使用的是 Gecko，这是 Mozilla 公司“自制”的渲染引擎。而 Safari 和 Chrome 浏览器使用的都是 WebKit。

   浏览器	渲染引擎（开发语言）	脚本引擎（开发语言）
   Chrome	Blink (c++)	V8 (c++)
   Opera	Blink (c++)	V8 (c++)
   Safari	Webkit (c++)	JavaScript Core (nitro)
   FireFox	Gecko (c++)	SpiderMonkey (c/c++)
   Edge	EdgeHTML (c++)	Chakra JavaScript Engine (c++)
   IE	Trident (c++)	Chakra JScript Engine (c++)

   Firefox在2017年启用了新的web引擎Quantum，Quantum 以 Gecko 引擎为基础，同时利用了 Rust 的良好并发性和 Servo 的高性能组件，为 Firefox 带来了更多的并行化和 GPU 运算，让 Firefox 更快更可靠。

   2015 年 3 月，微软将放弃自家Edge：转而开发Chromium内核浏览器。

   它们的开发时间轴：

WebKit 是一种开放源代码渲染引擎，起初用于 Linux 平台，随后由 Apple 公司进行修改，从而支持苹果机和 Windows。有关详情，请参阅 webkit.org

4. 网络（Networking） - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。

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

6. JavaScript 解释器（JavaScript Interpreter）。用于解析和执行 JavaScript 代码，如 V8 引擎。

   JS引擎线程负责解析Javascript脚本，运行代码。

   JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行

7. 数据存储（Data Persistence）。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
   页（renderer进程）中只有一个JS线程在运行**

8. 数据存储（Data Persistence）。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。