加快网站速度的最佳做法_(4)避免使用css表达式

最新推荐文章于 2024-08-31 20:57:12 发布

原创最新推荐文章于 2024-08-31 20:57:12 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #浏览器

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了CSS表达式的概念及其在Internet Explorer中的应用。通过实例展示了如何使用JavaScript表达式动态更改CSS属性值，同时讨论了其潜在的性能问题及替代方案。

CSS表达式是一个强大的方法，可以使得CSS属性动态的改变。在IE5.0的版后得到支持，但是在IE8中被剔除了。作为一个例子，背景色可以用CSS表达式设置成每隔一个小时改变。


    /*code里面没有cs只有用java代替，见谅见谅*/
    background-color:expression( (new Date()).getHours()%2 ? "#B8D4FF":"#F08A00");

正如上面所示，表达式方法接受js表达式。CSS的属性值是这个JS表达式的结果。这个表达式只有在IE中才能使用，并且只有在需要创建一个跨浏览器的一致体验时才能用到。

使用表达式的问题是，表达式的计算频率比人们想象的要高的多。不只是在页面被渲染或者是改变的时候，当人们在页面上滑动滚动条，甚至是在页面上移动鼠标的时候，表达式都会被计算。在CSS表达中的增加计数器可以帮助我们监控CSS表达式被计算的次数。在页面上移动鼠标很容易就产生超过10000次的表达式计算（运行）。

一种减少CSS表达式计算的方法是使用一次(one-time)表达式，当表达式第一次被计算的时候，它就对样式设置了一个明确的值，这样来代替表达式的不断计算。如果样式的属性必须根据页面的情况动态的来设定，使用事件捕捉(event handlers)的方法而不是css表达式。如果你一定要使用css表达式，记住它们也许会被计算上千次，这会影响你的页面的性能。