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)关注我们。

Chrome 52的变化相关推荐

  1. Chrome与chromedriver版本对应

    我的个人博客:zhang0peter的个人博客 注意:如果你的Linux 的CPU是ARM架构的,可以直接安装chromedriver apt install chromium-chromedrive ...

  2. chromedriver与chrome各版本及下载地址,截止到2018.5.30

    下载地址 https://chromedriver.storage.googleapis.com/index.html 官网2.3.9版本打开后点击notes.txt文件打开后看到 对应版本 ---- ...

  3. Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)

    本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...

  4. chrome automation extension崩溃(selenium +chromedriver)

    chrome_options = webdriver.ChromeOptions() chrome_options.add_argument("–no-sandbox");//划重 ...

  5. babel从入门到入门

    博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3.babel转译器 4.babel的使用 5.常见的几种babel转译器和插件 6.babel最常见配置选项 7.babe ...

  6. Redis数据“丢失”问题

    from: https://zhuoroger.github.io/2016/08/14/redis-data-loss/?hmsr=toutiao.io&utm_medium=toutiao ...

  7. 爬虫教程( 2 ) --- 爬虫框架 Scrapy、Scrapy 实战

    From:https://piaosanlang.gitbooks.io/spiders/content/ scrapy-cookbook :https://scrapy-cookbook.readt ...

  8. scrapy爬取天气存MySQL_Scrapy实战篇(五)之爬取历史天气数据

    本篇文章我们以抓取历史天气数据为例,简单说明数据抓取的两种方式: 1.一般简单或者较小量的数据需求,我们以requests(selenum)+beautiful的方式抓取数据 2.当我们需要的数据量较 ...

  9. BOM操作及DOM表单案例练习

    BOM BOM是什么 BOM的全称为Browser Object Model,被译为浏览器对象模型. BCM提供了独立于HTML页面内容,而与浏览器相关的一系列对象.主要被用于管理浏览器窗口及 与浏览 ...

最新文章

  1. 第二十七课.深度强化学习(二)
  2. 机器视觉:Asymmetry Problem in Computer Vision
  3. azure_Azure ML算法备忘单
  4. 爬虫练习:爬豆瓣读书的短评
  5. c语言强化训练作业整理1
  6. 经典面试题(三):ASP.NET部分----ASP.NET 页面之间传递值的几种方式
  7. vs visual stdio 调试 显示指针为数组
  8. OV摄像头SCCB通信协议
  9. iOS通过点坐标获取js对应元素
  10. arpa/inet.h中定义的函数
  11. 在Visualforce页面中使用Visual Flow
  12. 网关支付、银联代扣通道、快捷支付、银行卡支付分别是怎么样进行支付的?...
  13. ZT[记那对住在我隔壁储藏室的大学刚毕业的小夫妻]
  14. Ryzen平台下内存超频与内存时序
  15. html标点符号在首页,HTML常用的特殊符号前端使用的标点符号
  16. 百度热点排行榜 ---JS
  17. 计算机原始时代到现在著名的黑客
  18. 界门纲目科属种的英文——学生物的基础
  19. 自律给我自由 2017.8.9   心情很好   天气很好
  20. ChatGPT实现代码生成

热门文章

  1. nodejs template
  2. iTunes,一个不断侵蚀C盘的大虫
  3. 如何从SQL Server查找指定的临时表
  4. 微软 Exchange Autodiscover 协议存bug,数十万域凭据可遭泄露
  5. 微软公开PrintNightmare系列第3枚无补丁0day,谷歌修复第8枚已遭利用0day
  6. 看我如何发现开源 WAF引擎ModSecurity 中的DoS 漏洞
  7. 解决在使用CSS3制作不间断轮播图中 收尾连接后Interval 延时问题
  8. 比特币里面有哪些天才的设计?
  9. DCOS Virtual Networks
  10. Skype for business server 2015和PSTN集成后,无法完成呼叫