• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > DIV+CSS特效 >

CSS 性能调优

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-06点击:
   

   简介

  Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用。CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 CSS 会对页面渲染的效率有严重影响,尤其是对于结构复杂的 Web 2.0 页面,这种影响更是不可磨灭。所以,写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。本文主要来探讨一下如何优化,以及从哪些方面优化应用程序的 CSS 代码,从而最大限度的提高 Web 应用的性能。

  CSS 性能调优

  CSS 代码的分析与渲染都是由浏览器来完成的,所以,了解浏览器的 CSS 工作机制对我们的优化有至关重要的作用。这篇文章我们主要从如下几个方面入手来介绍一下 CSS 的性能优化:

  Style 标签的相关调优

  特殊的 CSS 样式使用方式

  CSS 缩写

  CSS 的声明

  CSS 选择器

  把 Stylesheets 放在 HTML 页面头部:

  浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面,在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 html 内容加载完成,这样一来,用户看到页面的时间会更晚。

  对于 @import 和 两种加载外部 CSS 文件的方式:@import 就相当于是把 标签放在页面的底部,所以从优化性能的角度看,应该尽量避免使用 @import 命令

  避免使用 CSS Expressions:

  参考下述代码:

  清单 1. CSS Expression 案例

  1. 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 样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。

  针对这种情况,最好的解决办法就是使用 PNG8。

  CSS 缩写:

  CSS 缩写可以让你用极少的代码定义一系列样式属性,这种做法可以极大程度的缩减代码量以达到提高性能的目的。

  清单 2. Colour 缩写

  1. #000000     ------>>     #000  
  2. #336699     ------>>     #369 

  关于颜色,重复的属性值可以省略。

  清单 3. 各种缩写方式

  1. Margin-top: 2px;  
  2.  Margin-right: 5px;  
  3.  Margin-bottom: 2em;  
  4.  Margin-left: 15px;     ----->>     Margin: 2px 5px 2em 15px;  
  5.  
  6.  Border-width: 1px;  
  7.  Border-style: solid;  
  8.  Border-color: #000     ----->>     border: 1px solid #000  
  9.  
  10.  Font-style: italic;  
  11.  Font-variant: small-caps;  
  12.  Font-weight: bold;  
  13.  Font-size: 1em;  
  14.  Line-height: 140%;  
  15.  Font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief  
  16.  
  17.  Background-color: #f00;  
  18.  Background-image: url(background.gif);  
  19.  Background-repeat: no-repeat;  
  20.  Background-attachment: fixed;  
  21.  Background-position: 0 0;  
  22.   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0  
  23.  
  24.  list-style-type: square;  
  25.  list-style-position: inside;  
  26.  List-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)  

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ