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自定义标签的界面给用户。
已废止使用的功能和互用性改良
Blink > Bindings
- 为了增进与其它部分之间的互用性,实例属性是Promise类型的话,现在会返回一个被拒绝的promise实例,而不是抛出一个异常。
Blink > CSS
- 在CSS动态配置文件里,之前用
/deep/
或>>>
,以及::shadow
伪类来选择范围,这些方法现在 都被 移除了。它们在Chrome 45版中已经 废除,现在照旧。
Blink > DOM
- 为了增强与其它部分之间的互用性,HTMLAllCollection,HTMLCollection,HTMLFormControlsCollection和HTMLOptionsCollection不再是可枚举的类型了,所以不能用于
Object.keys()
函数,也不能用于循环语句了。
往期精选文章 |
---|
使用虚拟dom和JavaScript构建完全响应式的UI框架 |
扩展 Vue 组件 |
使用Three.js制作酷炫无比的无穷隧道特效 |
一个治愈JavaScript疲劳的学习计划 |
全栈工程师技能大全 |
WEB前端性能优化常见方法 |
一小时内搭建一个全栈Web应用框架 |
干货:CSS 专业技巧 |
四步实现React页面过渡动画效果 |
让你分分钟理解 JavaScript 闭包 |
小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。
- 【LEETCODE】模拟面试-215. Kth Largest Element in an Array
- Docker系列教程15-Docker容器网络
- 数据挖掘
- Docker系列教程14-Docker数据持久化
- Docker 学习系列二之基本管理
- Docker系列教程13-Docker可视化管理工具
- Ubuntu 16.04 安装VNC
- 使用Feign实现Form表单提交
- Ubuntu 16.04 Install OpenCV
- Spring Cloud各组件调优参数
- 手把手教你设置 IntelliJ IDEA 的彩色代码主题
- 实用技巧:Hystrix传播ThreadLocal对象(两种方案)
- OpenDaylight与Mininet应用实战之流表操作
- 使用Spring Cloud Feign上传文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android 设置wallpaper的操作方法
- R语言作图不显示中文解决办法,如何使用中文字体
- Android OKHTTP的单例和再封装的实例
- Android 自定义返回按钮的实例详解
- Android在layout xml中使用ViewStub完成动态加载问题
- Android编程中Intent实现页面跳转功能详解
- Android编程之桌面小部件AppWidgetProvider用法示例
- Android编程实现悬浮窗获取并显示当前内存使用量的方法
- Android ListView中动态添加RaidoButton的实例详解
- Android沉浸式状态栏设计的实例代码
- Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法
- R语言使用bootstrap和增量法计算广义线性模型(GLM)预测置信区间
- Android 中两个Activity 之间的传值问题
- 学习使用Material Design控件(二)使用DrawerLayout实现侧滑菜单栏效果
- Android Spinner列表选择框的应用