当前位置: css > DIV+CSS 教程 >

用CSS提高网页在浏览器的渲染速度(2)

时间:2009-12-16 09:41来源: 作者: 点击:
4、background 背景图片的平铺 有些的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废
4、background 背景图片的平铺 有些的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。 举个简单的例子: 例一:滚动一下你的页面,看速度怎么样? 运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 例二:同样效果,再试一下这个! 运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 说明:测试上边的两个效果,你的电脑越差越明显,如果你的电脑配置非常好,你就把上的8000px改成9000000px试一下,如果还不行,就改的更大一些,整死机别骂我! 建议的作法
  1. 色彩少的图片要作成gif图片;
  2. 平铺的图片尽可能大一些,如果是色彩少的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、的路径别太深; 例如: #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在代码中; 9、float 的应用 这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家如果不是很明白float是怎么工作的,还是少使用为妙。 曾经因为这个把IE干死过,我写过一个例子,虽说和这个没有什么太大的关系:IE之死__原来与有关 10、合理的 为什么这么说呢,合理的,可以改变的写法以及渲染过程。
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
推荐内容