一起CSS

当前位置:一起CSS > CSS > 文章正文

CSS Expressions有多可怕

日期:2009-09-8 分类:CSS

CSS Expressions 俗称 CSS 表达式,避免使用 CSS Expressions 是前端开发的一个重要指南,为什么要避免使用 CSS Expressions 呢?我们看看雅虎YUI的说明:

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕,那就引用子鼠的例子来实际说明吧:

XHTML 和 JS 代码:

<body>
计算了<input id="c" />次
<script type="text/javascript">
var k = 0;
function test() {
	k++;
	document.getElementById('c').value = k;
	return;
}
</script>
<div>
	<ul>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
	</ul>
</div>
</body>

JS 代码是用来计算 CSS Expressions 的计算次数。

CSS Expressions 表达式代码:

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block;
	border:1px solid #FF3366;
	width:expression(this.offsetWidth > 750 ? test() : test());
}

查看Dome (用 IE6/IE7 查看)

从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁,由此可见它的可怕。

子鼠还提供了一个稍好一点的写法:

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block; border:1px solid #FF3366;
	width:expression(function(abc){
		abc.style.width = "750px";
		test();
	}(this));
}

查看Dome (用 IE6/IE7 查看)

另外 CSS Expressions 的兼容性很差,所以 CSS Expressions 能不用就不用。

查看:3,405 评论:3 标签:

随机日志

共有 3 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved