Chrome 58测试版发布,有哪些新特性?

by admin on 2020年4月25日

上周发布的
Chrome 53 带来了一系列实验性规范的支持,如Shadow
DOM,它为复杂网页的开发提供便利。同时,针对移动平台,Chrome
53也提供了PaymentRequest接口、自定义通知徽章等功能。

原文出处:澳门新葡亰网址下载 ,DevRel

Shadow DOM V1

澳门新葡亰网址下载 1

澳门新葡亰网址下载 2

HTML、CSS和JavaScript是非常强大的开发语言,但是当代码量变大时,维护难度会大大增加。另外,网站嵌入的第三方内容而引入的样式,不会影响到其他的部分。Chrome
53支持Shadow DOM
V1,该规范能够将元素的样式和子DOM节点单独封装,与主文档树相互独立。这样能够提升大型或富客户端网站的可维护性。Shadow
DOM
V1版本规范和V0版本有显著的不同,该版本已经被各大主流浏览器厂商广泛认可。Chrome将同时支持两个版本的API,直到有足够数量的开发者开始使用V1版本。ShadowRoot的行为由其创建时所调用的API决定(V0版本使用Element.createShadowRoot()而V1版本使用Element.attachShadow()创建)。

Chrome 54 Beta版本有几项进行了优化,包括自定义元素 V1、BroadcastChannel
和媒体平台改进等。

除非另外注明,否则下面介绍的更改均适用于最新 Chrome Beta
渠道版(Android、Chrome 操作系统、Linux、Mac 和 Windows)。

PaymentRequest API

自定义元素 v1

IndexedDB 2.0

在网页上完成支付操作对用户来说是个冗长的流程,这样会降低网站支付转化率。虽然自动填充可以让用户输入信息更加方便,但是在移动设备上高效数据输入仍然是一个挑战。PaymentRequest接口允许通过信用卡或者Android
Pay在网页上快速、无缝和安全的支付。它还能够在无需输入的情况下,让用户提供账单地址、物流信息和支付信息等内容。PaymentRequest接口在Android版Chrome上可用,对更多平台支持即将推出。

复杂的用户界面通常需要大量
HTML。大多数语言可让开发者在语言原语的基础上创建自己的组件,以缓解这种繁冗。自定义元素可让开发者创建自定义的
HTML 标记,以及在 JavaScript 中定义新元素的 API
和行为。这样可以使用浏览器原生的方式构建可重复使用、可互操作的组件。

现在,Chrome 完全支持 IndexedDB 2.0
标准,在此浏览器中,可以更轻松地处理大数据集。IDB 2.0
采用新的架构管理和批量操作方法,故障处理方式也更标准化。

Payment Request API演示

Chrome 54 支持最新的自定义元素 V1
规范,该规范获得了主要浏览器供应商的广泛认同。Chrome 也会继续支持 V0
API,直到有足够的开发者转移到 V1。

网站数据库的结构对性能的影响很大,而且很难改变。为简化更新操作,现在,在重构后,可以原地重命名对象存储和索引。网站也可以使用更多自然关键字,而无需担心性能受到影响,因为二进制关键字可压缩自定义关键字表示。

Android版Chrome自动播放静音视频

BroadcastChannel

使用 getKey () 和 openKeyCursor ()
方法,可以简化数据检索,在只需一个数据库关键字时,还可提升性能。使用新的
continuePrimaryKey ()
游标方法,可以更轻松地分割跨事务、跨页面加载的大数据访问,而不必担心出现重复的主键。getAll
() 和 getAllKeys () 方法无需使用游标,即可批量恢复整个数据集。

视频是网站和用户交互非常好的方式,但是视频不合时宜的播放会令人不快。这种场景在移动设备上更为常见,因为用户可能处于不能开启音频的环境。Android版Chrome允许静音的视频在没有用户交互的情况下开始播放。如果视频被标记为静音,且有autoplay属性,Chrome将会在视频对用户可见时开始播放。开发者也可以通过脚本在无需用户交互的情况下播放静音视频。静音视频在用户操作前播放音频将会被自动暂停。

桌面用户同时打开多个窗口或选项卡是很常见的事。有些网站利用了此行为,例如网页编辑器可在其自己的选项卡中打开文档。在历史上,这些选项卡之间的通信一直很难。BroadcastChannel
是窗口、选项卡、iframe、Web Worker
及服务工作线程之间一种新型的一对多消息传递
API。它可让脚本建立命名通道以在同源浏览上下文之间发送消息。

改进 iframe 导航

其他新增特性

Chrome(Android 版)的媒体平台改进

自动重定向页面的第三方内容(例如广告)可能给用户带来困扰,带来安全问题。因此,开发者可以将第三方内容置于沙盒化的
iframes
中,避免出现此状况。但是,在某些情况下,与标准广告类似,点击此类内容需要导航顶级页面。

  • 网站发送通知给Android
    6.0(Marshmallow)或以后版本的Android设备,现在可以提供显示在状态栏的徽章,以代替Chrome
    logo。

  • Notification对象提供了读取函数,以读取通知的操作按钮和振动模式。

  • 对于用户设置了“检测和运行重要插件内容”之后,跨域插件内容中包含小于5×5像素的图片将不再加载。

  • allow-presentation的sandbox标签允许网站控制iframe是否可以展现给外部设备。

  • input元素上的pattern属性现在可以使用unicode标记,以提升语法检查和其他正则表达式工效。

  • 如果祖先元素透明度小于1,3D定位元素将会被扁平化。

  • 为了防止视觉假象,所有内容的变换缩放改动都将会重新光栅化,除非该元素包含will-change: transformCSS属性。

  • 低通和高通双二阶滤波器现在支持更多滤波特性。

  • --webkit-filter目前是无前缀属性filter的别名,二者行为完全相同,不再有独立的行为。

  • –webkit-user-select现在支持all属性,它强制选取包含完整的元素及其后继元素。

  • Web Bluetooth
    API目前以初始使用的形式在一些平台上试验性可用,它允许网站通过蓝牙通用属性配置文件(Bluetooth
    Generic Attribute
    Profile,GATT)和附近设备进行交互。

  • text-size-adjust属性允许网站控制在移动设备上字体大小是否自动缩放。

对于需要灵活利用整个屏幕的移动设备,媒体在浏览体验中的角色越来越吃重。现在,当屏幕方向改变后,除了用户手势,开发者还可以使用
Element.requestFullScreen()
触发全屏模式。这可以提供像媒体播放器旋转切换至全屏这样的体验。

为解决此问题,Chrome 58 现在支持新的 iframe 沙盒关键字
allow-top-navigation-by-user-activation。此关键字使沙盒化的 iframes
在用户交互操作触发时能够导航顶级页面,同时阻止自动重定向。

弃用和互操作性的改进

除了对全屏模式的改进之外,Android 上的 Chrome 现在可对后台运行的
HTMLVideoElement
保持提供媒体通知,可让用户在视频不可见时继续播放视频。开发者可以使用Page
Visibility API 检测后台视频播放。

PWA 沉浸式全屏体验

  • 通过脚本生成的事件将不再触发默认行为,以提升规范合规性和浏览器互操作性。

  • HTTP/0.9已经被废弃,取而代之的是HTTP/1.0,它增加了对响应头的支持。

  • 出于安全考虑,TLS的Diffie-Hellman加密算法已经被移除,该算法已经在Chrome
    51版本中被弃用。

  • TextEncoder
    API不再支持参数,而是始终使用utf-8编码。

  • 由于最近安全问题,赛门铁克公司颁发或者证书链中包含赛门铁克公司的新证书,在Chrome中将不再被授信,除非新证书包含了证书透明度(Certificate
    Transparency)信息。

此版本中的其他特性

当 Progressive Web App (PWA) 从 Android 主屏幕启动时,这些 PWA
会以一种类似于独立应用的模式启动,此模式下会隐藏多功能框。这有助于营造一种富有吸引力的用户体验,并释放屏幕空间,以显示更多内容。但是,对于游戏、视频播放器或其他富媒体内容等更沉浸式的体验,系统栏等其他移动
UI 元素仍然会分散用户注意力。

转自:InfoQ
作者 金灵杰 

  • 在卸载处理程序中发起的导航将被阻止,任何之前的导航将会继续。
  • CanvasRenderingContext2D 的 imageSmoothingQuality
    属性可让开发者在缩放时调整分辨率来平衡性能与图像质量。
  • 网站可以使用 Node.getRootNode(options) 获取指定节点的根。
  • 利用 PushSubscription.options,网站可以跟踪
    applicationServerKeys,而无需离线存储它们。
  • Resource Timing API 现在支持 transfer、encoded 和 decoded
    大小属性,可让开发者测量缓存命中率和字节使用量。
  • user-select 属性可让开发者指定用户可以选择哪些元素以及如何选择。
  • Foreign Fetch 和 WebUSB 可供试验用作起源试验。

现在,PWA 可以在其网络应用清单中设置 display:
fullscreen,在网站从主屏幕启动时隐藏非应用 UI,提供完全沉浸式的体验。

弃用和互操作性的改善

澳门新葡亰网址下载 3

  • 为了匹配其他浏览器中的行为,嵌入的 YouTube Flash 播放器将被 Chrome
    覆盖,以使用 HTML5 嵌入的样式,改进 Chrome Desktop 上的性能和安全。
  • CacheQueryOptions 现在符合所有 CacheStorage 方法中的规范。
  • initTouchEvent 已移除,代之以 新的 TouchEvent() 构造函数。
  • SVGZoomEvent 已移除,因为它不再属于 SVG 2.0 规范。
  • SVGSVGElement.currentView、SVGSVGElement.useCurrentView、SVGViewSpec
    接口和 SVGSVGElement.viewport 已移除,因为它们不再属于 SVG 2.0
    规范。
  • SVGTests.requiredFeatures 属性已弃用,因为它不再在 SVG 2.0
    规范中提供有用的功能。
  • SVGElement 现在支持 dataset 属性。
  • KeyEvent.keyIdentifier 字段已移除,代之以 KeyboardEvent.key 字段。
  • window.external.IsSearchProviderInstalled() 和 AddSearchProvider()
    现已弃用,因为大多数其他浏览器不再支持它们。

PWA 从主屏幕启动(左)、PWA 在独立模式下从主屏幕启动(中)和 PWA
在全屏模式下从主屏幕启动(右)

【编辑推荐】

此版本中的其他特性

  • 现在,工作线程和共享工作线程可以使用 data:
    网址进行创建,通过为其赋予不透明的来源,可更安全地利用工作线程进行开发。
  • 通过 PointerEvents.getCoalescedEvents (),开发者可以访问上次提交
    PointerEvent
    以来的所有输入事件,使绘图应用可以更轻松地使用精确的点记录绘制更平滑的曲线。
  • 现在,开发者可以使用新的 ControlsList API,自定义 Chrome
    的原生媒体控件,例如 download、fullscreen 和 remoteplayback 按钮。
  • 对于 Chrome(Android
    版),使用改进的添加到主屏幕工作流安装的网站将可以不受限制地自动播放通过清单范围中包含的来源提供的音频和视频。
  • 对于 Chrome(Android 版),使用 autoplay
    属性的视频在退出屏幕时将暂停播放,返回屏幕将继续播放,以保持跨浏览器的连贯性。
  • 现在,网站可以使用 color-gamut Media Query,获取 Chrome
    和输出设备支持的颜色的大致范围。
  • 现在,无需手动重置 float 和 clear 等多种布局属性,网站可以使用
    display: flow-root 添加一种新的块格式设置上下文。
  • 为缩短 JavaScript 分析时间,SVGPoint、SVGRect 和 SVGMatrix 已转移至
    Geometry 外部的新界面中。
  • 使用新的 Selection API 函数 removeRange
    (),开发者现在可以通过编程移除指定的文本范围。
  • 现在 Chrome(Mac 版)支持 PointerEvent.tangentialPressure 和
    PointerEvent.twist 属性,可为触控笔设备和绘画应用提供更多信息。
  • 为简化开发者体验,现在 JavaScript
    允许在形式参数和实际参数列表中使用终止逗号。
  • WebAudio API 新的播放 AudioContextLatencyCategory
    使开发者可以轻松地在延迟时间、功耗和 CPU 效率之间做出有意识的权衡。

弃用和互操作性的改善

  • Apple-interchange-newline、Apple-converted-space、Apple-paste-as-quotation、Apple-style-span
    和 Apple-tab-span 已被弃用,因为它们是非标准 CSS 类。
  • usemap
    属性现在使用区分大小写的匹配方式,而不使用兼容不区分大小写,以更好地符合相关规范。
  • 现在,根据 Chrome 针对一些重要功能的政策,使用 Notifications API
    请求通知权限或创建非永久本地通知时,网站必须使用 HTTPS。
  • 为了更好地符合相关规范,现在当 cancelBubble 设置为 true 时被视为
    stopPropagation () 的别名,在设置为 false 时则不执行任何操作。
  • VTTRegion 界面函数 addRegion () 和 removeRegion () 已从 WebVTT
    规范中移除,因此也将从 Chrome 中移除。
  • 导航至 data:
    网址的顶级页面的功能已被弃用,以进一步防止用户受到欺骗和钓鱼式攻击。
  • HTMLEmbedElement 或 HTMLObjectElement
    的实例不再可以作为函数调用,因为旧版调用程序已被移除。
  • 在 IETF 将这些算法标准化为 RFC 7539 和 RFC 7905 以及随后在 Chrome 41
    中发布标准版本后,移除了标准化前的 ChaCha20-Poly1305 密码。
  • 为改善互操作性,如果增加的范围与现有范围重叠,Selection.addRange ()
    现在会忽略前者,而不是将两个范围合并。
  • 根据 Chrome
    针对一些重要功能的政策以及根据相关规范,已弃用通过不安全来源传输加密媒体扩展。
  • AudioBuffer 构造函数现在允许使用 AudioBufferOptions 词典的
    sampleRate 成员代替 context 参数,以简化界面,同时强调可以在
    AudioContexts 之间共享 AudioBuffers。
  • 现已在服务工作线程中弃用同步 FileReaderSync
    API,因为服务工作线程规范要求所有类型的同步请求都应在服务工作线程外部发起。
  • 现在 abbr 和 acronym 元素默认添加点式下划线,以符合 HTML 标准。
  • 现已移除 motion-path、motion-offset 和 motion-rotation CSS
    属性,分别由以下新版本取代:offset-path、offset-distance 和
    offset-rotate。
  • 在访问 selectionDirection、selectionStart 和 selectionEnd 等
    Selection API 属性时,Chrome 原本会引发 InvalidStateError
    DOMException,但现在返回 null。
  • 现在,Selection API 的 setBaseAndExtent ()
    不会在无提示的情况下限制过大的偏移值,而是引发 IndexSizeError
    DOMException,以更好地符合相关规范。
  • 现在,Selection API 的 setBaseAndExtent ()、extend () 和 collapse ()
    不会因 DocumentType 节点输入而在无提示的情况下失败,而是引发
    InvalidNodeTypeError DOMException,以更好地符合相关规范。
  • 为更好地符合相关规范,getRangeAt () 现在始终返回新的位置规范化的
    Range。
  • 现已移除 AudioSourceNode 接口,因为它不再属于 WebAudio 规范。
  • 现已移除 webkitdropzone 属性,因为它未得到广泛采用。

官方发布说明

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图