Web 前端最佳化最佳實務之 CSS 篇

作者: Fenng | 可以轉載, 轉載時務必以超連結形式標明文章原始出處和作者資訊及著作權聲明
網址: http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html

Web 前端最佳化最佳實務第四部分面向 CSS。目前共計有 6 條實踐規則。另請參見 Mozilla 開發人員中心的文章：Writing Efficient CSS

1. 把 ">CSS 放到字碼頁上端 (Put Stylesheets at the Top)

官方的解釋我覺得多少有點語焉不詳。這一條其實和使用者訪問期望有關。CSS 放到最頂部，瀏覽器能夠有針對性的對 ">HTML 頁面從頂到下進行解析和渲染。沒有人喜歡等待，而瀏覽器已經考慮到了這一點。

2. 避免 ">CSS 運算式 (Avoid ">CSS Expressions)

個人認為通過 ">CSS 運算式能做到的事情，通過其它手段也同樣能做到而且風險更小一些。

3. 從頁面中剝離 JavaScript 與 ">CSS (Make JavaScript and ">CSS External)

剝離後，能夠有針對性的對其進行單獨的處理策略，比如壓縮或者緩衝策略。

4. 精簡 JavaScript 與 ">CSS (Minify JavaScript and ">CSS)

如果沒有 JavaScript 與 ">CSS 可能更好。但，這是不可能的，SO，盡量小點吧。文法能簡寫的簡寫。

5. 使用 <link> 而不是@importChoose <link> over @import

在 ">IE 中 @import 指令等同於把 link 標記寫在 ">HTML 的底部。而這與第一條相違背。

6. 避免使用Filter (Avoid Filters)