CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite
Paint通常是其中最花費效能的,儘可能避免使用觸發paint的CSS動畫屬性,這也是為什麼我們推薦在CSS動畫中使用 webkit-transform: translateX(3em) 的方案代替使用 left: 3em ,因為left會額外觸發layout與paint,而webkit-transform只觸發整個頁面composite
p { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: #808080; position: absolute;}
@-webkit-keyframes move{ from { left: 100px; } to { left: 200px; }}
如使用left將持續觸發頁面重繪,表現為紅色邊框:
@-webkit-keyframes move{ from { -webkit-transform: translateX(100px); } to { -webkit-transform: translateX(200px); }}
如使用-webkit-transform頁面只發生重組,表現為橙色邊框:
CSS屬性在CSS動畫中行為表
高效能 CSS3 動畫
高效能移動Web相較PC的情境需要考慮的因素也相對更多更複雜,我們總結為以下幾點: 流量、功耗與流暢度。 在PC時代我們更多的是考慮體驗上的流暢度,而在Mobile端本身豐富的情境下,需要額外關注對使用者基站網路流量使用的情況,裝置耗電量的情況。
關於流暢度,主要體現在前端動畫中,在現有的前端動畫體系中,通常有兩種模式:JS動畫與CSS3動畫。 JS動畫是通過JS動態改寫樣式實現動畫能力的一種方案,在PC端相容低端瀏覽器中不失為一種推薦方案。 而在移動端,我們選擇效能更優瀏覽器原生實現方案:CSS3動畫。
然而,CSS3動畫在移動多終端裝置情境下,相比PC會面對更多的效能問題,主要體現在動畫的卡頓與閃爍。
目前對提升移動端CSS3動畫體驗的主要方法有幾點:
儘可能多的利用硬體能力,如使用3D變形來開啟GPU加速
-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
如動畫過程有閃爍(通常發生在動畫開始的時候),可以嘗試下面的Hack:
-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden; -webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;
如下面一個元素通過translate3d右移500px的動畫流暢度會明顯優於使用left屬性:
#ball-1 { transition: -webkit-transform .5s ease; -webkit-transform: translate3d(0, 0, 0);}#ball-1.slidein { -webkit-transform: translate3d(500px, 0, 0);} #ball-2 { transition: left .5s ease; left: 0;}#ball-2.slidein { left: 500px;}
註:3D變形會消耗更多的記憶體與功耗,應確實有效能問題時才去使用它,兼在權衡
儘可能少的使用box-shadows與gradients
box-shadows與gradients往往都是頁面的效能殺手,尤其是在一個元素同時都使用了它們,所以擁抱扁平化設計吧。
儘可能的讓動畫元素不在文檔流中,以減少重排
position: fixed;position: absolute;
最佳化 DOM layout 效能
我們從執行個體開始描述這個主題:
var newWidth = ap.offsetWidth + 10;ap.style.width = newWidth + 'px';var newHeight = ap.offsetHeight + 10;ap.style.height = newHeight + 'px'; var newWidth = ap.offsetWidth + 10;var newHeight = ap.offsetHeight + 10;ap.style.width = newWidth + 'px';ap.style.height = newHeight + 'px';
這是兩段能力上完全等同的代碼,顯式的差異正如我們所見,只有執行順序的區別。但真是如此嗎?下面是加了說明注釋的代碼版本,很好的闡述了其中的進一步差異:
// 觸發兩次 layoutvar newWidth = ap.offsetWidth + 10; // Readap.style.width = newWidth + 'px'; // Writevar newHeight = ap.offsetHeight + 10; // Readap.style.height = newHeight + 'px'; // Write // 只觸發一次 layoutvar newWidth = ap.offsetWidth + 10; // Readvar newHeight = ap.offsetHeight + 10; // Readap.style.width = newWidth + 'px'; // Writeap.style.height = newHeight + 'px'; // Write
從注釋中可找到規律,連續的讀取offsetWidth/Height屬性與連續的設定width/height屬性,相比分別讀取設定單個屬性可少觸發一次layout。
從結論看似乎與執行隊列有關,沒錯,這是瀏覽器的最佳化策略。所有可觸發layout的操作都會被暫時放入 layout-queue 中,等到必須更新的時候,再計算整個隊列中所有操作影響的結果,如此就可只進行一次的layout,從而提升效能。
關鍵一,可觸發layout的操作,哪些操作下會layout的更新(也稱為reflow或者relayout)?
我們從瀏覽器的源碼實現入手,以開源Webkit/Blink為例, 對layout的更新,Webkit 主要通過 Document::updateLayout 與Document::updateLayoutIgnorePendingStylesheets 兩個方法:
void Document::updateLayout(){ ASSERT(isMainThread()); FrameView* frameView = view(); if (frameView && frameView->isInLayout()) { ASSERT_NOT_REACHED(); return; } if (Element* oe = ownerElement()) oe->document()->updateLayout(); updateStyleIfNeeded(); StackStats::LayoutCheckPoint layoutCheckPoint; if (frameView && renderer() && (frameView->layoutPending() || renderer()->needsLayout())) frameView->layout(); if (m_focusedNode && !m_didPostCheckFocusedNodeTask) { postTask(CheckFocusedNodeTask::create()); m_didPostCheckFocusedNodeTask = true; }} void Document::updateLayoutIgnorePendingStylesheets(){ bool oldIgnore = m_ignorePendingStylesheets; if (!haveStylesheetsLoaded()) { m_ignorePendingStylesheets = true; HTMLElement* bodyElement = body(); if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) { m_pendingSheetLayout = DidLayoutWithPendingSheets; styleResolverChanged(RecalcStyleImmediately); } else if (m_hasNodesWithPlaceholderStyle) recalcStyle(Force); } updateLayout(); m_ignorePendingStylesheets = oldIgnore;}
從 updateLayoutIgnorePendingStylesheets 方法的內部實現可知,其也是對 updateLayout 方法的擴充,並且在現有的 layout 更新模式中,大部分情境都是調用 updateLayoutIgnorePendingStylesheets 來進行layout的更新。