現在的位置: 首頁 > 移動開發 > 正文

CSS3動畫性能怎么優化

2020年06月10日 移動開發 ⁄ 共 3374字 ⁄ 字號 評論關閉

  首先要了解CSS的圖層的概念(Chrome瀏覽器)瀏覽器在渲染一個頁面時,會將頁面分為很多個圖層,圖層有大有小,每個圖層上有一個或多個節點。下面學步園小編來講解下前端CSS3動畫性能怎么優化?

  前端CSS3動畫性能怎么優化

  DOM的時候,瀏覽器所做的工作實際上是:

  1.獲取DOM后分割為多個圖層

  2.對每個圖層的節點計算樣式結果(Recalculate style--樣式重計算)

  3.為每個節點生成圖形和位置(Layout--回流和重布局)

  4.將每個節點繪制填充到圖層位圖中(Paint Setup和Paint--重繪)

  5.圖層作為紋理上傳至GPU

  6.符合多個圖層到頁面上生成最終屏幕圖像(Composite Layers--圖層重組)

  Chrome中滿足以下任意情況就會創建圖層:

  *3D或透視變換(perspective transform)CSS屬性

  *使用加速視頻解碼的

  *擁有3D(WebGL)上下文或加速的2D上下文的節點

  *混合插件(如Flash)

  *對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素

  *擁有加速CSS過濾器的元素

  *元素有一個包含復合層的后代節點(一個元素擁有一個子元素,該子元素在自己的層里)

  *元素有一個z-index較低且包含一個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)

  需要注意的是,如果圖層中某個元素需要重繪,那么整個圖層都需要重繪。比如一個圖層包含很多節點,其中有個gif圖,gif圖的每一幀,都會重回整個圖層的其他節點,然后生成最終的圖層位圖。所以這需要通過特殊的方式來強制gif圖屬于自己一個圖層(translateZ(0)或者translate3d(0,0,0)),CSS3的動畫也是一樣(好在絕大部分情況瀏覽器自己會為CSS3動畫的節點創建圖層)

  層和CSS動畫

  簡化一下上述過程,每一幀動畫瀏覽器可能需要做如下工作:

  1.計算需要被加載到節點上的樣式結果(Recalculate style--樣式重計算)

  2.為每個節點生成圖形和位置(Layout--回流和重布局)

  3.將每個節點填充到圖層中(Paint Setup和Paint--重繪)

  4.組合圖層到頁面上(Composite Layers--圖層重組)

  如果我們需要使得動畫的性能提高,需要做的就是減少瀏覽器在動畫運行時所需要做的工作。最好的情況是,改變的屬性僅僅印象圖層的組合,變換(transform)和透明度(opacity)就屬于這種情況

  現代瀏覽器如Chrome,Firefox,Safari和Opera都對變換和透明度采用硬件加速,但IE10+不是很確定是否硬件加速

  觸發重布局的屬性

  有些節點,當你改變他時,會需要重新布局(這也意味著需要重新計算其他被影響的節點的位置和大小)。這種情況下,被影響的DOM樹越大(可見節點),重繪所需要的時間就會越長,而渲染一幀動畫的時間也相應變長。所以需要盡力避免這些屬性

  一些常用的改變時會觸發重布局的屬性:

  盒子模型相關屬性會觸發重布局:

  *width

  *height

  *padding

  *margin

  *display

  *border-width

  *border

  *min-height

  定位屬性及浮動也會觸發重布局:

  *top

  *bottom

  *left

  *right

  *position

  *float

  *clear

  改變節點內部文字結構也會觸發重布局:

  *text-align

  *overflow-y

  *font-weight

  *overflow

  *font-family

  *line-height

  *vertival-align

  *white-space

  *font-size

  這么多常用屬性都會觸發重布局,可以看到,他們的特點就是可能修改整個節點的大小或位置,所以會觸發重布局

  前端CSS3動畫性能怎么優化

  別使用CSS類名做狀態標記

  如果在網頁中使用CSS的類來對節點做狀態標記,當這些節點的狀態標記類修改時,將會觸發節點的重繪和重布局。所以在節點上使用CSS類來做狀態比較是代價很昂貴的

  觸發重繪的屬性

  修改時只觸發重繪的屬性有:

  *color

  *border-style

  *border-radius

  *visibility

  *text-decoration

  *background

  *background-image

  *background-position

  *background-repeat

  *background-size

  *outline-color

  *outline

  *outline-style

  *outline-width

  *box-shadow

  這樣可以看到,這些屬性都不會修改節點的大小和位置,自然不會觸發重布局,但是節點內部的渲染效果進行了改變,所以只需要重繪就可以了

  手機就算重繪也很慢

  在重繪時,這些節點會被加載到GPU中進行重繪,這對移動設備如手機的影響還是很大的。因為CPU不如臺式機或筆記本電腦,所以繪畫巫妖的時間更長。而且CPU與GPU之間的有較大的帶寬限制,所以紋理的上傳需要一定時間

  觸發圖層重組的屬性

  透明度竟然不會觸發重繪?

  需要注意的是,上面那些觸發重繪的屬性里面沒有opacity(透明度),很奇怪不是嗎?實際上透明度的改變后,GPU在繪畫時只是簡單的降低之前已經畫好的紋理的alpha值來達到效果,并不需要整體的重繪。不過這個前提是這個被修改opacity本身必須是一個圖層,如果圖層下還有其他節點,GPU也會將他們透明化

  強迫瀏覽器創建圖層

  在Blink和WebKit的瀏覽器中,一當一個節點被設定了透明度的相關過渡效果或動畫時,瀏覽器會將其作為一個單獨的圖層,但很多開發者使用translateZ(0)或者translate3d(0,0,0)去使瀏覽器創建圖層。這種方式可以消除在動畫開始之前的圖層創建時間,使得動畫盡快開始(創建圖層和繪制圖層還是比較慢的),而且不會隨著抗鋸齒而導出突變。不過這種方法需要節制,否則會因為創建過多的圖層導致崩潰

  Chrome中的抗鋸齒

  Chrome中,非根圖層以及透明圖層使用grayscale antialiasing而不是subpixel antialiasing,如果抗鋸齒方法變化,這個效果將會非常顯著。如果你打算預處理一個節點而不打算等到動畫開始,可以通過這種強迫瀏覽器創建圖層的方式進行

  transform變換是你的選擇

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

  JS動畫和CSS3動畫的比較

  我們經常面臨一個抉擇:是使用JavaScript的動畫還是使用CSS的動畫,下面將對比一下這兩種方式

  JS動畫

  缺點:JavaScript在瀏覽器的主線程中運行,而其中還有很多其他需要運行的JavaScript、樣式計算、布局、繪制等對其干擾。這也就導致了線程可能出現阻塞,從而造成丟幀的情況。

  優點:JavaScript的動畫與CSS預先定義好的動畫不同,可以在其動畫過程中對其進行控制:開始、暫停、回放、中止、取消都是可以做到的。而且一些動畫效果,比如視差滾動效果,只有JavaScript能夠完成

  CSS動畫

  缺點:缺乏強大的控制能力。而且很難以有意義的方式結合到一起,使得動畫變得復雜且易于出問題。

  優點:瀏覽器可以對動畫進行優化。它必要時可以創建圖層,然后在主線程之外運行。

  前瞻

  Google目前正在探究通過JS的多線程(Web Workers)來提供更好的動畫效果,而不會觸發重布局及樣式重計算。

  以上就是關于“CSS3動畫性能怎么優化”的內容,希望對大家有用。更多資訊請關注學步園。學步園,您學習IT技術的優質平臺!

抱歉!評論已關閉.

奔驰宝马破解版下载 大单网 股票短线秘笈 pk10收费精准计划群 湖北快三走势图一定牛 宁夏彩票十一选五 江苏11选5直5遗漏 上证指数每日行情凤凰网 青海快3今天开 体育彩票复工时间 保变电气股票股吧 浪潮信息股票怎么样 河北快三玩法规则 易配资 股票市场的基本结构图 浙江20选5走势图超长版 江苏快三彩票手机版下载