以下是您有必要知道的信息:
WebTransport
是在客户端和服务器之间发送实时消息的新选项。- 您可以使用功能检测来查看浏览器支持哪些类型的脚本。
- 从头搜索数组会稍微简单一些。
- 还有许多更多内容。
新年快乐!我是 Pete LePage。我们一起来深入了解 Chrome 97 为开发者带来了哪些新功能
网络传输
如果您使用 Web Sockets 或 WebRTC Data Channel API 在服务器和页面之间发送消息,则可以使用一个新选项。WebTransport
是一个提供低延迟客户端-服务器消息传递的新 API。
它的延迟比 WebSocket 更低,而且与专为点对点消息传递设计的 RTC Data Channel API 不同,Web Transport API 是专为客户端-服务器消息传递而设计的。
它支持通过其数据流 API 可靠地发送数据,通过其数据报 API 则不可靠地发送数据。Web Worker 也支持此功能。由于它公开了与 Streams 兼容的接口,因此支持针对背压进行优化。
若要使用它,您需要一台支持 HTTP/3 的服务器,这通常比设置和维护 WebRTC 服务器更容易。打开一个新的 WebTransport
实例,等待其连接,然后您就可以开始发送数据了。
const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);
如需了解完整详情,请查看 web.dev 上的使用 WebTransport 进行实验一文。
脚本类型功能检测
现在,我们可以使用 nomodule
属性检测对浏览器中的 JavaScript 模块的支持。但是,流水线中还有几个新的功能提案,如导入映射、推测规则和软件包预加载。我们需要了解浏览器支持哪些功能。
输入 HTMLScriptElement.supports()
。您可以使用它来确定可以使用哪些类型的脚本,然后向浏览器发送最佳选项。
if (HTMLScriptElement.supports('importmap')) {
// Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
// Use <script type="module" ...>
} else {
// Use classic method...
}
新的数组原型
我喜欢 JavaScript 变得更轻松了。Array
和 TypedArray
现在支持 findLast()
和 findLastIndex()
静态方法。
这些函数实际上与 find()
和 findIndex()
相同,只不过是从数组末尾搜索,而不是从开头搜索。
例如,如需查找大于 10 的数组中的最后一个数字,请使用测试函数调用 findLast()
,该函数会检查值是否大于 10,这样就大功告成了。
const array1 = [5, 12, 8, 130, 44, 3, 6];
function greaterThanTen(val) {
return val > 10;
}
const last = array1.findLast(greaterThanTen);
// 44
const lIdx = array1.findLastIndex(greaterThanTen);
// 4
在 UA 字符串中模拟 Chrome 100
几个月后,我们将达到 Chrome 100(一个三位数的版本号)。 您应检查任何用于检查版本号或解析 UA 字符串的代码,以确保它可以处理三位数。
有一个名为 #force-major-version-to-100
的标志,可将当前版本号更改为 100,以确保一切按预期运行。
还有更多其他奖励!
当然还有很多。
表单条目中的新行现在按照与 Gecko 和 WebKit 相同的方式进行标准化,从而改善浏览器之间的互操作性。
我们对客户端提示名称进行了标准化,方法是在名称前添加 sec-ch
作为前缀。例如,将 dpr
更改为 sec-ch-dpr
。我们将继续支持这些提示的现有版本,但您应该为最终弃用和移除这些提示做好规划。
关闭的 <details>
元素现在可以搜索并且可以链接。当您使用在页面中查找时、使用 ScrollToTextFragment
和元素 fragment 导航时,这些隐藏元素将自动展开。
深入阅读
这仅涵盖了部分重要的亮点。如需了解 Chrome 97 中的其他变化,请访问以下链接。
- Chrome 开发者工具的新变化 (97)
- Chrome 97 弃用和移除
- Chrome 97 的 ChromeStatus.com 更新
- Chrome 97 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需及时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage