1. 程式人生 > >css優化,提高性能

css優化,提高性能

spa 加載 復雜 gpu 高性能 style 進行 等等 blog

CSS 優化主要是四個方面:
  1. 加載性能
    比如不要用 @import 等等,@import會影響css文件的加載速度,考慮加載性能時,主要是從減少文件體積、減少阻塞加載、提高並發方面入手,任何 hint 都逃不出這幾個大方向。
  2. 選擇器性能
    selector 對整體性能的影響現如今其實可以忽略不計了,selector 的考察更多是規範化和可維護性、健壯性方面,很少有人在實際工作當中會把選擇器性能作為重點關註對象的,但知道總比不知道好,(合理選用選擇器,沒必要用id選擇器的情況下,盡量少用)。
  3. 渲染性能
    渲染性能是 CSS 優化最重要的關註對象。頁面渲染 junky 過多?看看是不是大量使用了 text-shadow?是不是開了字體抗鋸齒?CSS 動畫怎麽實現的?(對於一些復雜,看似炫酷,卻毫無意義的動畫特效,可考慮砍掉不寫),合理利用 GPU 加速了嗎(合理使用cache進行渲染)。
  4. 可維護性
    命名合理嗎?結構層次設計是否足夠健壯?(一般嵌套不要超過5層),對樣式進行復用了嗎?優雅的 CSS 不僅僅會影響後期的維護成本,也會對加載性能等方面產生影響。

css優化,提高性能