简介

随着新标准的采用、性能提升、更出色的设计功能以及新工具的出现，网络发展无疑正处于一个激动人心的时代。Firefox 52 代表了众多已开发数年功能的结晶。虽然其中许多功能将继续发展和改进，但今天发布的 Firefox 仍然有很多值得庆祝的地方。

在这篇文章中，开发者关系团队介绍了一些最具创新性的功能，包括 WebAssembly、CSS Grid、CSS Grid 检查器工具、改进的响应式设计模式以及 JavaScript 中的 Async 和 Await 支持。

WebAssembly 打破 Web 与原生之间的壁垒

Firefox 52 支持 WebAssembly，这是一种用于在 Web 上运行安全、可移植和高效二进制程序的新格式。作为 Mozilla、Google、Microsoft 和 Apple 开发的新兴开放标准，WebAssembly 最终将在 JavaScript 运行的任何地方运行：在每个主要浏览器中，以及在 Node.js 和 Electron 等浏览器衍生运行时中。WebAssembly 旨在无处不在。

像 Mozilla 的 Emscripten 这样的编译器可以针对 WebAssembly 虚拟架构，从而可以在 Web 上以接近原生的速度运行可移植的 C/C++ 代码。除了 C/C++ 之外，Rust 编程语言对 WebAssembly 具有 初步支持，并且 LLVM 本身包含一个实验性的 WebAssembly 后端。我们预计未来几年将会有更多其他语言添加对 WebAssembly 的支持。

通过 Emscripten，WebAssembly 可以轻松地将整个游戏和原生应用程序移植到 Web 上，但它还可以做更多的事情。由于其速度快且易于与 JavaScript 交互，因此以前对 Web 来说要求过高或不切实际的任务现在触手可及。

（您可以 点击此处播放完整的 Zen Garden 演示。需要 Firefox 52，目前仅限桌面版。）

JavaScript 函数可以调用 WebAssembly 函数，反之亦然。这使得可以在单个 Web 应用程序中混合使用高级 JavaScript 和低级 C/C++/Rust。开发人员可以重用 WebAssembly 模块，而无需了解其内部工作原理，就像他们今天使用压缩的 JavaScript 库一样。

在性能一致性至关重要的领域（游戏、音频/视频处理、数据分析、原始计算、编解码器等），WebAssembly 在大小和速度方面提供了明显的优势。因此，我们预计许多流行的库和框架最终将直接或间接地依赖于 WebAssembly。

在代码重用和软件架构方面，“原生”和 Web 之间的界限正在消失，而这仅仅是个开始。工具和调试将继续改进，互操作性、性能和原始功能也将得到提升。例如，多线程和 SIMD 已经在 WebAssembly 路线图上了。

开始使用 MDN 上的 WebAssembly，并在 WebAssembly.org 上找到来自 WebAssembly 创建者的最新信息。

CSS Grid 和 Grid 检查器

Firefox 52 包含对 CSS 网格布局模块级别 1 的支持，这是一个定义了 18 个新 CSS 属性的 CSS 规范。CSS Grid 是一个用于 Web 的二维布局系统，使许多我们多年来一直使用网格框架在浏览器中以原生方式解决的布局模式的编码变得更加容易。它也为图形设计开辟了一个全新的世界。无论您是专注于应用程序体验的用户界面，还是内容的编辑设计，这个新的工具集都为您提供了强大的功能。

CSS Grid 通过定义行和列并将项目放置在网格上的区域中来工作。可以为行和列指定特定大小（固定、流体或混合），或者可以定义为根据内容大小调整自身大小。可以显式地在 CSS 中放置网格上的项目，或者可以根据网格自动放置算法由浏览器放置。这些大小和放置选项使 CSS Grid 比任何现有的布局框架都更强大和灵活。此外，能够定义并在行中放置内容是一个全新的功能。

我们还很自豪地宣布我们新的 Grid 检查器工具，它允许您直接在页面上查看网格线，从而更轻松地了解发生了什么。

请参阅 labs.jensimmons.com/2017/01-003.html 上此视频中的示例。并在 labs.jensimmons.com 上找到更多示例的游乐场。

有兴趣学习 Grid？我们有 MDN 上的深入指南

• 网格布局的基本概念
• 网格布局与其他布局方法的关系
• 使用 CSS Grid 进行基于线的放置
• 网格模板区域
• 使用命名网格线进行布局
• CSS 网格布局中的自动放置
• CSS 网格布局中的框对齐
• CSS 网格、逻辑值和书写模式
• CSS 网格布局和可访问性
• CSS 网格布局和渐进增强
• 使用 CSS 网格布局实现常见布局

以下是关于 CSS Grid 的两个最常见问题的答案

我应该使用 Grid 还是 Flexbox？哪个更好？

您将同时使用两者，将 CSS Grid 与 Flexbox 和影响布局的其他 CSS 属性（浮动、边距、多列、书写模式、内联块等）混合使用。这不是只能选择一个的情况。当您想要控制二维的大小和对齐方式时，Grid 是正确的工具。当您只关心控制一个维度时，Flexbox 是正确的工具。大多数项目都会同时使用两者，每个项目在页面上的不同小部分使用。一旦您 了解两者之间的区别，就会清楚它们是如何完美地协同工作的。

为什么我现在应该对 CSS Grid 感到兴奋？在 Grid 在足够多的浏览器中得到支持之前，使用它还需要几年时间吗？

由于浏览器公司合作创建新 CSS 的方式发生了变化，因此 对 CSS Grid 的广泛支持 将以前所未有的速度到来。Mozilla 将首先在 3 月 7 日的 Firefox 52 中提供支持。Chrome 57 将在一周后的 3 月 14 日支持 Grid。Safari 10.1 将提供对 Grid 的支持；它目前处于测试阶段。Internet Explorer 10 和 11 已经支持规范的早期版本，但需要使用 -ms 前缀。（您可以利用它，也可以不利用它。在决定之前，请 了解详细信息。）MS Edge 也支持规范的原始草稿，未来将更新到当前规范。

您可以在今天发布使用 CSS Grid 的网站，即使并非所有用户都使用支持 CSS Grid 的浏览器，方法是仔细考虑代码结构并计划在所有浏览器中发生的情况。 功能查询 是确保所有用户在您的网站上获得良好体验的关键工具。

Async 函数和 await 关键字

Firefox 52 还包括来自 ES2017 的一项全新的 JavaScript 功能：异步函数及其配套的 await 运算符。Async 函数建立在 ES2015 Promises 的基础之上，允许作者以类似于编写同步等价物的方式编写异步代码。

以下示例使用一个异步请求的结果，并将其一部分用作第二个异步函数的参数。以下是使用传统的回调方法的示例

function loadProfile() {
  getUser(function (err, user) {
    if (err) {
      handleError(err);
    } else {
      getProfile(user.id, function (err, profile) {
        if (err) {
          handleError(err)
        } else {      
          displayProfile(profile);
        }
      });      
    }
  });
}

相对简单，但如果我们需要进行额外的处理和异步请求，嵌套级别或回调函数序列可能会变得难以管理。此外，对于更复杂的回调序列，确定代码流可能会变得困难，从而导致调试困难。
ES2015 中引入的 Promises 允许以更紧凑的方式表示相同的流程

function loadProfile() {
  getUser()
    .then(function (user) {
      return getProfile(user.id);
    })
    .then(displayProfile)
    .catch(handleError);
}

Promises 擅长简化这些顺序方法序列。在此示例中，函数不再将函数传递给 getUser 和 getProfile，而是返回一个 Promise，当函数的结果可用时，该 Promise 将被解析。但是，当需要进行额外的处理或条件调用时，嵌套仍然可能变得非常深，并且控制流可能再次难以跟踪。
Async 函数允许我们重写示例以类似于我们编写同步等价物的方式，而不会像同步代码那样阻塞线程！

async function loadProfile() {
  try {
    let user = await getUser();
    displayProfile(await getProfile(user.id));    
  } catch (err) {
    handleError(err);
  }
}

函数前面的 async 关键字告诉 JS 引擎以下函数可以被异步请求暂停，并且函数的结果将是一个 Promise。每次我们需要等待异步结果时，我们都使用 await 关键字。这将暂停函数的执行，而不会阻止其他函数运行。此外，getUser 和 getProfile 不需要像在 Promise 示例中那样进行更改。
Async 函数并不是解决复杂控制流的万能药，但对于许多情况，它们可以简化 async 代码的编写和维护，而无需导入代价高昂的库。要了解更多信息，请参阅 async 和 await MDN 文档。

响应式设计模式

除了上面描述的 Grid 检查器之外，Firefox 现在还包括一个改进的响应式设计模式 (RDM)。改进的 RDM 工具可以进行网络限流，模拟移动用户主要体验的各种连接速度。此外，还提供了各种屏幕尺寸和像素密度模拟，以供常见设备使用。许多功能在 介绍 RDM 的早期文章 中进行了描述。目前，仅当 e10s 也 在浏览器中启用 时，此功能才会启用。请务必阅读 MDN 上有关 RDM 的完整 文档。

更多 Firefox 52 的优势

这些是我们为 Firefox 52 中的浏览器带来的改变游戏规则的功能的一些亮点。要查看所有发布更改的详细列表，包括用于识别自动生成的空白的功能以及检测不安全密码字段的功能，请参阅 Firefox 52 发行说明。