Chrome浏览器63版测试版新特性

时间:2022-06-19
本文章向大家介绍Chrome浏览器63版测试版新特性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

以下描述的变化适用于测试版通道发布的安卓系统、Chrome OS系统、苹果系统和Windows系统上最新版的Chrome浏览器,注明除外。

动态模块导入(Dynamic module imports)

目前的版本里,导入JavaScript模块的过程是完全静态的,开发人员不能根据用户登录与否等实时状况来进行导入。从这次发布的版本开始,有了 import(specifier)导入(区分符)句法。它让开发人员能实时地、动态地加载代码到模块和脚本中去。这个功能可以用来延迟加载某些需要时才加载的脚本,这样提高了程序的性能。

button.addEventListener('click', event => {
   import('./dialogBox.js')
   .then(dialogBox => {
       dialogBox.open();
   })
   .catch(error => {
       / _错误处理_ /
   });
});

上面这段代码就是一个例子,演示了使用 import(specifier)函数时,如何在某个事件发生后导入JavaScript。

异步迭代器和生成器(Async iterators and generators)

使用异步函数时,不管做什么类型的迭代处理,代码写出来都可能有点不美观。新版本现在有了异步生成函数(async generator functions),它使用异步迭代(async iteration) 协议,有助于开发人员精简流数据源的消化或实现。异步迭代器可以用在循环语句中,也可以通过异步迭代器工厂创建自定义异步迭代器。

async function* getChunkSizes(url) {
 const response = await fetch(url);

 for await (const chunk of streamAsyncIterator(response.body)) {
   yield chunk.length;
 }
}

上面的码例显示了抓取流数据时,如何使用异步迭代器运行 streamAsyncIterator函数,写出更简洁的代码。

设备内存API接口(Device Memory API)

用户能否在所有设备上都有相同的体验,这对开发人员来说是一大挑战,因为各个设备的性能功能都有差异。新的设备内存JavaScript API接口能凭借用户设备上的RAM内存总量,对设备性能的局限性有一定了解,帮助开发人员面对这个挑战,使他们能配合这些硬件上的限制因素,实时调整内容。比如对低端设备,开发人员可以提供一个“精简版“程序,这样用户体验更好,更称心。透过设备内存这个视角,设备内存API接口也为性能试题添加了语境,比如某个任务JavaScript完成所花的时间。

访问权限界面的变化

网站需要特殊权限时,就会发出一个权限请求。目前在安卓系统的Chrome浏览器上,权限请求只出现在屏幕下方的一个横条里,不理也没关系。而开发人员设计这种请求时,经常不考虑其出现时的情景,还有用户是不是了解语境才允许权限请求的。所以,这种提示在体验过程中只会造成用户分心,而且超过百分之九十的时间里,用户对这种请求提示要么完全无视要么暂时取消。

Chrome浏览器59版开始解决这个问题,方法是如果用户三次取消这个请求,就会暂时中断访问权限。安卓系统上发布的这一新版本又进了一步,把这种权限请求做成了一个模式对话框,呈现给用户。有了这个变化,用户更有可能接受或拒绝,而非暂时取消或反复无视,这种可能性提高了五倍。为了保证用户明白权限请求是怎么回事,开发者应该让权限请求出现在合适的时间,因为根据我们的发现,如果站点要求权限时提供了语境,那么用户接受请求的可能性会提高2.5倍。

这次发布的其他特点

Blink渲染引擎 > 绑定(Bindings)

  • 添加侦听器函数( EventTarget.addEventListener)和删除侦听器函数( removeEventListener)的参数都包括一个回调函数。为了增进互用性,如果收到的回调函数类型不是事件侦听器( EventListener),或者类型是 null、未定义 undefined时,新版本会抛出一个类型错误( TypeError)。

Blink渲染引擎 > CSS样式

  • 利用Q这个新的长度单位,开发人员现在可以进行像素级别上的调整,这在较小的视点上特别有用。
  • 开发人员现在可以禁止程序使用Chrome的下拉刷新功能,也可以用过卷屏行为(overscroll-behavior)制作自定义效果,一旦浏览器滚动条滚到极限,浏览器就会有不一样的动作。

Blink渲染引擎 > 字体

  • 新版本支持东亚语言字体及变体(font-variant-east-asian),让开发人员能控制交替字形的运用(alternate glyphs),以此显示如日语和中文等东亚语言。

Blink渲染引擎 > HTML

  • 为了增进互用性,作为HTML页面打印标准的一部分,打印前( beforeprint)事件与打印后( afterprint)事件这两种新事件会在新版Chrome上发动,使开发人员能给打印的拷贝加上注释,并在打印命令执行完毕后编辑注释。

Blink渲染引擎 > JavaScript

  • 现在Promise对象有了新的 Promise.prototype.finally函数。这是一个回调函数,注册了之后,就可以在一个Promise得到满足或遭到拒绝时触发。
  • 有了国际复数规则( Intl.PluralRules)这个API接口,开发人员能指明哪种复数形式应用于给定的数字和语言,凭借这一点,构建出的程序能理解某种语言的复数概念。

Blink渲染引擎 > 媒体流(MediaStream)

  • 此版本支持一个新功能,那就是本地视频的媒体流轨道(MediaStreamTracks)也能应用媒体流轨道的 MediaStreamTrack.applyConstraints()函数。这包括 getUserMedia()或截屏截来的媒体流轨道。

Blink渲染引擎 > 网络

  • 版本2的NT LAN Manager (NTLM) API接口现在已经封装在浏览器内,让应用程序能验证远程用户的身份,并在程序发出请求时提供会话安全。

Blink渲染引擎 > 感应器(Sensor)

  • 关于感应器,感谢英特尔工程师作出的贡献,现在已经有了一个起点试用品。它通过新的一般感应器API接口句法,为下列感应器提供了对外接口:加速表(Accelerometer)、线性加速感应器(LinearAccelerationSensor)、旋转范围(Gyroscope)、绝对方向感应器(AbsoluteOrientationSensor)和相对方向感应器(RelativeOrientationSensor)。

Blink渲染引擎 > 存储(Storage)

  • 本地存储(localStorage)和会话存储(sessionStorage)的API接口不再使用匿名的getter函数了,现在它用 getItem()函数来获取数据,所以如果用 getItem()函数来进行键搜索,会得到 null结果而,不是未定义 undefined。感谢英特尔对此做出的贡献!
  • 为了改善开发人员的使用体验,处理会话存储(sessionStorage)和本地存储(localStorage)的方法现在都是可枚举的,如 getItem()函数, removeItem()函数,和 clear()函数。谢谢英特尔使之成真!

界面 > 浏览器> 移动设备(安卓系统)(Android)

  • 样式中的display: minimal-ui规则现已由Chrome安卓版支持,开发人员能显示一个类似Chrome自定义标签的界面给用户。

已废止使用的功能和互用性改良

  • 为了增进与其它部分之间的互用性,实例属性是Promise类型的话,现在会返回一个被拒绝的promise实例,而不是抛出一个异常。
  • 在CSS动态配置文件里,之前用 /deep/>>>,以及 ::shadow伪类来选择范围,这些方法现在 都被 移除了。它们在Chrome 45版中已经 废除,现在照旧。
  • 为了增强与其它部分之间的互用性,HTMLAllCollection,HTMLCollection,HTMLFormControlsCollection和HTMLOptionsCollection不再是可枚举的类型了,所以不能用于 Object.keys()函数,也不能用于循环语句了。

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。