Web 开发者新神器：能运行游戏引擎的火狐 Quantum 浏览器

编者按：Aytekin Tank是JotForm的创始人，最近，他刊文表扬了火狐Quantum，新浏览器增加了许多先进技术，他认为开发者应该试一试。

我不知道你多大了，因为我是80年代末出生的，所以清楚记得Firefox（火狐）的崛起和衰落。

火狐是以“IE6开源竞争对手”这一身份出现的。它很强大，因为它提供多种选择，例如，用户可以通过多种多样的扩展包增加新功能，改变视觉主题。所有人都喜欢火狐。

几年后，又一个竞争对手闯入市场，它的名字叫作Chrome。很快Chrome就冲上云霄，超越了对手。事实上，Chrome有如此多的用户，而且是在相当短的时间内积累的，它已经成为谷歌最有价值的资产之一。我相信有许多人读这篇文章时，使用的就是Chrome浏览器。

作为一名开发者，我深知取悦用户是一件极难的事。

随着复杂WEB技术、应用、软件的发展，消耗过多RAM和CPU的问题渐渐变得严重起来。

JotForm 开发团队的Deniz最近评论说：

“我有一台计算机，它是最新的Macbook Pro。用它从事开发工作（打开Chrome DevTools）时，电池电量流逝的速度太快了。”

我相信，如果你也是一名开发者，应该会有相似的看法，或者听到周围有人有过相似的抱怨。

你可能会进一步深思，考虑换一换浏览器，不再用Chrome。

正因如此，全面改变的新版火狐才会应运而生，它就是火狐Quantum。

2017年，Quantum正式推出，面向Android、Linux、iOS、Mac和Windows用户，此时离Mozilla推出第一版火狐浏览器已经10多年了。

除了披上漂亮的现代“外衣”，传闻还说Quantum加载网站的速度是火狐6的两倍，消耗的内存比Chrome少了30%。

10年之后的今天，Mozilla必须寻找新方法，将自己的产品与竞争对手区别开来，这是一件很难的事。

为了完全发挥计算机的性能，Moilla重写近400万行代码，引入了许多尖端技术，比如Servo、Rust、Quantum/Stylo。

付出是有回报的。

依我之见，与其它浏览器相比，Quantum有着很大的优势。

为什么？原因如下：

新技术

WebAssembly

在网上运行更大、更华丽或者更复杂的应用程序，这是许多开发者的梦想。近年来，一些新元素流行起来，比如照片和视频编辑、3D游戏编辑、VR/AR，网民的预期提高了很多很多。

JavaScript引擎（比如谷歌V8、Mozilla SpiderMonkey、微软Charka）已经高度成熟，速度越来越快，可以处理这些任务了。

到了2017年年底时，我们已经可以在火狐浏览器上运行Unity和Unreal游戏引擎了。现在呢，其它大型扫描器也开始支持。

 A-Frame和WebVR

最近出现一门重要的创新技术，它就是VR。由于手机、浏览器、相关产品（比如Oculus Rift和HTC Vive）的进步，VR会以很快的速度继续进化。

开发WebVR框架时，Mozilla扮演了重要角色，它还用新WEB浏览器增强VR体验。因为有了A-Frame（它得到了Mozilla的支持），一个出色的WebVR框架流行起来，每一个人都能使用了。

Common Voice项目

苹果Siri、微软Cortana、亚马逊Echo和谷歌Home都遵循专有、封闭式策略，它们用这种策略开发语音识别技术，这些技术成为产品的根基，可以响应语音命令。

现在Mozilla推出了Common Voice，它是一个开源项目，目标是将语音识别技术带给每一个人。

不论是谁，都可以对着机器大声朗诵句子，将线索告诉机器，为Common Voice做贡献。你可以对常用语音转录文本进行验证，确保识别引擎走上正轨。

火狐Devtools

我在上面谈到了火狐的一些变化，当我告诉你DevTools有了很大的进步，你肯定不会感到意外。Debugger.html正是其中之一。哪些地方最棒呢？Debugger.html是一个开源项目，放在GitHub，每一个人都可以参与开发。

下面就让我们来说说Debugger.html的新功能：

通用-检查工具

改变主题

新的开发者工具有3种不同的主题选项：一是暗黑主题，二是清爽主题，三是Firebug主题。仍然有许多人喜欢Firebug工具，虽然它的开发工作已经停止。

CSS Grid

在CSS领域出现一种新的创新技术，它就是CSS Grid Layout。有了DevTools工具，你可以查看“display: grid”元素。你还可以关闭一些东西，比如行号、区域名称。

Box Model

一些元素的“Margin”和“Padding”值有时会让人困惑。有了盒模型 ( Box Model )架构，你可以轻轻松松调节，修改一些属性，比如Margin、Padding值，修改边框。

CSS变量

引入变量，这是CSS的另一个重要创新。虽然到目前为止并不是所有浏览器都支持变量，但是随着时间的推移，肯定都会支持的。顾名思义，所谓的CSS变量就是你可以为变量赋予任何数值。想查看数值是多少吗？很简单，只要将鼠标移到上面就行了。

添加或者删除Class

在DevTools仪表板的右侧有一个按钮叫作.cls，按一下，你可以往HTML元素中添加或者剔除CSS Class。

Hover

当你点击右侧的.cls旁边的按钮，可以测试当前元素的Hover、Active、Focus特性。

字体

当你检查某个元素，可以看到元素使用了什么字体，它是如何添加的。

动画

动画也是另一个突破，它变得越来越流行了。我曾经写过一篇博文，专门介绍动画。你可以缓慢播放动画，也可以追踪它的移动方式。

XPath

开发者应该听说过“web scraping”这一术语。如果你想用“scraper”从WEB页面抽取一些元素，可以通过XPatch在页面上确定元素的位置。

控制台（Console）

控制台记录

当你进入控制台，可以轻松检查对象。因为元素以树形结构显示，你可以轻松选中对象，或者禁止它们出现。

Console.group

不知道你没有听说过，可以用console.group ()函数和groupCollapsed ()函数让事件变得更有序、更清晰？

调试器

Breakpoint

好的JavaScript调试工具是不可或缺的。有了Breakpoint，你可以轻松插入断点，仔细检查元素。

Source Maps

SCSS、WebAssembly、TypeScript、Babel，这些JavaScript技术或者CSS编译技术变得越来越流行。正因如此，浏览器处理的代码架构往往与之前编写时大不相同。通过Source Maps（源地图）技术，你可以处理源文件。

功能搜索-项目搜索

如果你想查找错误，有一个功能很实用，这个功能帮你在众多的文件中查找错误。

样式编辑器

在这个编辑器内，你可以看到自己为CSS所写的一切东西。

Performance

为了确保我们编写的网页快速流畅渲染（加入动画时这点尤其重要），我们不应该忘了60fps法则。有了这个功能，你可以追踪每一帧显示时花了多少时间。

网络监控

CSS、JavaScript、图片和许多其它的元素会在Network Monitor区域加载，如此一来，我们就可以通过浏览器解析页面，显示页面。你可以利用该区域检查性能，例如，观察文件的状态，看看上传用了多长时间，有没有加载成功。

存储

当用户访问网站时，我们用cookies存储相关信息，或者存储在本地。你可以检查、编辑、添加或者删除信息。

最好的思考

让用户从第三方产品转移，进入自己的专利性产品，将消费者锁在自己的软件生态系统内，大企业的业务模式基本上都是这样的。

不过火狐并没有建立所谓的专利围墙。正因如此，当你将浏览器换成火狐时就会容易很多。

当然，转移仍然不是一件容易的事。你必须改变自己的习惯，改变快捷方式，改变浏览器扩展程序，保存密码。不过我认为改变是值得的。

让我们再给火狐一次机会吧。