作者簡介

Kay Huang，攜程高級視覺設計師，專注于前端樣式與動畫領域。

一 、背景

攜程火車票營銷頁使用 css 制作動畫很多年了，這大大提高了動畫給予頁面豐富的視覺體驗。不過，在開發的過程中，也遇到了一些性能相關問題和用戶反饋，比如頭部動畫卡頓、頁面打開時間較長、頁面打開后部分數據加載時間較長等問題。為解決這些問題，我們借助性能檢測工具定位問題，并查閱源碼、文檔等資源解決問題，形成了這篇文章。

二、渲染優化

要優化動畫性能，首先要了解瀏覽器是如何進行元素渲染的，瀏覽器的渲染流程有以下四步：

a. 計算元素的樣式（可能通過腳本重新計算）；

b. 生成每個元素的幾何形狀和位置（布局）；

c. 繪制圖層的每個像素（初始化繪圖并且進行繪圖）；

d. 將圖層繪制到屏幕上（合并渲染層）。

對于 CSS3 動畫來說，每一幀都要經歷上述過程。關于最后一步合并渲染層（可以類比 Photoshop 的圖層），瀏覽器會在特定的場合創建獨立的渲染層，每個渲染層由 GPU 獨立繪制，互不影響，最后瀏覽器再把各個渲染層合并。這是一種代價較低的操作。

理論上說，FPS 越高，動畫會越流暢，目前大多數設備的屏幕刷新率為 60 次/秒，所以通常來講 FPS 為 60frame/s 時動畫效果最好，也就是每幀的消耗時間（幀預算）為 16.67ms。

三、解決方案

如上所說瀏覽器有整理工作要做，因此所有工作需要盡量在 10 ms 內完成。如果制作的動畫觸發了布局，那就相當于要進行第二步重新繪制，如果重新繪制的話瀏覽器渲染的時間肯定超過 16ms，那么我們的頁面就會出現卡頓，如果是移動端的話那就會更慢，所以我們如果要優化的話那就要從第一步直接跳到第四步。

下面我寫了七種優化動畫性能的方法，有直接從第一步跳到第四步的也有一些其他平時優化注意事項。

3.1 開啟 GPU 加速

Transform 屬性可以向元素應用 2D 或者 3D 轉換，可以對元素進行選擇、縮放、移動和傾斜。

在日常中我們可以使用 left/top，translate 來實現元素的位移，但是其實性能上還是有一定區別的因為 transform 屬性不會改變自己和他周圍元素的布局，他會對元素的整體產生影響。

讓我們先用 top/left 屬性創建一個動畫看看效果。

<style>
      .heart{animation: heartbeat 4s infinite;width:50px;height:50px;background:red;position:absolute;left:30px;top:30px;}
      @keyframes heartbeat{
          0%{top:30px;left:30px;}
          25%{top:30px;left:230px;}
          50%{top:230px;left:230px;}
          75%{top:230px;left:30px;}
      }
</style>

用 chrome 瀏覽器的 DevTools 查看可以看到紅色方塊都是布局重繪。

圖中有那么多的紅色方框與幀數是因為瀏覽器會做大量的計算，動畫就會卡頓。

因為每一幀的變化瀏覽器都在進行布局、繪制、把新的位圖交給 GPU 內存，雖然只改變元素位置但是很可能要同步改變他的子元素的位置，那瀏覽器就要重新計算布局，計算完后主線程再來重新生成該元素的位圖。

現在，將動畫用 transform 代替：

<style>
      .heart{animation: heartbeat 1s;width:50px;height:50px;background:red;}
      @keyframes heartbeat{
          0%{transform: translate(30px,30px);}
     25%{transform: translate(30px,230px);}
       50%{transform: translate(230px,230px);}
          75%{transform: translate(230px,30px);}
      }
</style>

再次分析，可以看到，沒有發生紅色的重繪方塊且只有一條幀數，就知道動畫肯定會流暢絲滑。

因為 transform 屬性不會改變自己和他周圍元素的布局，他會對元素的整體產生影響。

我們通過節點的 transform 可以修改節點的位置、旋轉、大小等。我們平常會使用 left 和 top 屬性來修改節點的位置，但正如上面所述，left 和 top 會觸發重布局，修改時的代價相當大。取而代之的更好方法是使用 translate，這個不會觸發重布局。

3.2 避免使用影響性能的 CSS 屬性

這些屬性會影響性能，因為它們需要進行復雜的計算和渲染，尤其是在動畫中使用時。這些屬性可能會導致瀏覽器進行重排和重繪，從而影響頁面的性能和流暢度。

如果您必須使用這些屬性，請盡可能減少它們的使用。例如，您可以嘗試使用 CSS3 的 transform 屬性來實現 box-shadow 和 border-radius 的效果，因為它們可以更好地利用瀏覽器的硬件加速。

例如，下面是一個使用 box-shadow 屬性的示例：

.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

這個 box-shadow 屬性會在元素周圍添加一個陰影效果，但是它會影響性能，因為瀏覽器需要進行復雜的計算和渲染。為了優化性能，我們可以使用 CSS3 的 transform 屬性來實現相同的效果：

.box {  transform: translateZ(0);  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

這個 transform 屬性會啟用硬件加速，從而提高性能。同時，我們仍然可以使用 box-shadow 屬性來添加陰影效果。

3.3 避免使用復雜的選擇器

選擇器和動畫之間存在一定的關系。在 CSS 動畫中，選擇器的復雜度越高，樣式計算的時間就越長。在動畫中使用復雜的選擇器會導致瀏覽器需要更長的時間來計算樣式，從而影響動畫的性能和流暢度。

例如，當我們使用復雜的選擇器來選擇元素，并為它們添加動畫效果時，瀏覽器需要花費更長的時間來計算樣式，從而影響動畫的性能和流暢度。相反，當我們使用簡單的選擇器來選擇元素，并為它們添加動畫效果時，瀏覽器可以更快地計算樣式，從而提高動畫的性能和流暢度。

假設我們有一個列表，其中包含多個項目。我們想要為這些項目添加一個簡單的動畫效果，當鼠標懸停在項目上時，項目的背景色會漸變為藍色。我們可以使用以下 CSS 代碼來實現這個效果：

/* 使用類選擇器來選擇所有項目 */
.item {
  background-color: #fff; /* 初始背景色為白色 */
  transition: background-color 0.3s ease; /* 添加背景色漸變動畫 */
}


/* 當鼠標懸停在項目上時，將背景色漸變為藍色 */
.item:hover {
  background-color: #007bff; /* 背景色漸變為藍色 */
}

在這個例子中，我們使用了類選擇器來選擇所有的項目，并為它們添加了一個初始的背景色和一個背景色漸變動畫。當鼠標懸停在項目上時，我們使用: hover 偽類選擇器來選擇當前懸停的項目，并將其背景色漸變為藍色。

這個例子中的選擇器非常簡單，瀏覽器可以很快地計算樣式，從而提高動畫的性能和流暢度。相比之下，如果我們使用復雜的選擇器來選擇項目，并為它們添加動畫效果，瀏覽器需要花費更長的時間來計算樣式，從而影響動畫的性能和流暢度。

3.4 使用 will-change

使用 will-change 屬性來告訴瀏覽器哪些元素將要進行動畫，以便瀏覽器提前進行優化。

will-change 屬性是 CSS3 的一個新屬性，它可以告訴瀏覽器哪些元素將要進行動畫，從而使瀏覽器可以提前進行優化，提高動畫的性能和流暢度。

例如，如果您要對某個元素進行動畫，您可以在 CSS 中添加以下代碼：

#textbox {
  opacity: 1; /* 初始透明度為1 */
  transition: opacity 0.3s ease; /* 添加透明度漸變動畫 */
  will-change: opacity; /* 告知瀏覽器我們將會修改透明度 */
}

在這個例子中，我們使用 will-change 屬性來告知瀏覽器我們將會修改文本框的透明度，從而使瀏覽器可以提前進行優化。當動畫開始時，瀏覽器已經準備好了相應的資源，從而可以更快地渲染動畫，提高動畫的性能和流暢度。

需要注意的是，will-change 屬性應該謹慎使用，因為它可能會導致瀏覽器提前分配額外的內存和資源，從而影響頁面的性能。因此，只有在必要的情況下才應該使用 will-change 屬性。

CSS3 will-change 屬于 web 標準屬性，兼容性這塊 Chrome/FireFox/Opera 都是支持的。

使用 will-change 屬性是優化 CSS 動畫的重要技巧之一，可以提高動畫的性能和流暢度。

3.5 使用 requestAnimationFrame

requestAnimationFrame 代替 setTimeout 或 setInterval 來執行動畫，因為它可以最大程度地利用瀏覽器的優化。

requestAnimationFrame 是瀏覽器提供的一個 API，它可以讓我們在下一次瀏覽器繪制之前執行動畫。與 setTimeout 或 setInterval 相比，requestAnimationFrame 可以更好地利用瀏覽器的優化，從而提高動畫的性能和流暢度。

例如，如果您要對某個元素進行動畫，您可以使用 requestAnimationFrame 來執行動畫：

function animate() {
  // 更新元素的樣式
  element.style.transform = 'translateX(100px)';

  // 使用requestAnimationFrame執行下一幀動畫
  requestAnimationFrame(animate);
}


// 開始執行動畫
requestAnimationFrame(animate);

在上面的代碼中，我們使用 requestAnimationFrame 來執行動畫。在每一幀動畫中，我們更新元素的樣式，然后使用 requestAnimationFrame 執行下一幀動畫。這樣可以最大程度地利用瀏覽器的優化，提高動畫的性能和流暢度。

需要注意的是，requestAnimationFrame 并不是所有瀏覽器都支持，因此在使用它時需要進行兼容性處理。通常情況下，我們可以使用一個polyfill來實現 requestAnimationFrame 的兼容性。

3.6 避免在動畫中使用 JavaScript 操作 DOM

在動畫中使用 JavaScript 操作 DOM 會影響性能，主要是因為 DOM 操作是非常耗費資源的，因為這會引起重排和重繪。每次操作 DOM 都會觸發瀏覽器重新計算元素的布局和重新繪制元素，這些操作會消耗大量的 CPU 資源和內存，導致動畫卡頓或者不流暢。

在動畫中，如果需要頻繁地操作DOM，就會導致性能問題。例如，如果在動畫中使用 JavaScript 來改變元素的位置、尺寸、樣式等屬性，就會觸發 DOM 操作，影響動畫的流暢度。

如果必須使用 JavaScript 操作 DOM，請盡可能減少它們的使用。例如，您可以在動畫開始前將需要操作的元素緩存到變量中，然后在動畫中直接使用這些變量，而不是每次都重新查找元素。

另外，還可以使用 CSS3 的動畫屬性來代替 JavaScript 操作 DOM。例如，使用 animation 屬性可以實現復雜的動畫效果，而不需要使用 JavaScript 操作 DOM，下面會詳細說為什么用盡量用 css 動畫而不使用 javascript 動畫。

3.7 用 CSS 動畫盡量不使用 JavaScript 動畫

因為前者可以更好地利用瀏覽器的優化。

假設我們有一個按鈕，當用戶點擊按鈕時，我們想要將一個文本框從屏幕上移除，并在移除時添加一個簡單的動畫效果。我們可以使用以下 JavaScript 代碼來實現這個效果：

var textbox = document.getElementById('textbox'); // 獲取文本框元素
var button = document.getElementById('button'); // 獲取按鈕元素


button.addEventListener('click', function() {
  textbox.style.opacity = 0; // 文本框透明度漸變為0
  setTimeout(function() {
    textbox.parentNode.removeChild(textbox); // 移除文本框元素
  }, 300); // 延遲300毫秒后移除文本框元素
});

在這個例子中，我們使用 JavaScript 操作 DOM 元素，通過獲取文本框和按鈕元素，并在按鈕被點擊時逐漸將文本框的透明度降低到 0，然后在 300 毫秒后移除文本框元素。

然而，這種方法會導致瀏覽器進行重排和重繪，從而影響動畫的性能和流暢度。相反，我們可以使用 CSS3 的 transition 屬性來實現一個簡單的動畫效果，而無需使用 JavaScript 操作 DOM 元素。

例如，我們可以使用以下 CSS 代碼來實現一個簡單的動畫效果，當用戶點擊按鈕時，文本框會逐漸消失：

#textbox {
  opacity: 1; /* 初始透明度為1 */
  transition: opacity 0.3s ease; /* 添加透明度漸變動畫 */
}


#textbox.hide {
  opacity: 0; /* 透明度漸變為0 */
}

在這個例子中，我們使用 CSS3 的 transition 屬性來實現一個簡單的透明度漸變動畫。當用戶點擊按鈕時，我們使用 JavaScript 為文本框添加一個 hide 類，這個類會將文本框的透明度逐漸降低到 0，從而實現文本框逐漸消失的動畫效果。

這個例子中的動畫效果可以直接作用于 DOM 元素，而無需使用 JavaScript 操作 DOM 元素，從而提高動畫的性能和流暢度。

在動畫中使用 CSS 動畫可以更好地利用瀏覽器的硬件加速，從而提高動畫的性能和流暢度。相比之下，JavaScript 動畫通常需要更多的計算和操作，從而影響動畫的性能和流暢度。

當然，在某些情況下，JavaScript 動畫可能是必要的。例如，在需要與用戶交互的動畫中，JavaScript 動畫可以更好地控制動畫的行為。但是，在這種情況下，我們仍然應該盡可能減少 JavaScript 操作的次數，以提高動畫的性能和流暢度。

四、結論

動畫給予了頁面豐富的視覺體驗。我們應該盡力避免使用會觸發重布局和重繪的屬性，以免失幀。最好提前申明動畫，這樣能讓瀏覽器提前對動畫進行優化。由于 GPU 的參與，現在用來做動畫的最好屬性是如下幾個：* opacity* translate* rotate* scale，Javascript 優化、減少 Layout 和 Paint。希望對大家了解瀏覽器的渲染機制和日常的動畫開發有所幫助。

性能優化是一件不斷持續，不斷深入的事情。我們通過本文中所介紹的改進措施對頁面性能實現了很大的優化，達到了不錯的效果。后續也會在此基礎之上對還可提高的地方繼續加深，后續提供通用的解決方案。