提高web应用性能之CSS性能调优.pdfVIP

页码，1/6 提高 web 应用性能之 CSS 性能调优 高性能 CSS 翔, 软件工程师, IBM 简介：随着 Web 2.0 应用越来越流行，Web 的 CSS 样式在 Web 2.0 应用也变得越来越重要，好的 CSS 样式不仅能美化 Web 2.0 应用，也能优化用户的体验。但是，大多数 Web 开发工程师很少关注 CSS 样式，这也导致项目中经常出现杂乱，不 规范的 CSS 代码，使得维护起来越来越麻烦。而更为重要的一点是，这些不规范的 CSS 会导致很多性能的问题。这些问题在 开发大型的，重量级的 Web 2.0 应用中表现的尤为明显。所以，在开发 Web 2.0 应用中写一套规范的高性能的 CSS 代码是 十分重要的。可以通过 CSS 的缩写 （short hand properties ），CSS 选择器（selectors）以及 CSS 的继承机制等等方面来 调整 Web 应用的性能，这篇文章将着力于研究 CSS 性能调优的相关技术。 本文的标签： lamp 标记本文！ 发布日期：2011 年 9 月 11 日 级别： 中级 简介 Web 开发中经常会遇到性能的问题，尤其是 Web 2.0 的应用。CSS 代码是控制页面显示样式与效果的最直接“工具”，但是 在性能调优时他们通常被 Web 开发工程师所忽略，而事实上不规范的 CSS 会对页面渲染的效率有严重影响，尤其是对于结构 复杂的 Web 2.0 页面，这种影响更是不可磨灭。所以，写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。本文 主要来探讨一下如何优化，以及从哪些方面优化应用程序的 CSS 代码，从而最大限度的提高 Web 应用的性能。 回页首 CSS 性能调优 CSS 代码的分析与渲染都是由浏览器来完 的，所以，了解浏览器的 CSS 工作机制对我们的优化有至关重要的作用。这篇文 章我们主要从如下几个方面入手来介绍一下 CSS 的性能优化： 1. Style 标签的相关调优 2. 特殊的 CSS 样式使用方式 3. CSS 缩写 4. CSS 的声明 5. CSS 选择器 把 Stylesheets 放在 HTML 页面头部： 浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会 一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完 ，这样一来，用户看到页面的时间会更晚。 对于 @import 和 link 两种加载外部 CSS 文件的方式：@import 就相当于是把 link 标签放在页面的底部，所以从优化性 能的角度看，应该尽量避免使用 @import 命令 避免使用 CSS Expressions： 页码，2/6 参考下述代码： 清单 1. CSS Expression 案例 Background-color: expression ( (new Date ()).getHours ()%2 ? #B8D4FF : #F08A00 ) Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚 动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执 行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。 避免使用 Filter： IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会 “冻结”浏览器，停止渲染页面。同时 filter 也会 大内存消耗。最不能忍受的是 filter 样式在每个页面元素 （使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是 被浏览器一