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

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

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

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

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

随着复杂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存储相关信息,或者存储在本地。你可以检查、编辑、添加或者删除信息。

最好的思考

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

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

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

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

.