Chrome54終結YouTube的Flash內嵌技術

boxti發表於2017-06-03
Chrome

谷歌已經啟動了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  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);
關於更多自定義元素的資訊，包括自定義元素的擴充套件和重構，請參看這裡。

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月釋出。


相關文章