Google Chrome 53 Beta 引入影子(Shadow)DOM V1

  • James Chesters
  • 周元昊

2016 年 8 月 31 日

话题:JavaScriptGoogleChrome语言 & 开发

Google Chrome 53 Beta 引入影子(Shadow)DOM V1,以及支付请求(PaymentRequest)API。

与之前影子 DOM V0 明显不同,V1 弃用了影子 DOM 对多个根节点的支持,并增加了阻止外界访问内部的根节点关闭功能。

发布声明的博客中,Hayato Ito 强调,虽然 HTML、CSS、JavaScript 非常有用也很强大,但是很难对大代码量进行维护。

Ito 表示,V1“能让元素封装自己的样式且子 DOM 不受外界 DOM 的影响。这提升了大代码量的可维护性”。同时 Chrome 仍将支持 V0。

在 HackerNews 关于 Google Chrome 53 Beta 的讨论中,用户 borplk 问到“影子 DOM 是否对 React 等有影响?如在提升性能等方面”。

Google 工程师 Eric Bidelman回复到:

很明显,影子 DOM 是一个浏览器内嵌的提升开发者效率的工具。

在 React 中,你需要使用内联样式或支持模块化、增加 CSS 前缀的构建工具(如 CSS Modules)。内联样式会将特性配置污染到全局,并且大量内联样式会让浏览器做超出必要的上下文切换(HTML 解析器 <->CSS 解析器)。注意,后者不太会成为真实应用的性能问题。

在影子 DOM 中,你只需要写 CSS。在“<style>”标签内使用简单的选择器或样式表,不需要其他工具,浏览器会自动将选择器的作用域神奇地控制在组件内部。影子根节点也阻止外部样式跨边界向内泄漏。在没有浏览器支持的情况下这点很难做到。

在 32 Beta 版本中也引入了新的支付请求(Payment Request)API,Ito 表示这个功能可以快速且安全地使用信用卡及 Android Pay 进行支付,用户不用输入就能提供账单地址、送货详情以及付款人信息。

这个 API 在 W3C 工作草案中有具体描述

随着用户发起支付流程(如在交互式游戏中点击“能力提升”,在停车场中使用自动付费机或点击“购买”、“结账”按钮),网页会创建一个支付请求进行支付。在确认或拒绝支付前,用户需要输入信息,此时支付请求允许网页与用户代理间进行交互来获得信息。

Google 提供了一个演示视频

几乎隐藏在诸多 53 Beta 的小改进中的还有初次试验的网页蓝牙 API。在页面使用 navigator.bluetooth.requestDevice 来请求访问附近的设备时,网页蓝牙 API 会提示用户选择设备。

Chrome 53 Beta 中一些弃用的功能有:

  • 弃用 HTTP/0.9,使用支持响应报文头的HTTP/1.0来取代。
  • 移除了已在M51 中弃用的 TLS Diffie-Hellman 加密。
  • TextEncoder API 不再接受参数,并始终使用 utf-8 进行编码。
  • Chrome 不再信任没有证书透明度(Certificate Transparency)信息的 Symantec 及链向 Symantec 的 CA 所发布的新证书。

查看英文原文:Google's Chrome 53 Beta Brings Shadow DOM V1


感谢夏雪对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

JavaScriptGoogleChrome语言 & 开发