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存储相关信息，或者存储在本地。你可以检查、编辑、添加或者删除信息。
最好的思考
让用户从第三方产品转移，进入自己的专利性产品，将消费者锁在自己的软件生态系统内，大企业的业务模式基本上都是这样的。
不过火狐并没有建立所谓的专利围墙。正因如此，当你将浏览器换成火狐时就会容易很多。
当然，转移仍然不是一件容易的事。你必须改变自己的习惯，改变快捷方式，改变浏览器扩展程序，保存密码。不过我认为改变是值得的。
让我们再给火狐一次机会吧。
正文到此结束
- 本文标签： 测试 网站 开源项目 HTML 开发 src 图片 编译 产品 微软 域名 快的 回报 ORM web CSS 创始人 软件 企业 JavaScript java 突破 IDE 时间 Chrome TypeScript IOS 云 https 调试 代码 谷歌 开源 神器 bug linux git 开发者 GitHub key 苹果 文章 模型 ip UI 亚马逊 解析 语音识别 删除 id windows map API Android 锁 http IO
- 版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
- 本文海报： 生成海报一 生成海报二
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
