主页 >> 建站优化 > WEB前端优化之CSS

2014/09/14 | 星期日 分类:建站优化 | 没有评论 标签: | 作者: | 915 views

WEB前端优化之CSS

什么是CSS?
CSS是英文Cascading Style Sheets的缩写;(通俗的描述就是HTML的衣服^_^)
CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。

说说前端CSS优化:CSS是用来渲染页面的,也是存在渲染效率的问题。
Web 前端优化最佳实践第四部分面向 CSS。另请参见 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. 使用 而不是@importChoose over @import

在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

6. 避免使用Filter (Avoid Filters)

对于第3,4点,对javaScript 与 CSS压缩,一般常用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。
亦可以在线压缩:http://ganquan.info/yui/?hl=zh-CN

额外知识:请自行查询 YUI Compressor的配置和使用。

文章来源:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html
转帖文章,主要用于学习。

  • 本文目前尚无任何评论.
    1. 本文目前尚无任何 trackbacks 和 pingbacks.