> Chrome的DevTools中可用的另一個功能以跟蹤重新粉刷過程是“啟用油漆閃爍”。您可以通過打開DevTools，鍵入ESC鍵，然后選擇“渲染”選項卡來找到此選項。當打開此功能時，綠色框（即油漆矩形）將出現(xiàn)在重新粉刷的區(qū)域周圍。在左和頂部的示例中，球有一個用于整個動畫過程的綠色盒子，指示重新涂片。

內(nèi)存中，從而避免了軟件渲染。讓我們更詳細地看一下。

> 在我們的示例中，CSS變換創(chuàng)建了一個可以直接在GPU中轉(zhuǎn)換的新復合層。 Chrome的DevTools允許使用“顯示層邊框”選項查看復合層。每個復合層都有一個橙色邊框。

在以下情況下這樣做：

>
• 或 elements
• 使用CSS過濾器
• 對于一個元素，該元素與提取到復合??層的另一個元素重疊（例如，使用z index）
>
您可能會在想，‘堅持下去。此示例使用2D翻譯，而不是3D變換。你是對的。這就是為什么有兩個額外的重新粉刷操作 - 在我們的時間表中動畫過程的開始和結(jié)束時。

3D和2D變換之間的區(qū)別在于3D變換使瀏覽器事先創(chuàng)建一個單獨的復合層，而2D變換則可以飛行。在動畫開始時，創(chuàng)建了一個新的復合層，并將紋理加載到GPU上，該GPU啟動重新粉刷。然后，動畫由GPU中的合成器執(zhí)行。動畫完成后，將刪除附加的復合層，從而導致另一個重新粉刷的操作。

中的渲染元素

>變換

不透明度
>過濾
為了確保獲得平滑，高質(zhì)量的動畫的最佳機會，我們應該始終嘗試使用這些gpu友好的屬性。
強迫要在gpu

>

>這是讓瀏覽器知道我們要執(zhí)行3D變換。這使得瀏覽器創(chuàng)建一個單獨的圖層并事先將元素移至GPU，從而觸發(fā)硬件加速度。 由于其背后的另一個元素的重新粉刷過于昂貴時，此技術(shù)也很有用。讓我們回到第一個示例，然后稍微更改它，以便它包含一個單個球和一個使用CSS濾鏡模糊的背景圖像的容器。球具有左側(cè)和頂部特性的動畫。

請參閱codepen上的sitepoint（@sitepoint）用頂部/左屬性的球動畫。

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

現(xiàn)在，讓我們將轉(zhuǎn)換hack添加到容器中。

>請參閱codepen上的sitepoint（@sitepoint）的硬件加速的左/頂部屬性。

結(jié)果還不錯，動畫效果很好。為什么？因為現(xiàn)在變模的價格昂貴的背景已移至另一個復合層，并且每個動畫步驟的重新粉刷都很便宜。

使用謹慎的硬件加速度

>沒有免費的。有一些與硬件加速有關(guān)的問題。

內(nèi)存
最重要的問題與內(nèi)存有關(guān)。為GPU加載太多紋理可能會導致內(nèi)存問題。這在移動設備上確實至關(guān)重要，甚至可能崩潰移動瀏覽器。介意后果，不要為頁面上的每個元素使用硬件加速度。

GPU的渲染會影響字體抗疊疊。發(fā)生這種情況是因為GPU和CPU具有不同的渲染機制。因此，即使您在動畫結(jié)束時關(guān)閉硬件加速度，在動畫過程中將顯示文本模糊。您可以在基思·克拉克（Keith Clark）的這篇文章中閱讀有關(guān)字體渲染問題的更多信息。
不久的將來

>使用“變換黑客”創(chuàng)建單獨的復合層的必要性很麻煩。瀏覽器絕對應該提供一種直接的方法來實現(xiàn)這一目標。這就是為什么引入了Will-Change屬性的原因。此功能使您可以通知瀏覽器哪些屬性將要更改，因此瀏覽器可以事先進行相應的優(yōu)化。這是一個告知瀏覽器的示例，將更改轉(zhuǎn)換屬性：>

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

• 結(jié)論
• 總結(jié)我們涵蓋的內(nèi)容：

>使用GPU可以提高動畫的質(zhì)量