#perfmatters:專為效能達人提供的工具技巧
瞭解開發工具的使用方式,是成為成效專家的關鍵。Colt 逐步介紹效能三大支柱:網路、運算和算繪,並介紹各個領域的主要問題,以及可用於找出及解決這些問題的工具。
- 您現在可以使用電腦版的開發人員工具,在 Android 上分析 Chrome。
- 成效工作的迭代循環為:收集資料、取得洞察資料、採取行動。
- 優先處理網頁中重要轉譯路徑的素材資源。
- 避免使用油漆,因為價格非常昂貴。
- 避免在應用程式的重要時刻發生記憶體流失和執行程式碼的情況。
#perfmatters:改善網路效能
網路和延遲通常會佔網站總頁面載入時間的 70%。雖然這項比例相當高,但也代表您在這個方面做出的任何改善,都將為使用者帶來巨大的效益。在本次演講中,Ilya 將逐步介紹 Chrome 近期的異動,說明如何縮短載入時間,以及您可以在環境中進行的幾項異動,以盡可能降低網路負載。
- Chrome M27 提供全新的資源排程器,並已改善其效能。
- Chrome M28 讓 SPDY 網站的速度更快。
- Chrome 的簡易快取已全面改良。
- SPDY / HTTP/2.0 可大幅提升傳輸速度。有成熟的 SPDY 模組可供 nginx、Apache 和 Jetty 使用 (僅列舉三個)。
- QUIC 是新推出的實驗性通訊協定,建立在 UDP 之上;雖然還處於初期階段,但無論如何,使用者都會從中獲益。
#perfmatters:60 fps 版面配置和算繪
在專案中達到 60fps 與使用者參與度直接相關,對專案的成功至關重要。在本次演講中,Nat 和 Tom 將討論 Chrome 的轉譯管道、影格遺失的常見原因,以及如何避免影格遺失。
- 一個影格長度為 16 毫秒。其中包含 JavaScript、樣式計算、繪圖和合成。
- 油漆費用非常昂貴。塗料風暴是指不必要重複進行昂貴的塗料作業。
- 圖層用於快取繪製的元素。
- 輸入處理常式 (觸控和滑鼠滾輪事件監聽器) 可能會導致應用程式無法回應,因此請盡量避免使用。無法將其降到最低。
#perfmatters:免安裝行動網頁應用程式
關鍵轉譯路徑是指瀏覽器開始繪製網頁前所需的所有內容 (JavaScript、HTML、CSS、圖片)。您必須優先在關鍵轉譯路徑上提供資產,尤其是針對使用網路受限裝置的使用者,例如使用行動網路的智慧型手機。Bryan 說明瞭 Google 團隊如何為 PageSpeed Insights 網站找出素材資源並排定優先順序,將載入時間從 20 秒縮短到 1 秒多一點!
- 移除會妨礙顯示的 JavaScript 和 CSS。
- 優先顯示可見內容。
- 以非同步方式載入指令碼。
- 將初始檢視畫面以 HTML 格式在伺服器端算繪,並使用 JavaScript 擴充。
- 盡量減少會造成轉譯阻斷的 CSS,只提供顯示初始可視區域所需的樣式,然後再提供其餘樣式。
- 在產生阻斷的 CSS 中內嵌大型資料 URI 會對算繪效能造成不利影響,因為這類 URI 會阻斷圖片網址的非阻斷資源。