Chrome54終結YouTube的Flash內嵌技術

boxti發表於2017-06-03

谷歌已經啟動了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月釋出。


相關文章