成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實用的 CSS — 動畫性能對比

jonh_felix / 3003人閱讀

摘要：歡迎移步我的博客閱讀實用的動畫性能對比前言在現(xiàn)代瀏覽器中，渲染頁面所要負(fù)責(zé)的線程主要有兩個主線程和排版線程。經(jīng)過上面的實驗，我們對屬性有了比較好的了解同時我們對上述動畫性能也有一個了解。

歡迎移步我的博客閱讀：《實用的 CSS — 動畫性能對比》
前言

在現(xiàn)代瀏覽器中，渲染頁面所要負(fù)責(zé)的線程主要有兩個：主線程和排版線程。

主線程

運行 JS

計算 HTML 元素的 CSS 樣式

布局頁面

把頁面元素繪制成一個或多個位圖

把這些位圖移交給排版線程

在瀏覽器開始渲染頁面，或者長時間執(zhí)行某個 JS 時，主線程會一直在忙碌狀態(tài)，此時對于用戶的任何輸入或是操作都不會有所響應(yīng)。

排版線程

通過 GPU 渲染位圖，并顯示在屏幕上

向主線程請求更新位圖的可見部分或即將可見的部分

判斷出當(dāng)前頁面處于可見的部分

判斷出即將通過頁面滾動而可見的部分

隨著用戶滾動頁面來移動這些部分

排版線程對于用戶的操作保持快速的響應(yīng)，普遍的效率時每秒 60 幀的速度去刷新顯示。

Transtion

下面我們在網(wǎng)頁中實現(xiàn)一個元素的高度變化的動畫，鼠標(biāo)懸浮在元素上動畫啟動，直至完成：

通過對上述代碼的觀察，讓我們來了解一下瀏覽器的兩個線程是如何協(xié)同工作的：

圖中橘黃色部分代表操作相對較慢，消耗較大；藍(lán)色部分代表操作相對較快，消耗較小

從上圖我們可以看到，瀏覽器的兩個線程在來回地切換工作，而且橘黃色出現(xiàn)次數(shù)較多，這意味著瀏覽器需要處理相當(dāng)多的工作。

對于瀏覽器而言，由于元素的高度一直在變化，因此這個動畫的每一幀中，都需要重新布局 ——> 繪制頁面 ——> 將新的位圖加載到 GPU 中 ——> 顯示。而其中加載到 GPU 是一個相對緩慢的操作。

同時我們也在通過瀏覽器去查看元素動畫的過程，其實是由略微卡頓的現(xiàn)象的。

Transform

經(jīng)過上面的實驗，我們對 transition 屬性有了比較好的了解；同時我們對上述動畫性能也有一個了解。接著我需要在網(wǎng)頁中實現(xiàn)一個元素的大小變化動畫，鼠標(biāo)懸浮在元素上動畫啟動，直至完成：

完成上述實驗，再讓我們來看看兩個線程工作的過程：

由此我們可以看到，兩個線程來回切換的情況并不多，橘黃色部分出現(xiàn)的次數(shù)也較少，藍(lán)色部分居絕大部分，這意味著這個動畫效果相較于上面的要流暢很多。

在定義中，transform 是不會使瀏覽器產(chǎn)生重新排版的，因此 transform 不會影響原本的布局，以及周圍的元素。它會將定義的元素作為一個整體進(jìn)行縮放、移動或旋轉(zhuǎn)等。

基于 transform 這類的特性，瀏覽器在渲染頁面時可以節(jié)省很多不必要的開支，例如重新布局和將位圖傳給 GPU 等工作，這樣就使得動畫更有效率。

總結(jié)

當(dāng)頁面需要位移動畫時，我們有兩種方案：使用 position 或是 transalte，而這兩種是符合上述情況的。其中 position 的位移方案與第一個符合，在動畫執(zhí)行過程中會使瀏覽器重新渲染；另一外 transalte 則與第二個符合，在執(zhí)行動畫時不會發(fā)生重新渲染。因此，在需要寫動畫時，我們需要選擇合適的方案，最好是選擇 scale()、rotate()、transalte() 等，因為他們具有更好的性能。

參考

W3C: CSS Transforms
W3C: CSS Transitions
css-animations-and-transitions-performance

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112256.html

相關(guān)文章

  • CSS 火焰？不在話下

    摘要：下圖是我鼓搗到另外一個小，當(dāng)?shù)皆氐臅r候，產(chǎn)生火焰效果嗯，這些其實都是對濾鏡及混合模式的一些搭配運用。主要幾個屬性默認(rèn)大家已經(jīng)掌握了大概，閱讀后可以自行去了解補充更多細(xì)節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點個訂閱收藏。正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。 嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的： 或者...

    Cciradih 評論0 收藏0

  • CSS 火焰？不在話下

    摘要：今天的小技巧是使用純生成火焰，逼真一點的火焰。如上圖，整個蠟燭的骨架，除去火焰的部分很簡單，掠過不講。利用上述，我們要先生成一個類似火焰形狀的三角形。 正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。 嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...

    olle 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評論0 收藏0

  • ELSE 技術(shù)周刊(2017.11.06期)

    摘要：業(yè)界動態(tài)成為版本，當(dāng)前發(fā)布版本為。前一階段主要聚焦于減少操作。技術(shù)縱橫重磅消息要支持開發(fā)和開發(fā)了主題演講當(dāng)中提出的第一項重要公告，正是候選發(fā)行版簡稱的公布。 業(yè)界動態(tài) NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成為LTS版本，...

    jiekechoo 評論0 收藏0

  • css相關(guān) - 收藏集 - 掘金

    摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個技巧前端掘金并不總是容易處理。 CSS3 實現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現(xiàn)了一下，順便...

    molyzzx 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<