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

火狐社区

登录    注册

用新浪微博连接 QQ互联

Firefox 52引入WebAssembly、CSS Grid与Grid Inspector

yingliu Mozilla员工 发表于 2017-3-14 16:22:42 | 显示全部楼层 [复制链接]
3 2521
本帖最后由 yingliu 于 2017-3-14 16:33 编辑

前言

随着新标准出炉、性能提升,以及许多简化设计人员工作的功能和新工具接二连三的推出,现在正是 Web 演进史上令人振奋的一刻!Firefox 52 的发布,代表了多项功能在历经多年研究后开花结果的心血结晶。虽然其中有些技术仍将继续研究和改进,但新版 Firefox 的推出依然值得庆祝!

在这篇文章里,Mozilla 的 Developer Relations 团队将说明 Firefox 52 中新增的几个最创新的功能与特点,包括 WebAssembly、CSS Grid、CSS Grid Inspector 工具、改良后的「响应式设计模式」(Responsive Design Mode,RDM),以及对于 JavaScript 的 Async 与 Await 支持。

WebAssembly 打破 Web 与原生之间的障碍

Firefox 52 支持 WebAssembly。WebAssembly 是由 Mozilla、Google、Microsoft 和 Apple 共同开发的新兴开放标准,是在网页上打造安全、可携带和高效率计划的新型二进制格式。未来,WebAssembly 将可在 JavaScript 所能运行的任何平台运行,也会获得各大浏览器和源于浏览器的执行环境(如 Node.js 和 Electron)的支持。WebAssembly 的设计本意就是要无所不在。



包括 Mozilla Emscripten 在内的编译程序能够锁定 WebAssembly 的虚拟架构,使其以近原生的速度在网页上执行可携式的 C/C++。除了 C/C++ 以外,Rust程序语言已为 WebAssembly 提供初步支持LLVM 也实验性地将WebAssembly 纳为后台。预计将有更多程序语言在未来几年间加入支持 WebAssembly 的行列。



通过 Emscripten,WebAssembly 可以把整个游戏和原生应用直接移植到网页上。不过, WebAssembly 的本事绝不仅此而已。由于它速度快,又能与JavaScript 相互操作,所以能把过去对网页而言过于复杂或不切实际的应用都化为可能。


(可戳此播放 ZenGarden 的演示视频体验。请使用桌面版的Firefox 52。)

JavaScript 函数与 WebAssembly 函数可相互调用,如此一来,在同一个网页应用程序中,高阶 JavaScript 和低阶的 C/C++/Rust 程序便可以混搭。开发人员能够重复使用 WebAssembly 的模块,而不必了解其内部指令——就像现在运用 minified JavaScript 库的方法一样。

对于必须稳定性能的应用领域,如游戏、视频编辑处理、数据分析、原始计算(raw computation)和编码等,WebAssembly 在支持应用的大小和执行速度上,优势都非常明显。因此,Mozilla 的工程师们认为许多通行的链接库及框架终将直接或间接使用到 WebAssembly。

以程序代码重复使用和软件架构而言,「原生」与 Web 之间的障碍已经被打破了,而这还只是刚开始而已。工具和排错功能将持续改善,相互操作性、性能和原始能力也将继续加强。例如,多线程和 SIMD 的支持已纳入 WebAssembly 的发展蓝图。

您可在 MDN 上展开 WebAssembly 之旅,并从 WebAssembly.org 的开发者手中取得最新消息。

CSS Grid 和 Grid Inspector

Firefox 52 纳入了对 CSS Grid Layout Module Level 1 的支持,这是一种新增18 项 CSS 属性(properties)定义的 CSS 规格。CSS Grid 是网页的二维版面配置系统,能利用浏览器中原有的网格框架,大幅简化开发者们多年来尝试解决的许多布局模式的编程工作。它也为绘图设计开启了许多新机会。无论您是想加强用户界面来改善应用的使用体验,或是想加强内容的设计编排,这套新工具都是您的好帮手!

CSS Grid 的做法是定义行与列,并将不同的元素(item)放置于网格之中。这些行和列可设定成特定的大小(固定、弹性或混合),或设定为能依据内容自动重设大小。各个元素可被指派到 CSS 网格里的特定位置,也可让浏览器依据网格自动定位(auto-placement)算法来排定位置。因为这些重设大小和内容摆放的选项,CSS Grid 拥有远优于现有排版框架的弹性与功能。另外,它能让开发者在行中定义和摆放项目的功能也是全新的。

查看网格.jpeg

非常高兴 Firefox 52 推出了新的 Grid Inspector工具,此工具能让您直接在页面上查看网格的网格线,进而简化掌握版面编排的过程。


这个来自 http://labs.jensimmons.com/2017/01-003.html 的视频提供了一些实例。您还可以到 labs.jensimmons.com 上参考更多实例。

想学会 Grid 吗?MDN 上提供了许多深入浅出的说明:

下面是关于 CSS Grid 最常见的两个Q&A:

应该用 Grid 还是 Flexbox?哪个更好?
这不是二选一的问题。您可以两个都用,把 CSS Grid 与 Flexbox、及其他影响版面布局的 CSS 属性(浮动、边界、多栏配置、书写模式、行内(inline)区块等)一起混用。当您想调整两个维度的版面大小和排列时,应该使用 Grid;但若您只想调整一个维度,则该使用 Flexbox。大多数情况会两者都用,各自在网页中不同的元素上派上用场。等到深入了解 Grid 和 Flexbox 之间的差别 后,您就会更清楚两个工具搭配起来非常好用。

现在就应该开始用 CSS Grid 吗?不用等更多浏览器支持 Grid 后再用吗?
在各家浏览器公司改变合作模式打造出新的 CSS 规格之后,业界将以前所未有的速度展开对 CSS Grid 的广泛支持。Mozilla 是第一家,3月7日推出的 Firefox 52 已加入对 CSS Grid 的支持。Chrom 57 则紧追其后,3月14日起开始支持。Safari10.1 将提供 Grid 支持,现有 Beta 版。Internet Explorer 10 和 11 已针对此规格的旧版提供支持,但开发人员必须通过-ms 前缀才能使用 CSS Grid 的属性(您可自行决定是否使用此功能。在决定前,不妨参考这篇文章)。MS Edge 目前支持此规格的原始版本,未来也会更新到最新版。

只要先就各家浏览器的状况做好规划,并思考一下程序代码的结构,就算不是100%的人使用了支持 CSS Grid 的浏览器,您现在也可以推出采用了 CSS Grid 的网站。您可以利用 CSS 的「特性查询」(Feature Queries)功能,确保每位用户都享受到好的体验。

Async 功能和 await 关键词

Firefox 52 还新增 ES2017 版的全新 JavaScript 特性:异步函数和 await 操作。Async 是建立在 ES2015 Promises 之上的函数,它能让程序员以编写同步程序类似的方法来编写异步的程序代码。

下面的例子中,一个异步请求的部分结果被用作第二个异步函数的参数。若使用传统的回调方法,结果会是这样:
1.png

这还算直截了当,但如果还得做些额外的处理和异步请求,连带的嵌套或回调函数就会变得太过复杂。还有,若是碰上一连串复杂的回调程序,开发人员便很难判断程序的流程,会导致排错更加棘手。

ES2015 中所引入的 Promises 则能简化同样的流程:
2.png

Promises 是把这些序列法结构简化的好办法。在此例中,函数没有传给 getUsergetProfile,而是回传一个 Promise,等函数结果出来后,便可予以解决。不过,如果需要额外的处理或有条件的调用,嵌套还是会变得很深,控制流程也会变得太复杂。现在利用 Async 函数来重写上述的例子,方法如编写同步程序般,又不会像同步程序代码一样阻断线程!
3.png

函数最前面的 async 关键词会告诉 JS 引擎,以下的函数可被异步请求暂停,且函数处理结果将会是一个 Promise。每当等待异步结果时,就使用 await 关键词。这样能在不中断其它函数运作的情况下,暂停执行此函数。此外,前面 Promise 范例中的 getUsergetProfile 写法也不必有所改变。

虽然 Async 函数不是解决复杂控制流程的万灵药,但在很多情况下,它们都可简化编写和维护 async 码的工作,也不必导入成本高昂的程序代码库。您可参考 MDN 文件,进一步了解 asyncawait 的功能。

响应式设计模式(Responsive Design Mode,RDM)

除上述的 Grid Inspector 以外,新版 Firefox 还加入改良过的 RDM。此 RDM 工具可由模拟移动用户不同的网络连接速度来执行网络节流,并针对常见设备提供屏幕尺寸和分辨率的模拟,在之前的 Hacks文章中曾介绍过 RDM的许多功能。目前,浏览器必须先启用e10s,此功能才能开启。请先阅读 MDN 上的RDM 文件

Firefox 52 中更多精彩内容

这些是 Firefox 52 上一些颠覆产业战局的新功能。若您想进一步了解新版本 Firefox所有的新增内容,包括识别自动产生空白节点及检测不安全密码输入框的功能等,请参阅 Firefox52 针对开发者的版本说明。




隐元 老狐狸
发表于 2017-3-14 20:28:18 | 显示全部楼层
创新先行者mozilla进阶了!
310971373 狐狸精
发表于 2017-3-16 09:28:59 | 显示全部楼层
ES代码写的好规整,赞一个!
已成金 小狐狸
发表于 2017-3-17 16:27:49 | 显示全部楼层
老毛病改了没有啊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
热门活动更多 »
火狐微信
快速回复 返回顶部 返回列表