Chrome 54 终结 YouTube 的 Flash 内嵌技术

谷歌已经启动了 Chrome 54 项目。最新发布的版本进一步地边缘化 Flash，转而使用 HTML5 在浏览器里内嵌 YouTube 视频，同时包含了大量问题修复和功能改进。

谷歌移除 Flash 的工作已经进行了一段时间，发布的多个更新强化了用户和开发者对 HTML5 的使用体验。

YouTube 从 2015 年 1 月份开始使用 HTML5 作为默认的视频内嵌技术，谷歌在去年改变了 Chromium 处理网站 Flash 的方式。

从 Chrome 45 开始，浏览器在运行最重要的内容并暂停其它 Flash 内容之前会先检测网页中是否包含了 Flash 内容。

Chrome 54 稳定版重写了 YouTube 内嵌 Flash 的方式，当检测到有内嵌的 Flash YouTube 视频，浏览器会自动使用 HTML5 替代它。谷歌表示这个变化是“为了减少 Flash 在 Chrome 中的使用”。

Chrome 54 还带来了 Custom Elements 规范的 v1 版本。

在 Custom Elements v1：可重用 Web 组件这篇博文里，谷歌工程师 Eric Bidelman 说，通过使用自定义元素，“Web 开发者可以创建新的 HTML 标签，弥补已有标签的不足，也可以对其他开发者开发的组件进行扩展”。另外，跟 v0 版本不一样的是，v1 版本的 API 在设计上有很大不同。

关于如何遵循 v1 规范为一个元素定义 JavaScript API，Bidelman 说：

自定义元素的功能是通过 ES2015 类来定义的，ES2015 扩展了 HTMLElement。扩展 HTMLElement 可以保证自定义元素会继承整个 DOM API，也就是说，为这个类添加的任何一个属性 / 方法都会成为自定义元素 DOM 接口的一部分。本质上，就是使用这个类为你的标签创建 JavaScript API。

Bidelman 举了 AppDrawer 这个例子来说明如何定义 DOM 接口，其中类的属性被映射成 HTML 属性：

 
class AppDrawer extends HTMLElement {
 
 // A getter/setter for an open property.
 get open() {
   return this.hasAttribute('open');
 }
 
 set open(val) {
   // Reflect the value of the open property as an HTML attribute.
   if (val) {
     this.setAttribute('open', '');
   } else {
     this.removeAttribute('open');
   }
   this.toggleDrawer();
 }
 
 // A getter/setter for a disabled property.
 get disabled() {
   return this.hasAttribute('disabled');
 }
 
 set disabled(val) {
   // Reflect the value of the disabled property as an HTML attribute.
   if (val) {
     this.setAttribute('disabled', '');
   } else {
     this.removeAttribute('disabled');
   }
 }
 
 // Can define constructor arguments if you wish.
 constructor() {
   // If you define a ctor, always call super() first!
   // This is specific to CE and required by the spec.
   super();
 
   // Setup a click listener on <app-drawer> itself.
   this.addEventListener('click', e => {
     // Don't toggle the drawer if it's disabled.
     if (this.disabled) {
       return;
     }
     this.toggleDrawer();
   });
 }
 
 toggleDrawer() {
   ...
 }
}
 
customElements.define('app-drawer', AppDrawer);
</app-drawer>

关于更多自定义元素的信息，包括自定义元素的扩展和重构，请参看这里。

Chrome 54 还包括了大量安全方面的问题修复。尽管谷歌没有透露太多关于这些问题的细节，Richard Bustamante 在稳定通道更新里还是列出了总共21 个安全问题修复，包括6 个“高”安全级别问题。其中一个是URL 欺骗漏洞相关问题，有一个是全局XSS 问题（CVE-2016-5181），还有一个Blink 引擎的堆溢出问题（CVE-2016-5182）。谷歌的PDF 软件包PDFium 有三个高级别的问题修复。

从谷歌公布的 Chrome 54 已移除和不再推荐使用的 API 列表来看，最新版本的 Chrome 不允许跨域访问 window.onunload 事件处理器，为的是让 Chrome 和 HTML 规范保持一致。HTTP/0.9 不再被推荐使用（开发者应该转向 HTTP/2），initTouchEvent 被移除。

Chrome 55 计划在今年 11 月发布。

查看英文原文： Chrome 54 Kills YouTube Flash Embeds

感谢冬雨对本文的审校。

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