如今，设备可连接到网络的功能比以往任何时候都要多。向高端桌面设备提供的同一 Web 应用也可以提供给低功耗手机、手表或平板电脑，而打造可在任何设备上无缝运行的令人惊叹的体验可能非常具有挑战性。
Device Memory API 是一项新的网络平台功能，旨在帮助 Web 开发者处理现代设备景观。它会向 navigator 对象添加一个只读属性 navigator.deviceMemory，该属性会返回设备具有的 RAM 大小（以 GB 为单位），并以四舍五入为最接近的二次方。该 API 还提供一个客户端提示标头 Device-Memory，用于报告相同的值。
Device Memory API 使开发者能够执行以下两项主要操作：
- 在运行时根据返回的设备内存值决定要提供哪些资源（例如，向低内存设备的用户提供应用的“精简版”）。
- 向分析服务报告此值，以便您可以更好地了解设备内存与用户行为、转化次数或对您的业务至关重要的其他指标之间的关系。
根据设备内存动态定制内容
如果您运行自己的网络服务器并且能够修改提供资源的逻辑，则可以有条件地响应包含 Device-Memory Client Hints 标头的请求。
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
使用此方法，您可以创建一个或多个版本的应用脚本，并根据 Device-Memory 标头中设置的值有条件地响应来自客户端的请求。这两个版本不需要包含完全不同的代码（因为维护起来更困难）。大多数情况下，“精简”版本只会排除可能昂贵且对用户体验不重要的功能。
使用 Client Hints 标头
如需启用 Device-Memory 标头，请将 Client Hints <meta> 标记添加到文档的 <head>：
<meta http-equiv="Accept-CH" content="Device-Memory">
或者在服务器的 Accept-CH 响应标头中添加“Device-Memory”：
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
这会告知浏览器发送 Device-Memory 标头以及当前页面的所有子资源请求。
换言之，一旦您为网站实现了上述某个方案，如果用户在 RAM 为 0.5 GB 的设备上访问，则来自此页面的所有图片、CSS 和 JavaScript 请求都将包含值设为“0.5”的 Device-Memory 标头，您的服务器能够以您认为合适的方式响应此类请求。
例如，如果已设置 Device-Memory 标头且其值小于 1，则以下 Express 路由将传送脚本的“精简版”版本；如果浏览器不支持 Device-Memory 标头或值为 1 或更高，则此路由将传送“完整”版本：
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
使用 JavaScript API
在某些情况下（例如使用静态文件服务器或 CDN），您将无法根据 HTTP 标头有条件地响应请求。在这些情况下，您可以使用 JavaScript API 在 JavaScript 代码中发出条件请求。
以下逻辑与上面的 Express 路由类似，只不过前者会在客户端逻辑中动态确定脚本网址：
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
虽然根据设备功能有条件地提供同一组件的不同版本是一个很好的策略，但有时根本不提供组件会更好。
在许多情况下，组件只是增强功能。它们可为体验增添一些精彩，但对应用的核心功能而言并不是必需的。在这些情况下，明智的做法是从一开始就加载此类组件。如果某个旨在改善用户体验的组件使应用运行缓慢或无响应，则表示其未实现其目标。
您做出任何影响用户体验的决策时，衡量其影响至关重要。清楚了解应用目前的性能同样至关重要。
通过了解设备内存与当前版本应用用户行为的关系，您可以更好地确定需要采取的操作，并就将来更改是否成功提供基准。
使用分析工具跟踪设备内存
Device Memory API 是一项新功能，默认情况下，大多数分析服务提供商都不会对其进行跟踪。幸运的是，大多数分析服务提供商都提供了跟踪自定义数据的方法（例如，Google Analytics（分析）提供了一项名为自定义维度的功能），您可以使用该功能来跟踪用户设备的设备内存。
使用自定义设备内存维度
在 Google Analytics（分析）中使用自定义维度的过程分为两个步骤。
创建自定义维度时，应将其命名为“设备内存”，然后选择“会话”范围，因为该值在用户浏览会话过程中不会发生变化：
接下来，更新您的跟踪代码。如下面的示例所示。 请注意，对于不支持 Device Memory API 的浏览器，该维度值将为“(not set)”。
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
报告设备内存数据
一旦跟踪器对象的设备内存维度为 set，您发送到 Google Analytics（分析）的所有数据都将包含此值。这样，您就可以按设备内存对所需的任何指标（如网页加载时间、目标完成率等）进行细分，以查看是否存在任何关联。
由于设备内存是自定义维度而不是内置维度，因此您不会在任何标准报告中看到它。如需访问这些数据，您必须创建自定义报告。例如，按设备内存比较加载时间的自定义报告的配置可能如下所示：
它生成的报告可能如下所示：
收集设备内存数据并为用户针对各种内存范围的应用体验设定基准后，您就可以尝试为不同用户提供不同的资源（使用上一部分中介绍的技术）。之后，您可以查看结果，看看是否有改进。
总结
这篇博文概述了如何使用 Device Memory API 来根据用户设备的功能定制您的应用，并说明了如何衡量这些用户对应用的使用体验。
虽然这篇博文重点介绍的是 Device Memory API，但本文介绍的大多数技术都可用于任何报告设备功能或网络状况的 API。
随着设备格局持续扩大，Web 开发者在做出会影响用户体验的决策时，必须考虑所有用户的方方面面，这一点比以往任何时候都更加重要。