请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

Firefox 58:Quantum 时代在继续

yingliu Mozilla员工 发表于 2018-2-6 17:29:59 | 显示全部楼层 [复制链接]
6 6741
本帖最后由 yingliu 于 2018-2-9 18:00 编辑

2017 年对 Mozilla 来说是极具意义的一年。多年来 Mozilla 努力帮 Firefox 加速,种种心血终于在 Firefox Quantum 上线后开花结果,也为未来几年的发展打下基础。在 2018 年里,Mozilla 将继续在此基础上积累能量。在这样的理念下,接下来 Firefox 更新的几个版本都将继续用「Quantum」这个名字。下面来介绍一下近期更新的 Firefox 58 有什么新特色:

Gecko 引擎性能

「量子项目」(Project Quantum) 的目标是达成 Firefox 渲染引擎 Gecko 的现代化。其中几项重大更新已随 Firefox 57 及前一版的 Firefox 发布,许多新功能也即将登场,部分功能将于 2018 年陆续推出。除了 Quantum 的主轴外,我们还会不断改进浏览体验的不同面向和浏览速度。以下是几个随最新版 Firefox 发布的功能更新:

非主线程绘图 Off-Main-Thread Painting (OMTP)

otmp.png

Quantum Render(或称 WebRender)是 Firefox 今年上线的绘图系统的重大更新。通过硬件加速的网页内容渲染,Quantum Render 可望大幅提高处理性能。但这不是我们为强化 Firefox 绘图性能所做的唯一改变!Firefox 58 把网页绘制流程(将一个网页上所有像素都画出来的过程)移到专属的线程上。

浏览器的主线程向来是稀缺资源。它负责执行网页的脚本、响应用户输入的信息和维持页面的现有状态。在 OMTP 出现前,网页当前的状态会被转成绘图命令,而整页的像素数据则由主线程产生(或光栅化)。这意味着性能相关的卷动页面动作、动画或脚本等任务将被打断,或某一脚本可能造成丢帧(dropped frames)或画面卡顿的情况。

但有了 OMTP 后,网页的外观状态仍会在主线程上运行,但可能占据大量资源的光栅化(rasterization)任务会被派给「光栅化线程」,主线程便可继续计算和保持响应力。

就算 WebRender 开发工作已完成并加入了 Firefox,难免仍有硬件加速无法使用、或因驱动程序的缺陷而造成 WebRender 无法运作的情况。但 OMTP 将可提供远优于目前的渲染流程的体验。

OMTP 是 Mozilla 多年来逐步改造绘图架构的心血结晶,随着所有的努力开花结果,使用者的体验将大幅改善。如果你想进一步了解 OMTP 或看一些初期的性能测试数据,Mozilla 团队在这篇博客文章中提供了深入的说明

背景标签页节流(throttling),让 Firefox 心无旁鹜

为了减少 CPU 的整体使用量,Firefox 58 将开始针对在背景执行的标签页的定时器(timer)控件(setTimeout/setInterval)做 CPU 调节。那些定时器仍将启动,但频率会减低。不过,WebRTC/WebSocket 联机和音频播放不在 CPU 节流之列。您可以到MDN 参考更多信息

WebAssembly 流式编译程序(Streaming Compiler)

ezgif-5-73711fc5d3.gif

WebAssembly 是一种适合编译到 web 平台、可移植的二进制编译格式,能创造出直逼原生的执行速度。几种工具链(如 Rust 编译程序和 Unity Engine)已支持直接生成二进制文件格式的 WebAssembly 文档。大型二进制有效载荷(payload)最棘手的问题是下载文件太大,而且,传统的基于插件的 Web runtimes(如 Flash)必须先下载完整包后才能执行。

幸运的是,WebAssembly 就是针对像 Web 这样的网络环境所设计的!Firefox58 锁定这样的特性,增加对于流式编译(streaming compilation)的支持。如此一来,Firefox 便可在下载完成前先开始编译。等编译程序准备好后,你的模块就可以在下载完后立即开始执行。

Lin Clark 在文章中(还有画图说明!)更深入地介绍了流式编译程序对于WebAssembly 的帮助。就算您对 WebAssembly 已经相当熟悉,他的那篇文章还是值得一读。您也可以在 MDN 上找到 WebAssembly 完整的参考文件

CSS 字体显示

网络字体和 @font-face 指令对于网页字体设计的定制化提供很大的空间,不过,就算用的是最新的压缩字体格式,文档还是可能过大。这可能导致页面加载时间过长,使得用户在网页中不是看到系统字体(FOUT),就是什么字都看不到(FOIT)。不同的浏览器有不同的默认行为,想达成对于某特定网站和其用户最适合的行为并不容易。

font-display 描述(descriptor) 的作用是让网站根据不同的字体选择恰当的字体加载行为。有的网站可能先立刻以系统字体来渲染文本主体(body),而图标的字体或显示类型则能先等候一段时间后再以替代字体呈现,好让特别风格或象征性的字体有机会好好加载。

既然这是配合 Firefox 58 上线写的文章,所以,无需赘言:Firefox 58 已加入 font-display 了。它被纳入个别的 @font-face 区块,并具有下面几种值之一:
  • auto 是默认值,能让浏览器采用正常的替代/隐藏文字策略
  • block 会告诉浏览器先暂时渲染看不到的文字,之后再采用替代字体。如果接下来网络字体在任何时间点加载完成,文字就会改用新字体
  • swap 将立刻把文字渲染成替代字体,但和 block一样会强制等待一段时间让字体加载
  • fallback 会缩短浏览器渲染隐藏文本的时间,之后再渲染替代字体。如果字体再过一段短暂的时间后仍未载入,就算最后还是加载完成,浏览器也将不会改字体
  • optional 采用和 fallback 一样短暂的隐藏文本等候时间,但会完全跳过换掉字体的步骤。如果字体在隐藏文本超时前未载入,后续所有在该页的连接时间都将使用替代字体。只好希望下次加载更顺利了!

应用场景不同,使用偏好也会随之改变。若是设计如杂志风格般精美的版面,或许会想尽可能等页面加载完整的字体种类,但移动版的新闻网站也许就不必太坚持网页字体是否如实呈现。

新 Promise 功能可减少重复的程序代码

Promises 曾于 ES2015 推出,它提供一种标准方法来编写异步程序代码及处理成功和失败的操作。Firefox 58 纳入新的标准 .finally() 方法,让程序代码不论 Promise 对象被解决或被拒绝,都能继续执行下去。请参考以下范例:
  1. showLoadingSpinner();
  2. fetch('data.json')
  3.   .then(data => {
  4.     renderContent(data);
  5.     hideLoadingSpinner();
  6.   })
  7.   .catch(error => {
  8.     displayError(error);
  9.     hideLoadingSpinner();
  10.   });
复制代码

hideLoadingSpinner() 重复了,因为不管 loadPage() 成功与否,我们都把 spinner 移除。.finally() 则可帮我们避免重复:
  1. showLoadingSpinner();
  2. fetch('data.json')
  3.   .then(data => {
  4.     renderContent(data);
  5.   })
  6.   .catch(error => {
  7.     displayError(error);
  8.   })
  9.   .finally(() => {
  10.     hideLoadingSpinner();
  11.   });
复制代码

虽然这是小事,但别忘了,「不要重复」(DRY)不是编写程序的基本原则吗? 更多有关 .finally() 的信息,请见MDN

Firefox for Android 支持 PWA

渐进式网页应用程序(Progressive Web Apps, PWA)是能进一步强化网站功能的现代化网络科技,可以让网站在手机上实现接近原生应用的使用体验。Android 版的 Firefox 58 加强对于 PWA 的支持,用户可以把兼容的网站安装到移动设备的主画面上。以下是相关演示视频:

当 Firefox 58 用户连上通过 HTTPS 联机的网站时,只要是有效的安装信息文件(manifest),浏览器的地址栏即会显示一个小图标。按下小图标后,画面将跳出「加入主画面」的确认信息,该网络应用就会被加入用户 Android 设备的主画面。以后,只要从主画面开启,该应用便能配合屏幕的尺寸和方向来显示,也会和其他开启过的应用一样出现在程序页(app switcher)中。


MDN 中有基础指南可供参考,请见 Add to Home screen(加入主画面)

另一个值得一提的新功能与外部链接的处理方式有关:当用户浏览已安装的 PWA 时,一按下外部链接,Firefox 58 便会以自定义标签页开启网页。这样一来,URL 和安全信息都一目了然,用户的安全得到保障。另外,页面载入得也更快了(加载自定义标签页比加载整个浏览器的时间要短),还能同时保留该 PWA 色调风格,以及展现出符合原生应用的行为。

Mozilla 计划在接下来发布的更新中增加更多与 PWA 相关的 API 支持:除了背景同步处理的 API(Background Sync)已快就绪(目前目标是随 Firefox 59 发布)之外,在部署 Payment Request 和 Web Share APIs 上的进度也令人期待。

如果您想深入了解 Android 版 Firefox 58 对于 PWA 支持的功能特点,您可以参考 Andreas Bovens 的文章,还可以看看 MDN 上有关 Progressive Web Apps 的介绍

更多精彩功能期待您的体验!

除了这几大新功能之外,Firefox 58 还有许多值得探索的地方。欢迎参考正式的官方版本说明或 MDN 上针对开发者提供的各个功能说明文件

Firefox 今年将有许多新功能陆续上线,敬请期待。六个星期后再见!



FlamingFox 狐狸精
发表于 2018-2-6 19:49:03 | 显示全部楼层
学习中……顶礼膜拜!!
隐元 老狐狸
发表于 2018-2-7 07:29:18 | 显示全部楼层
mozilla是多个杰出领域全面开花!
stain 老狐狸
发表于 2018-2-7 17:27:40 | 显示全部楼层
测试了视频里的地址【getkana.com/app】【resilientwebdesign.com/】地址栏有按钮可以添加到桌面离线浏览。可用,不知道国内哪个网站可以。
挽尊小优优 小狐狸
发表于 2018-2-9 02:01:18 | 显示全部楼层
靴习一个!继续努力!
310971373 狐狸精
发表于 2018-3-22 20:45:56 | 显示全部楼层
Gecko 引擎
绿色圣光 狐狸精
发表于 2018-5-21 11:51:16 | 显示全部楼层
本帖最后由 绿色圣光 于 2018-5-28 17:21 编辑

真希望国内PWA能多一些,不要只去搞微信小程序啊!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
热门活动更多 »
  • 爱是一道光,召唤来了 GitHub CEO |COSCon'18 国际大神特辑

    立即参与
  • 开源若要天下闻,掌声须给教育人 | COSCon'18 特辑

    立即参与
火狐微信
快速回复 返回顶部 返回列表