CSS 性能優化筆記

LiuZh 發布于2019-08-29 11:30 / 729人閱讀

摘要：硬件加速是指應用的圖形性能對瀏覽器中的一些圖形操作交給來完成，因為是專門為處理圖形而設計，所以它在速度和能耗上更有效率。

在實習做一個移動項目的時候，實現一個動畫效果，在 iPhone 和 Chrome 上調試沒有問題，在千元左右的 Android 機上測試問題就很大了，卡頓非常明顯，百思不得其解，吐血，卒。

這個悲傷的故事就是本文的引子，真真切切的體會到了 CSS 對用戶體驗的影響非常明顯，稍有不慎就是一個大坑。下面，我們就來談談 CSS 性能優化的問題。

加載性能

減少文件體積，壓縮代碼

減少阻塞加載，不要用 import

提高并發（這個不甚理解）

選擇器性能

對整體性能的影響可以忽略不計了，但是選擇器的考究更多是為了規范化和可維護性、健壯性。具體怎么實施可以參考 Github 的這個分享：GitHub"s CSS Performance by Jon Rohan

渲染性能

渲染性能是 CSS 優化最重要的關注對象。我們先來了解一下瀏覽器的渲染機制。

瀏覽器的渲染機制

瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟：

解析HTML(HTML Parser)

構建DOM樹(DOM Tree)

渲染樹構建(Render Tree)

繪制渲染樹(Painting)

慎重選擇高消耗的樣式

什么 CSS 屬性是高消耗的？就是那些繪制前需要瀏覽器進行大量計算的屬性。

box-shadows

border-radius

transparency

transforms

CSS filters（性能殺手）

避免過分重排(Reflow)

簡單解釋一下 Reflow：當元素改變的時候，將會影響文檔內容或結構，或元素位置，此過程稱為 Reflow。

常見的重排元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

怎么減少 Reflow

不要一條一條地修改 DOM 的樣式，預先定義好 class，然后修改 DOM 的 className

把 DOM 離線后修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然后你修改100次，然后再把它顯示出來

不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量

盡可能不要修改影響范圍比較大的 DOM

為動畫的元素使用絕對定位 absolute / fixed

不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局

避免過分重繪(Repaints)

當元素改變的時候，將不會影響元素在頁面當中的位置（比如 background-color, border-color, visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱為 Repaint。

常見的重繪元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

優化動畫

CSS3 動畫是優化的重中之重。除了做到上面兩點，減少 Reflow 和 Repaints 之外，還需要注意以下方面。

啟用 GPU 硬件加速

GPU（Graphics Processing Unit）是圖像處理器。GPU 硬件加速是指應用 GPU 的圖形性能對瀏覽器中的一些圖形操作交給 GPU 來完成，因為 GPU 是專門為處理圖形而設計，所以它在速度和能耗上更有效率。
GPU 加速可以不僅應用于3D，而且也可以應用于2D。這里， GPU 加速通常包括以下幾個部分：Canvas2D，布局合成（Layout Compositing）, CSS3轉換（transitions），CSS3 3D變換（transforms），WebGL和視頻(video)。

/*
 * 根據上面的結論
 * 將 2d transform 換成 3d
 * 就可以強制開啟 GPU 加速
 * 提高動畫性能
 */
div {
  transform: translate(10px, 10px);
}
div {
  transform: translate3d(10px, 10px, 0);
}

需要注意的是，開啟硬件加速相應的也會有額外的開銷，參見這篇文章 CSS 硬件加速的好與壞

參考

CSS 優化、提高性能的方法有哪些？ - 趙望野

CSS performance revisited: selectors, bloat and expensive styles

瀏覽器的渲染原理簡介

談談 CSS 性能

前端工程師需要明白的「瀏覽器渲染」

學習通過 CSS 硬件加速提升你網站的性能

CSS 硬件加速的好與壞

兩張圖解釋 CSS 動畫的性能

云服務器 GPU云服務器 css優化性能優化優化系統性能網站性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111689.html

網頁優化相關筆記一

摘要：優化條法則減少請求次數是性能優化的起點?？偽募笮∽兓淮螅珳p少了請求次數從而加快了頁面顯示速度。使用內容分發網絡可以通過服務提供商增加緩存相關壓縮頁面元素通過壓縮響應內容可減少頁面響應時間?；煜亲钚』谠创a的備選方式。 Yahoo WEB優化14條法則減少HTTP請求次數是性能優化的起點。這最提高首次訪問的效率起到很重要的作用。減少HTTP請求次數 Image maps組合多...

codecook 2019-08-19 18:11 評論0 收藏0
JS性能優化筆記

摘要：四如果需要遍歷數組，應該先緩存數組長度，將數組長度放入局部變量中，避免多次查詢數組長度。五盡量選用局部變量而不是全局變量。所以如果這樣的表達式重復出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。通過網上查找資料了解關于性能優化方面的內容，現簡單整理，僅供大家在優化的過程中參考使用，如有什么問題請及時提出，再做出相應的補充修改。一、讓...

baoxl 2019-08-21 10:20 評論0 收藏0
讀書筆記(03) - 性能 - JavaScript高級程序設計

摘要：作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會與之相反，繼續保存，所以使用用后需手動標記清除，以免造成內存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級程序設計作者以樂之名本文原創，有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域鏈查找作用域鏈的查找是逐層向上查找。查...

warnerwu 2019-08-23 13:52 評論0 收藏0
前端面試筆記 - 性能

摘要：頁面中元素的布局是相對的，因此一個元素的布局發生變化，會聯動地引發其他元素的布局發生變化。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

JouyPub 2019-08-23 14:50 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0