資訊專欄INFORMATION COLUMN
摘要：歡迎移步我的博客閱讀實(shí)用的動(dòng)畫性能對(duì)比前言在現(xiàn)代瀏覽器中，渲染頁面所要負(fù)責(zé)的線程主要有兩個(gè)主線程和排版線程。經(jīng)過上面的實(shí)驗(yàn)，我們對(duì)屬性有了比較好的了解同時(shí)我們對(duì)上述動(dòng)畫性能也有一個(gè)了解。
前言歡迎移步我的博客閱讀：《實(shí)用的 CSS — 動(dòng)畫性能對(duì)比》
在現(xiàn)代瀏覽器中，渲染頁面所要負(fù)責(zé)的線程主要有兩個(gè)：主線程和排版線程。
主線程運(yùn)行 JS
計(jì)算 HTML 元素的 CSS 樣式
布局頁面
把頁面元素繪制成一個(gè)或多個(gè)位圖
把這些位圖移交給排版線程
在瀏覽器開始渲染頁面，或者長(zhǎng)時(shí)間執(zhí)行某個(gè) JS 時(shí)，主線程會(huì)一直在忙碌狀態(tài)，此時(shí)對(duì)于用戶的任何輸入或是操作都不會(huì)有所響應(yīng)。
排版線程通過 GPU 渲染位圖，并顯示在屏幕上
向主線程請(qǐng)求更新位圖的可見部分或即將可見的部分
判斷出當(dāng)前頁面處于可見的部分
判斷出即將通過頁面滾動(dòng)而可見的部分
隨著用戶滾動(dòng)頁面來移動(dòng)這些部分
排版線程對(duì)于用戶的操作保持快速的響應(yīng)，普遍的效率時(shí)每秒 60 幀的速度去刷新顯示。
Transtion下面我們?cè)诰W(wǎng)頁中實(shí)現(xiàn)一個(gè)元素的高度變化的動(dòng)畫，鼠標(biāo)懸浮在元素上動(dòng)畫啟動(dòng)，直至完成：
通過對(duì)上述代碼的觀察，讓我們來了解一下瀏覽器的兩個(gè)線程是如何協(xié)同工作的：
圖中橘黃色部分代表操作相對(duì)較慢，消耗較大；藍(lán)色部分代表操作相對(duì)較快，消耗較小
從上圖我們可以看到，瀏覽器的兩個(gè)線程在來回地切換工作，而且橘黃色出現(xiàn)次數(shù)較多，這意味著瀏覽器需要處理相當(dāng)多的工作。
對(duì)于瀏覽器而言，由于元素的高度一直在變化，因此這個(gè)動(dòng)畫的每一幀中，都需要重新布局 ——> 繪制頁面 ——> 將新的位圖加載到 GPU 中 ——> 顯示。而其中加載到 GPU 是一個(gè)相對(duì)緩慢的操作。
同時(shí)我們也在通過瀏覽器去查看元素動(dòng)畫的過程，其實(shí)是由略微卡頓的現(xiàn)象的。
Transform經(jīng)過上面的實(shí)驗(yàn)，我們對(duì) transition 屬性有了比較好的了解；同時(shí)我們對(duì)上述動(dòng)畫性能也有一個(gè)了解。接著我需要在網(wǎng)頁中實(shí)現(xiàn)一個(gè)元素的大小變化動(dòng)畫，鼠標(biāo)懸浮在元素上動(dòng)畫啟動(dòng)，直至完成：
完成上述實(shí)驗(yàn)，再讓我們來看看兩個(gè)線程工作的過程：
由此我們可以看到，兩個(gè)線程來回切換的情況并不多，橘黃色部分出現(xiàn)的次數(shù)也較少，藍(lán)色部分居絕大部分，這意味著這個(gè)動(dòng)畫效果相較于上面的要流暢很多。
在定義中，transform 是不會(huì)使瀏覽器產(chǎn)生重新排版的，因此 transform 不會(huì)影響原本的布局，以及周圍的元素。它會(huì)將定義的元素作為一個(gè)整體進(jìn)行縮放、移動(dòng)或旋轉(zhuǎn)等。
基于 transform 這類的特性，瀏覽器在渲染頁面時(shí)可以節(jié)省很多不必要的開支，例如重新布局和將位圖傳給 GPU 等工作，這樣就使得動(dòng)畫更有效率。
總結(jié)當(dāng)頁面需要位移動(dòng)畫時(shí)，我們有兩種方案：使用 position 或是 transalte，而這兩種是符合上述情況的。其中 position 的位移方案與第一個(gè)符合，在動(dòng)畫執(zhí)行過程中會(huì)使瀏覽器重新渲染；另一外 transalte 則與第二個(gè)符合，在執(zhí)行動(dòng)畫時(shí)不會(huì)發(fā)生重新渲染。因此，在需要寫動(dòng)畫時(shí)，我們需要選擇合適的方案，最好是選擇 scale()、rotate()、transalte() 等，因?yàn)樗麄兙哂懈玫男阅堋?/p> 參考
W3C: CSS Transforms
W3C: CSS Transitions
css-animations-and-transitions-performance
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112256.html
摘要：下圖是我鼓搗到另外一個(gè)小，當(dāng)?shù)皆氐臅r(shí)候，產(chǎn)生火焰效果嗯，這些其實(shí)都是對(duì)濾鏡及混合模式的一些搭配運(yùn)用。主要幾個(gè)屬性默認(rèn)大家已經(jīng)掌握了大概，閱讀后可以自行去了解補(bǔ)充更多細(xì)節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點(diǎn)個(gè)訂閱收藏。正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點(diǎn)的火焰。 嗯，長(zhǎng)什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的： 或者...
摘要：今天的小技巧是使用純生成火焰，逼真一點(diǎn)的火焰。如上圖，整個(gè)蠟燭的骨架，除去火焰的部分很簡(jiǎn)單，掠過不講。利用上述，我們要先生成一個(gè)類似火焰形狀的三角形。 正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點(diǎn)的火焰。 嗯，長(zhǎng)什么樣子？在 CodePen 上輸入關(guān)鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...
摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要：業(yè)界動(dòng)態(tài)成為版本，當(dāng)前發(fā)布版本為。前一階段主要聚焦于減少操作。技術(shù)縱橫重磅消息要支持開發(fā)和開發(fā)了主題演講當(dāng)中提出的第一項(xiàng)重要公告，正是候選發(fā)行版簡(jiǎn)稱的公布。 業(yè)界動(dòng)態(tài) NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成為L(zhǎng)TS版本，...
摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個(gè)技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動(dòng)畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實(shí)現(xiàn)了一下，順便...
閱讀 1709·2023-04-25 18:27
閱讀 1474·2021-10-19 11:44
閱讀 641·2021-10-14 09:42
閱讀 2209·2021-10-11 10:59
閱讀 2846·2021-09-24 09:47
閱讀 1796·2019-08-30 14:20
閱讀 1222·2019-08-30 14:08
閱讀 795·2019-08-29 15:15
