作者簡介

Kay Huang，攜程高級視覺設(shè)計師，專注于前端樣式與動畫領(lǐng)域。

一 、背景

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

二、渲染優(yōu)化

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

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

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

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

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

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

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

三、解決方案

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

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

3.1 開啟 GPU 加速

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

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

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

<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 查看可以看到紅色方塊都是布局重繪。

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

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

現(xiàn)在，將動畫用 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>

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

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

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

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

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

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

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

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

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

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

這個 transform 屬性會啟用硬件加速，從而提高性能。同時，我們?nèi)匀豢梢允褂?box-shadow 屬性來添加陰影效果。

3.3 避免使用復(fù)雜的選擇器

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

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

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

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


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

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

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

3.4 使用 will-change

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

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

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

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

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

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

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

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

3.5 使用 requestAnimationFrame

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

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

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

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

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


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

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

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

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

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

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

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

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

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

因為前者可以更好地利用瀏覽器的優(yōu)化。

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

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


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

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

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

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

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


#textbox.hide {
  opacity: 0; /* 透明度漸變?yōu)? */
}

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

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

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

當然，在某些情況下，JavaScript 動畫可能是必要的。例如，在需要與用戶交互的動畫中，JavaScript 動畫可以更好地控制動畫的行為。但是，在這種情況下，我們?nèi)匀粦?yīng)該盡可能減少 JavaScript 操作的次數(shù)，以提高動畫的性能和流暢度。

四、結(jié)論

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

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