Chrome 52的变化
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的变化相关推荐
- Chrome与chromedriver版本对应
我的个人博客:zhang0peter的个人博客 注意:如果你的Linux 的CPU是ARM架构的,可以直接安装chromedriver apt install chromium-chromedrive ...
- chromedriver与chrome各版本及下载地址,截止到2018.5.30
下载地址 https://chromedriver.storage.googleapis.com/index.html 官网2.3.9版本打开后点击notes.txt文件打开后看到 对应版本 ---- ...
- Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...
- chrome automation extension崩溃(selenium +chromedriver)
chrome_options = webdriver.ChromeOptions() chrome_options.add_argument("–no-sandbox");//划重 ...
- babel从入门到入门
博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3.babel转译器 4.babel的使用 5.常见的几种babel转译器和插件 6.babel最常见配置选项 7.babe ...
- Redis数据“丢失”问题
from: https://zhuoroger.github.io/2016/08/14/redis-data-loss/?hmsr=toutiao.io&utm_medium=toutiao ...
- 爬虫教程( 2 ) --- 爬虫框架 Scrapy、Scrapy 实战
From:https://piaosanlang.gitbooks.io/spiders/content/ scrapy-cookbook :https://scrapy-cookbook.readt ...
- scrapy爬取天气存MySQL_Scrapy实战篇(五)之爬取历史天气数据
本篇文章我们以抓取历史天气数据为例,简单说明数据抓取的两种方式: 1.一般简单或者较小量的数据需求,我们以requests(selenum)+beautiful的方式抓取数据 2.当我们需要的数据量较 ...
- BOM操作及DOM表单案例练习
BOM BOM是什么 BOM的全称为Browser Object Model,被译为浏览器对象模型. BCM提供了独立于HTML页面内容,而与浏览器相关的一系列对象.主要被用于管理浏览器窗口及 与浏览 ...
最新文章
- 第二十七课.深度强化学习(二)
- 机器视觉:Asymmetry Problem in Computer Vision
- azure_Azure ML算法备忘单
- 爬虫练习:爬豆瓣读书的短评
- c语言强化训练作业整理1
- 经典面试题(三):ASP.NET部分----ASP.NET 页面之间传递值的几种方式
- vs visual stdio 调试 显示指针为数组
- OV摄像头SCCB通信协议
- iOS通过点坐标获取js对应元素
- arpa/inet.h中定义的函数
- 在Visualforce页面中使用Visual Flow
- 网关支付、银联代扣通道、快捷支付、银行卡支付分别是怎么样进行支付的?...
- ZT[记那对住在我隔壁储藏室的大学刚毕业的小夫妻]
- Ryzen平台下内存超频与内存时序
- html标点符号在首页,HTML常用的特殊符号前端使用的标点符号
- 百度热点排行榜 ---JS
- 计算机原始时代到现在著名的黑客
- 界门纲目科属种的英文——学生物的基础
- 自律给我自由 2017.8.9 心情很好 天气很好
- ChatGPT实现代码生成
热门文章
- nodejs template
- iTunes,一个不断侵蚀C盘的大虫
- 如何从SQL Server查找指定的临时表
- 微软 Exchange Autodiscover 协议存bug,数十万域凭据可遭泄露
- 微软公开PrintNightmare系列第3枚无补丁0day,谷歌修复第8枚已遭利用0day
- 看我如何发现开源 WAF引擎ModSecurity 中的DoS 漏洞
- 解决在使用CSS3制作不间断轮播图中 收尾连接后Interval 延时问题
- 比特币里面有哪些天才的设计?
- DCOS Virtual Networks
- Skype for business server 2015和PSTN集成后,无法完成呼叫