6 月,Chrome 团队宣布 Chrome 52 进入 Beta 通道,Chrome 52 给我们带来了哪些新的特性呢?
CSS 容器封闭
网页的交互体验一直是网页的基石,但是随着网页的复杂,页面的渲染时间也随之增加。为了加快网页渲染速度,Chrome 采用增量渲染网页上被修改的部分,既网页元素动态修改之后,Chrome 只会渲染受影响部分而非整个网页。但是,由于页面元素可以通过 CSS 设置将其展示在父容器之外,这意味了一个元素的改变可能会影响页面的任何位置。因此 Chrome 的增量渲染也需要考虑此因素,这可能会大大增加需要重新渲染的元素数量。
在新版本中,Chrome 增加了对 contain 属性的支持,该属性允许开发者阻止元素内容超出元素的边界。此时,当该元素被修改时,Chrome 在渲染时会忽略该在该元素父节点以外的元素,以提高渲染速度。
性能观察API
对于网页应用来说,收集真实用户打开页面的时间,可以进行性能问题诊断,提升用户体验。之前开发者可以通过Chrome 开发者工具查看本地访问的时间,但是无法用来获取真实用户打开网页的耗时。最新版本的Chrome 支持了性能观察API ,使得开发者可以方便的收集真实用户度量数据。
性能观察API 相比于性能时间线API(Performance Timeline),开发者可以声明和注册自己关心的度量指标,而无需轮训更新结果。
Service Worker API 支持流响应
流响应可以让浏览器在整个 HTML 传输过程中就逐步开始渲染。这对于大型网页非常有效,能够加快渲染速度,同时提高用户体验。新版的 Chrome 对于 Service Worker API 做了提升,使其也能够支持流响应。网页可以使用 Streams API 通过传入 ReadableStream 对象构造一个支持流读取的 Response 对象,这样就可以流式处理从服务器端传输过来的数据了。
网页推送协议支持 VAPID
消息推送API 的使用,将网页应用的体验提升了一次层次。但是开发者需要为消息推送设置专有推送消息,并且可能需要为不同浏览器定制不同的API。Chrome 现在支持 VAPID (Voluntary Application Server Identification,自主应用服务器标识),它是一种为站点和网页之间推送协议增加授权的开源标准。
其他特性
- 当显示模态对话框时,Chrome 将停止动画;
- 新增对 Alternative Services 的支持,客户端可以增加额外的来源(origins),以简化协议升级等交互;
- ImageBitmaps 对象可以在构造时使用 ImageBitmapOptions 对象而简化构造流程。
- 页面上可以通过 ImageBitmap.close() 函数释放 ImageBitmap 占用的内存。
- 在跨域 iframe 中,触摸手势将不会触发弹出框,除非关联了一个 tap 事件,以避免滚屏时意外触发弹出框。
- Android 版本的 Chrome 中,只有安全的源才能创建和删除含有安全标识的 Cookie 。
- 最新版本的 Chrome 支持 meter 元素使用 -webkit-appearance:none 样式,以清除默认样式,更好的支持该元素的自定义样式。
- 内容安全策略(Content Security Policy,CSP)的 unsafe-dynamic 表达式支持单次使用或者基于散列表的白名单,以验证 JavaScript 脚本,使得防止跨站攻击变得容易。
- Fetch API 支持为 Request 对象设置 referer 策略。
详细变更参见提交日志。
感谢韩婷对本文的审校。
给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ , @丁晓昀),微信(微信号: InfoQChina )关注我们。
评论