高效CSS的一些建议
1. 把css放在head區
?? ?Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk.
?? ?由于頁面中所有css下載并解析完成之前, 瀏覽器不會開始渲染頁面, 又<head>中的內容下載、解析完成之前瀏覽器不會開始解析body,所以將css放在head區是個好方案。
2.避免使用 css @import
?? ?以前在網上看到這條建議時，給的原因是說這樣做相當于把css放在了頁面底部，關于這種說法我一直很迷惑,為什么@import就相當于放到底部了?直到前幾天在google developers看到下面這句話, 才知道真像并不是這樣的：
?? ?When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times? to the overall page load. For instance, if first.css contains the following content: @import url("second.css"), The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
???? 上面這段句的大致意思: 當外聯的css文件中(這里我們假設是a.css)使用了@import指令(假設import的是b.css)時, 瀏覽器必須要等到a.css下載完成后解析它的過程中才能發現還有一個b.css需要下載, 于是去下載b.css, 而a.css中的其余代碼也必須要等到b.css下載并解析完成后才能被解析. 這一來一去就降低了頁面的渲染速度.
???? 如果a.css和b.css都采用外聯的方式引入, 則二者可以并行下載, 這樣可以提升頁面渲染速度, 在頁面中包括數十個css時尤其明顯.
3. 去除不必要的css
?? ?網站公用的樣式通常會被提到一個通用的css文件中，然后被多個頁面引用，隨著這個common.css越來越大，它的很多內容都是某個具體的頁面所用不到的。對于這種情況，建議將common.css按功能拆分成幾個小文件，然后按需引用。
4.避免使用css expression, filter等IE屬性
?? ?css expression會在頁面任何事件發生時重新計算、執行，所以很消耗資源，并且只有IE5-7支持，IE8中已廢棄。等效的兼容方案可采用js實現。
轉載于:https://www.cnblogs.com/linfengtingyu1/p/3491853.html
總結
以上是生活随笔為你收集整理的高效CSS的一些建议的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎样为Linux内核打补丁
- 下一篇： sql：数据定义语言ddl