建立一個滿是圖片、動畫、影片的網頁,同時還要載入速度快與穩定,對開發者說是相當棘手的任務。GitHub 近期建立了新的首頁,開發者將提升網頁速度的方式分享到 GitHub 上,探討提升網頁性能的兩大重點:高性能動畫與圖像壓縮。

原文與程式碼傳送門

提升網頁動畫效率

使用者瀏覽新的 GitHub 首頁,向下滑動的時候,會觸發動畫。傳統上,一種方法是透過監聽滾動,計算使用者追蹤的元素的可見性,並根據元素在 Viewport 中的位置觸發動畫。然而,這種方法對 getBoundingClientRect() 的調用會觸發迴流,造成性能瓶頸。

但現在所有的瀏覽器都支援 IntersectionObservers,可以設定當元素出現在 Viewport 的特定位置時發送通知,就無須監聽滾動,也不需使用 getBoundingClientRect(),因而節省運算資源。

另外,GitHub 設計網頁時,僅使用對瀏覽器負擔較輕的轉換(Transform)與不透明(Opacity)屬性動畫。但 GitHub 團隊發現,轉場(Transition)特效和元素狀態的改變,可能會破壞此項原則。

在改變透明度的 CSS 語法中,常見的作法是加入轉場特效 transition: * 0.6s ease;,但會降低網頁效能,因此 GitHub 明確定義轉場特效 transition: opacity 0.6s ease, transform 0.6s ease;,明確指定轉換與不透明度屬性變換。

經由使用 IntersectionObservers 與明確指定不透明度和轉換動畫後,閒置的 CPU 使用率下降,樣式重新計算的次數也大幅減少。

壓縮圖檔並保留透明度

另外,GitHub 也改變圖片的格式。文中提到,GitHub 的插圖需要 PNG 檔的透明度,但 PNG 的大小動輒數 MB,因此又需要 JPG 的壓縮性,以降低圖檔大小。雖然 WebP 檔結合兩者優點,但支援該格式的設備並不多。

因此,GitHub 將兩張 JPG 圖片嵌入一張 SVG 圖片,一張 JPG 作為圖片資料,另一張 JPG 則作為遮罩,最後再以 SVG 格式打包。若設備支持 WebP,則會直接採用 WebP 格式;若不支援,才會採用 GitHub 開發的方式,但這能在載入頁面的時候省下數百 KB。

參考資料

GitHub Blog

(本文提供合作夥伴轉載。首圖來源:GitHub

延伸閱讀

「對不起!是程序上的錯」GitHub 忙救火,重新提供職位給遭「錯誤解雇」的猶太籍員工
GitHub 年度程式語言黑馬誕生:TypeScript 超越 C#、PHP,一年內躍升三名!
【開源程式最佳保存法】Github 將 21 TB 的程式碼轉換成「膠捲」,送到北極永凍層冰封 1000 年