GitHub分享其用來加速首頁效能的技巧,除了改變呼叫的函式之外,也改變使用的圖片格式,讓包含圖片、動畫和影片的頁面,仍快速且順暢地載入,提升使用者的瀏覽體驗。

用戶在向下滾動瀏覽GitHub首頁的時候,GitHub在部分元素設置動畫,以吸引用戶的注意力,而在這個部分,GitHub改變了典型作法,以提高動畫的效能與操作互動性。典型要建構這個效果的方式,是監聽滾動事件,計算所有元素的可見性,並且根據元素的位置觸發動畫。

但這樣的方法有一個大問題,GitHub提到,呼叫getBoundingClientRect()將會觸發網頁回流(Reflow),因此可能產生效能瓶頸。因此GitHub改用IntersectionObservers,設定當元素出現在Viewport特定位置時發出通知,因此也就不需要監聽滾動事件,或是呼叫getBoundingClientRect(),只要利用IntersectionObservers就能偵測元素是否出現在Viewport中,因而降低運算資源的使用。

另外,僅使用對瀏覽器負擔較輕的轉換(Transform)和不透明(Opacity)屬性動畫,是GitHub在設計網頁的原則,而在他們重新檢視首頁中的所有動畫之後,他們發現,轉場(Transition)特效和元素狀態的改變,可能無意間破壞了這個他們嚴格遵守的原則。

GitHub提到,在改變透明度的CSS語法中,加入轉場特效transition: * 0.6s ease;是一個常見的做法,但這個方法卻可能會使網頁效能低落,因為其他屬性的更改,可能污染轉場特效,像是加上滑鼠懸停改變文字顏色的全域樣式,就可能導致不必要的樣式和布局運算。

為了避免動畫污染,GitHub明確定義僅轉場特效,應寫成transition: opacity 0.6s ease, transform 0.6s ease;,明確指定轉換和不透明度屬性變換。在GitHub重新調整所有動畫,使用IntersectionObservers以及明確指定不透明度和轉換動畫後,閒置的CPU使用率大降,樣式重新計算的次數也急劇減少。

GitHub首頁另外一個大調整,便是改變圖片使用的格式,GitHub提到,由於他們的插圖風格,需要使用PNG的透明度屬性,但因為PNG檔案動輒數MB,因此他們又希望可以擁有JPG的壓縮特性,使得圖片大小縮減。雖然新格式WebP能夠提供兩全其美的優點,但是實際支援的裝置並不多,即便是在macOS Catalina上執行最新的版本Safari,仍無法渲染WebP圖像。

因此GitHub最後發展出了一個複雜的方法,在支援WebP的裝置上,使用WebP格式的圖片,當裝置不支援WebP,則回退改用GitHub所開發的特殊方法,將兩張JPG圖片嵌入在一張SVG圖片中,一張JPG圖片作為圖片資料,另一張JPG圖片則作為遮罩使用,最後以SVG格式打包起來,GitHub提到,他們所發展的複雜方法,可在每次頁面載入時節省數百KB,並能在各種平臺中,支援最新的技術。


熱門新聞

Advertisement