Chrome 開發人員高峰會 - 效能摘要

Paul Lewis

#perfmatters:高效能忍者的工具技巧

熟悉開發工具是成為成效專家的關鍵。高團隊逐步研究了網路、運算和轉譯的三大效能要素:網路、運算和轉譯、導覽每個區域的主要問題,以及可用來找出和解決這些問題的工具。

簡報

  • 現在你可以在電腦版上,使用你熟悉且喜愛的開發人員工具在 Android 裝置上建立 Chrome 設定檔。
  • 效能工作的疊代迴圈為:收集資料、取得深入分析、採取行動。
  • 優先處理網頁重要轉譯路徑上的素材資源。
  • 避免塗料;費用超高昂。
  • 避免在應用程式的重要時刻導致記憶體流失和執行程式碼。

#perfmatters:最佳化網路效能

網路和延遲時間通常佔網站總網頁載入時間的 70%。雖然比例相當高,但這也表示,您所做的任何改善都能為使用者帶來極大效益。在這場講座中,Ilya 詳細介紹了 Chrome 最近的變更來縮短載入時間,並且進行一些變更,讓網路負載保持絕對最低。

簡報

  • Chrome M27 全新改良版資源排程器。
  • Chrome M28 加快了 SPDY 網站 (甚至是) 的速度。
  • Chrome 的簡易快取技術遭到重組,
  • SPDY / HTTP/2.0 可大幅提升傳輸速度。許多成熟的 SPDY 模組適用於 nginx、Apache 和 Jetty (以上只有三個)。
  • QUIC 是以 UDP 為基礎建構而成的全新實驗性通訊協定。雖然這種通訊協定的發展相當早期,但使用者仍可獲勝。

#perfmatters:60fps 的版面配置與轉譯

在專案中命中 60fps 能直接激發使用者的參與度,並是成功的關鍵。在這場講座中,Nat 和 Tom 談到 Chrome 的轉譯管道,包括影格遺失的常見原因及避免這種情況。

簡報

  • 一個影格的長度為 16 毫秒。其中包含 JavaScript、樣式計算、繪畫和合成。
  • 繪畫費用extremely昂貴。「顏料暴」是不必要的重複性顏料工作的地方。
  • 圖層可用於快取繪製的元素。
  • 輸入處理常式 (觸控和滑鼠滾輪事件監聽器) 可能會終止回應,請盡可能避免。但請不要將這些項目降到最低。

#perfmatters:即時行動網頁應用程式

關鍵算繪路徑是指瀏覽器開始繪製網頁前所需的 JavaScript、HTML、CSS、圖片。使用者尤其必須優先在關鍵轉譯路徑傳送資產,尤其對於仰賴網路限制的裝置 (例如行動網路上的智慧型手機) 的使用者,更是如此。Bryan 提到 Google 團隊如何找出 PageSpeed Insights 網站的素材資源,然後排定優先順序,將素材資源從 20 秒縮短到 1 秒以上!

簡報

  • 排除會妨礙轉譯的 JavaScript 和 CSS。
  • 優先顯示可見內容。
  • 以非同步方式載入指令碼。
  • 將初始檢視轉譯為 HTML 格式,並透過 JavaScript 增強效果。
  • 盡量減少禁止轉譯的 CSS;只提供顯示初始可視區域所需的樣式,然後放送其餘內容。
  • 內嵌會禁止轉譯的 CSS 的大型資料 URI 會對轉譯效能造成負面影響;這類 URI 會禁止圖片網址未遭到封鎖的資源。