4、background 背景图片的平铺
有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。
举个简单的例子:
例一:滚动一下你的页面,看速度怎么样?
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
例二:同样效果,再试一下这个!
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
说明:测试上边的两个效果,你的电脑越差越明显,如果你的电脑配置非常好,你就把上的8000px改成9000000px试一下,如果还不行,就改的更大一些,整死机别骂我!
建议的作法:
- 色彩少的图片要作成gif图片;
- 平铺的图片尽可能大一些,如果是色彩少的GIF图片,图片大一些,实际大小也不会大多少;上边的两个例子就很好的证明,第一个图片非常少,第二个图大较大一些;但速度是非常不一样的;
5、让属性尽可能多的去继承
尽可能让一些属性子可以继承父,而不是覆盖父;
简单的一个例子:
<style> a:link,a:visited{color:#0000FF} a:hover,a:active{color:#FF0000} #zishu a:link,#zishu a:visited{ font-weight:bold} #zishu a:hover,#zishu a:active{ font-style: italic;} </style> <div><a href="#">test</a><div> <div id="zishu"><a href="#">zishu</a></div>
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
6、CSS的路径别太深;
例如:
#zishu #info #tool #sidebar h2{ font-size:12px;}
7、能简写的一些就简写;
例如:
#zishu{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}
改成:
#zishu{padding:10px 50px 4px 50px}
这个对渲染速度没有影响;只是少几个字符;
8、别放空的的class或没有的class在HTML代码中;
9、float 的应用
这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家如果不是很明白float是怎么工作的,还是少使用为妙。
曾经因为这个把IE干死过,我写过一个例子,虽说和这个没有什么太大的关系:IE之死__原来与CSS有关
10、合理的布局
为什么这么说呢,合理的布局,可以改变CSS的写法以及渲染过程。
本文链接:http://www.blueidea.com/tech/web/2008/6156.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 10条影响CSS渲染速度的写法与建议 [1] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|