每周平台新闻：改善慢速连接的 UX、一个编写 alt 文本的技巧以及 HTML loading 属性的 polyfill

在本周的总结中，我们将讨论如何判断慢速连接、我们在图像的 alt 文本中应该放些什么以及一个针对 HTML loading 属性的新 polyfill，以及更多内容。

检测慢速连接的用户

Algolia 正在使用网络信息 API（参见 API 的 Chrome 状态页面）来检测慢速连接的用户（大约 9% 的用户），并进行以下调整以确保良好的用户体验

当用户执行搜索查询时增加请求超时（静态超时会导致慢速连接的用户出现误报）
在用户等待搜索结果时向用户显示通知（例如，“您正在使用慢速连接。这可能需要一段时间。”）
请求更少的搜索结果以减少总响应大小
对查询进行去抖动（例如，不要在每次按键时发送查询）

navigator.connection.addEventListener("change", () =&gt; {
  // effective round-trip time estimate in ms
  let rtt = navigator.connection.rtt;

  // effective connection type
  let effectiveType = navigator.connection.effectiveType;

  if (rtt &gt; 500 || effectiveType.includes("2g")) {
    // slow connection
  }
});

（通过 Jonas Badalic）

alt 文本应该传达主要要点

关键在于描述您希望受众从图像中获得什么，而不是简单地描述图像是什么。

<!-- BEFORE -->
<img alt="Graph showing the use of the phrase " who="" you="" gonna="" call?"="" in="" popular="" media="" over="" time."="">

<!-- AFTER -->
<img alt="Graph illustrating an 800% increase in the use
          of the phrase " who="" you="" gonna="" call?"="" in="" popular="" media="" after="" the="" release="" of="" ghostbusters="" on="" june="" 7th,="" 1984."="">

（通过 Caitlin Cashin）

其他新闻…

有一个用于 HTML loading 属性 的新 polyfill，它通过将您想要延迟加载的图像和 iframe 包裹在中来使用。
微信，拥有超过十亿月活跃用户的 中国多功能应用程序，托管着超过一百万个“小程序”，这些小程序的构建方式与 Web 应用程序非常相似（本质上是 CSS 和 JavaScript）（通过 Thomas Steiner）。
Microsoft 在 Edge 预览版中为语音合成 API 提供了来自 21 种不同语言的 24 种新（在线）语音（“这些语音是 今天最自然的声音”）（通过 Scott Low）。

在我的新的每周 周日版 中阅读更多新闻。访问 webplatform.news 获取更多信息。

检测慢速连接的用户

alt 文本应该传达主要要点

其他新闻…

评论