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

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

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

在以下情況下這樣做：

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

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

中的渲染元素

>變換

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

>

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

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

<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é)果還不錯(cuò)，動(dòng)畫效果很好。為什么？因?yàn)楝F(xiàn)在變模的價(jià)格昂貴的背景已移至另一個(gè)復(fù)合層，并且每個(gè)動(dòng)畫步驟的重新粉刷都很便宜。

使用謹(jǐn)慎的硬件加速度

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

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

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

>使用“變換黑客”創(chuàng)建單獨(dú)的復(fù)合層的必要性很麻煩。瀏覽器絕對應(yīng)該提供一種直接的方法來實(shí)現(xiàn)這一目標(biāo)。這就是為什么引入了Will-Change屬性的原因。此功能使您可以通知瀏覽器哪些屬性將要更改，因此瀏覽器可以事先進(jìn)行相應(yīng)的優(yōu)化。這是一個(gè)告知瀏覽器的示例，將更改轉(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可以提高動(dòng)畫的質(zhì)量