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