开发者模式performance没有值_新版Chrome给开发者带来了什么惊喜？

稳定版Chrome 78已于2019年10月22日发布。

很少有用户会注意到变化，但是对于web开发人员来说，有一些令人兴奋的新特性！

CSS opacity percentage（CSS透明度支持使用百分比直接配置）

当前Opacity属性接受一个介于0（完全透明）到1（完全不透明）之间的值。Chrome 78将支持0%到100%之间的百分数写法，如：

.style1 { opactity: 0.75; }/* 等价于 */.style2 { opacity: 75%; } /* 新支持写法 */

这使css使用上增强了一致性，因为rgba()函数已经接受了百分比作为参数，例如：

rgba(100, 150, 200, 75%)

百分比也可用于SVG属性：stop-opacity, fill-opacity, stroke-opacity和 shape-image-threshold 中设置不透明度。

JavaScript optional chaining（JS可选链操作符）

可选链是一个ES2019的建议，将提高您的编码和调试的效率！假设，你在ajax请求REST API调用后返回的对象如下：

let user = {firstname: 'Imaginary',lastname: 'Person',address: {street1: '123 Madeup Street',street2: '',city: 'Nowhereville',country: 'Antarctica'}};// output "Antarctica"console.log(user.address.country);

如果没有返回country的值怎么办？javascript将返回 undefined。

更不幸的是，如果没有返回address或user对象，情况会更糟——代码将引发错误并阻止之后的javascript代码运行，也就意味着你的代码抛红了！

为此，您的代码必须检查每个父属性的存在：

let country = (user && user.address && user.address.country) || undefined;console.log(country);

或者更丑陋的代码：

let country =(user ?(user.address ?(user.address.country ?user.address.country : undefined) :undefined) :undefined);console.log(country);

Chrome78中的可选链式允许更帅气的方式，使用 “?” 链接运算符：

let country = user?.address?.country;

使用这种方法，javascript没有抛出错误，而是将country变量设置为undefined，如果任何值为null或undefined等，之后调用的方法或属性也不会有报错的风险。如使用length属性时：

let countryLength = user?.address?.country?.length;

虽然可选链操作符非常实用，但目前没有其他浏览器，包括node.js允许使用这种语法。在各大浏览器厂商广泛支持之前，Babel插件将是你的不二之选。

Internationalization API updates（国际化API有了更新）

Intl对象提供了对特定区域设置的字符串比较、数字格式、日期和时间格式，这在国际化中尤其重要。该API在浏览器上有合理的支持，并且会出现在之后的node.js版本中。看看这个例子：

// set date to 31 December 2020let date = new Date(2020, 11, 31);// 输出中文习惯格式 - 2020/12/31console.log( new Intl.DateTimeFormat('zh-CN').format(date) );// outputs US date format - 12/31/2020console.log( new Intl.DateTimeFormat('en-US').format(date) );// outputs UK date format - 31/12/2020console.log( new Intl.DateTimeFormat('en-GB').format(date) );// set numberlet number = 12345.67;// output US number format - 12,345.67console.log( new Intl.NumberFormat('en-US').format(number) );// output German number format - 12.345,67console.log( new Intl.NumberFormat('de-DE').format(number) );

Datetimeformat和Numberformat接受可选的options作为第二个参数。chrome 78为使用两个或更多日历或编号系统的区域设置添加日历和编号系统选项。

Dark pattern restrictions（暗模式）

当用户离开页面时，将触发“unload”事件：

window.addEventListener('unload', () => {// do something when the user leaves the page});

类似可以被注册的事件还有：

beforeunload–文档可见并即将卸载，但事件仍然可以取消

pagehide–浏览器正在跳转到会话历史记录中的其他页面，例如，单击“上一步”按钮

visibilitychange–用户切换到当前选项卡或从当前选项卡切换

通常，这些事件可用于检查已保存的数据或记录使用情况分析。

不幸的是，一些不尽责的开发人员可能会添加代码来损害用户体验。从78版开始，Chrome将不允许：

1.同步ajax请求–这可以在AllowSyncXHRInPageDismissal策略标志中重写，但在版本82中也将删除该标志;

2.Popup Generation with window.open() – 弹出窗口阻止程序通常会阻止此操作，但现在即使阻止程序处于非活动状态也禁止此操作。

Independent scroll offsets（滚轮偏移修正）

在Chrome78之前，window.scrollTo()方法和scrollTop和scrollLeft等滚动属性将计算最近的物理像素。例如，在double pixel密度设备（设备像素比率 PixelRatio为2）上，window.scrollTo(0,123.678)将等于123.5。

在chrome 78中，传递的实际值将被返回（123.678），而不考虑物理像素。这将有助于防止滚动计算问题，特别是当页面被缩放时。

User Timing Level 3（性能监控报告优化）

用户计时API允许开发人员通过创建自定义时间戳来度量应用程序性能。命名的性能标记是在整个代码的关键点上创建的，例如。

performance.mark('markstart');// ...processing...performance.mark('markend');

然后，性能度量可以报告两个标记之间的持续时间，例如。

performance.measure('m1', 'markstart', 'markend');performance.getEntriesByName('m1');/*Returns something like:(1) [...]0: PerformanceMeasureduration: 5153entryType: "measure"name: "m1"startTime: 7314*/

User Timing Level 3允许开发人员将自定义的时间戳和任意元数据传递给性能标记和度量方法进行记录。

Payment API updates

这一部分是关于谷歌支付的更新，鉴于国情，此处不再过多赘述

WebSocketStream

WebSocket API在浏览器和服务器之间创建了一个双向通信通道。任何一个设备都可以在任何时候发送消息，因此该技术通常用于聊天室、多人游戏和实时数据更新。

不幸的是，消息到达的速度比浏览器能够处理的要快。在这些情况下，内存缓冲区可能会溢出，或者CPU使用量会增加到浏览器无响应的程度。

WebSocketStream取代WebSocket API。它是基于承诺的，集成了流传输，因此在收到完整消息之前可以解析大部分数据。

这个API是新增的、实验性的，在成为w3c标准之前可能会改变或被放弃。有关更多信息，请参阅解释的WebSocketStream Explained.。

Media element seekto event

HTML audio和video媒体元素注册许多事件，例如：

play – 在视频自动启动或暂停后恢复播放时触发

timeupate – 播放时间已更改

volumechange – 卷已更改

chrome 78引入了一个新的seekto操作处理程序，当回放移动到时间轴上的特定点时调用它。这可以用于进行dom更改、记录分析等。截止发稿时，其他浏览器还不能支持改功能。

Screen Enumeration API

屏幕枚举API提供有关连接到用户设备的显示器信息。它通常在应用程序可以使用多个监视器的情况下非常有用，例如，提供PPT和演讲稿形式的演示文稿。

目前没有可用的文档，但它将与新的Window Placement API一起使用。

Native File System API

Native File System API允许浏览器直接与用户本地设备上选择的文件进行交互。它可以用javascript编辑来自客户端的照片、视频或文本文档，而不需要上传和下载过程。

chrome 78提供了一个早期版本的API供试用，开发人员必须从google注册一个令牌才能使用。

SMS Receiver API

短信通常用于验证号码或发送一次性密码（OTP）代码。原生APP可以拦截、读取和响应这些消息，但web应用程序用户必须手动复制/粘贴或重新键入该信息。

新的 SMS Receiver API 允许web应用程序读取使用特定格式发送给它们的sms消息，无需手动输入，例如

Your OTP is: 123ABCFor: https://example.com/verify?otp=123ABC&hash=9B3FF1C2// javascript获取123ABCif (navigator.sms) {try {let { content } = await navigator.sms.receive();console.log('SMS text:', content);} catch (e) {console.log('error', e);}}

其它更新内容

如果你还想了解更多，还可以使用一些小的和实验性的功能：

输入和文本区域的默认颜色::placeholder 占位符文本已从757575更改为rgba(0，0，0，0.54)；

现在，即使主Service worker脚本未被修改，也会在用 importScripts() 导入脚本时检查是否有更新；

javascript可以调用registerProperty() 函数来注册类型化和可设置动画的自定义css属性（新Houdini API的一部分）；

WebAssembly 模块可以保存对javascript和dom对象的引用。它们可以作为参数传递，存储在locals、globals或webassembly.table对象中；

新的WebHID (Human Interface Device) API （人机界面设备）支持键盘、鼠标、触摸屏和游戏手柄等输入和输出设备。本质上，它允许用javascript实现低版本设备的特定逻辑，而不依赖浏览器支持；

XSS Auditor已被删除。

激动人心的时刻即将来临

令人倍受鼓舞的是，尽管Chrome浏览器在市场上占据了垄断地位，但它仍在不断创新。

虽然很多新功能很吸引人，但其中许都是实验性的，可能会在发版时发生根本性的变化，甚至消失，或者永远不会在其他浏览器中得到支持。但这些实验是促进浏览器积极发展的，不过，小心不要把你所有的宝都压在谷歌Chrome团队的突发奇想上！

作者：Craig Buckler 2019.10.10

翻译：North 2019.10.15

原文链接：https://blog.logrocket.com/whats-new-in-chrome-78/