《高性能网站建设指南》阅读笔记_规则7- 避免CSS表达式
来源:互联网 发布:卖家怎么申请淘宝介入 编辑:程序博客网 时间:2024/05/01 17:38
http://stevesouders.com/hpws/rule-expr.php
CSS表达式是动态设置CSS属性的一种强大但很危险的方式,因为:
1.CSS表达式用于动态设置CSS属性,它只受到IE 5及以后版本的支持。
2. 禁用CSS表达式,因为它几乎在触发各种事件时都会被调用。
3. 有的时候,CSS表达式也会影响页面的加载时间。
任何css表达式实现的功能我们都可以找到它的替代方式,比如事件处理器等。
就是时间触发的时候才会执行,比如设置一个页面的最小宽度数600像素,IE不支持min-width属性,所以在IE中使用CSS表达式。width:expression(document.body.clientWidth<600?"600px":"auto");
min-width:600px;)优化成只有window.onresize触发时才执行
CSS表达式(示例):
background-color: expression( (new Date()).getSeconds()%2 ?"red":"blue" );
详细实例:
<HTML>
<HEAD>
<style>
.mybody{
background-color: expression((new Date()).getSeconds()%5 ?'#FF0000':'#0000FF');
}</style>
</HEAD>
<BODY class="mybody"></BODY>
</HTML>
注意:禁用CSS表达式,因为它几乎在触发各种事件时都会被调用。
改进:(一次性表达式)
<style>
P{ background-color: expression( altBgcolor(this) ); }
</style>
<script type="text/javascript">
function altBgcolor(elem)
{
elem.style.backgroundColor=(new Date()).getHours()%2?"#f00":"#0f0";
}
</script>
在调用JS代码后,JS代码重写了其background-color属性,所以只会执行一次。
- 《高性能网站建设指南》阅读笔记_规则7- 避免CSS表达式
- 《高性能网站建设指南》阅读笔记_规则11- 避免重定向
- 《高性能网站建设指南》阅读笔记_规则8- 使用外部javascript和css
- 《高性能网站建设指南》阅读笔记_规则1-减少HTTP请求
- 《高性能网站建设指南》阅读笔记_规则2- 使用内容发布网络
- 《高性能网站建设指南》阅读笔记_规则3- 添加Expires头
- 《高性能网站建设指南》阅读笔记_规则4- 压缩组件
- 《高性能网站建设指南》阅读笔记_规则5- 将样式放在顶部
- 《高性能网站建设指南》阅读笔记_规则6- 将脚本放在底部
- 《高性能网站建设指南》阅读笔记_规则9- 减少DNS查找
- 《高性能网站建设指南》阅读笔记_规则10- 精简javascript
- 《高性能网站建设指南》阅读笔记_规则12- 移除重复脚本
- 《高性能网站建设指南》阅读笔记_规则13- 配置ETag
- 《高性能网站建设指南》阅读笔记_规则14- 使Ajax可缓存
- 《高性能网站建设进阶指南》阅读笔记 1
- 《高性能网站建设进阶指南》阅读笔记 2
- 《高性能网站建设进阶指南》阅读笔记 3
- 《高性能网站建设指南》笔记
- 删除某个具体同步链
- ACCESS中执行SQL
- poj2388
- C#使用NPOI向Excel版当中插入行
- javascript版linq,真心不错
- 《高性能网站建设指南》阅读笔记_规则7- 避免CSS表达式
- 去掉SDI的菜单栏
- MTK Android滑盖或翻盖处理驱动
- COM学习笔记(四)IDispatch接口原理与应用
- 网络优化升级与性能优化十五招
- 平衡传输和不平衡传输
- 支持向量机(SVM)、支持向量回归(SVR)
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- <context-param>与<init-param>的区别与作用