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

資訊專欄INFORMATION COLUMN

CSS 性能優(yōu)化筆記

LiuZh / 743人閱讀

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

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

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

加載性能

減少文件體積，壓縮代碼

減少阻塞加載，不要用 import

提高并發(fā)（這個不甚理解）

選擇器性能

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

渲染性能

渲染性能是 CSS 優(yōu)化最重要的關(guān)注對象。我們先來了解一下瀏覽器的渲染機(jī)制。

瀏覽器的渲染機(jī)制

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

解析HTML(HTML Parser)

構(gòu)建DOM樹(DOM Tree)

渲染樹構(gòu)建(Render Tree)

繪制渲染樹(Painting)

慎重選擇高消耗的樣式

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

box-shadows

border-radius

transparency

transforms

CSS filters（性能殺手）

避免過分重排(Reflow)

簡單解釋一下 Reflow：當(dāng)元素改變的時候，將會影響文檔內(nèi)容或結(jié)構(gòu)，或元素位置，此過程稱為 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 的樣式，預(yù)先定義好 class，然后修改 DOM 的 className

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

不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量

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

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

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

避免過分重繪(Repaints)

當(dāng)元素改變的時候，將不會影響元素在頁面當(dāng)中的位置（比如 background-color, border-color, visibility），瀏覽器僅僅會應(yīng)用新的樣式重繪此元素，此過程稱為 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
優(yōu)化動畫

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

啟用 GPU 硬件加速

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

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

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

參考

CSS 優(yōu)化、提高性能的方法有哪些？ - 趙望野

CSS performance revisited: selectors, bloat and expensive styles

瀏覽器的渲染原理簡介

談?wù)?CSS 性能

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

學(xué)習(xí)通過 CSS 硬件加速提升你網(wǎng)站的性能

CSS 硬件加速的好與壞

兩張圖解釋 CSS 動畫的性能

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

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

相關(guān)文章

  • 網(wǎng)頁優(yōu)化相關(guān)筆記一

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

    codecook 評論0 收藏0

  • JS性能優(yōu)化筆記

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

    baoxl 評論0 收藏0

  • 讀書筆記(03) - 性能 - JavaScript高級程序設(shè)計

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

    warnerwu 評論0 收藏0

  • 前端面試筆記 - 性能

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

    JouyPub 評論0 收藏0

  • 前端優(yōu)化 - 收藏集 - 掘金

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

    VincentFF 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<