首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作CSS教程

CSS:提高网页在浏览器的渲染速度

来源: 互联网    日期:2006-10-29
 

原文:http://www.zishu.cn/blogview.asp?logID=773

最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助!

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条。

1、*{} #zishu *{} 尽量避开

由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;

*{margin:0; padding:0}
如果这样写,页面中所有的标签的margin全是0;padding也是0;

#zishu *{margin:0; padding:0}
如果这样写,在id等于zishu下边的所有标签的margin全是0;padding也是0;

这样写的问题是:

  1. 遍历会消耗很多的时间,如果你的HTML代码写的不规范或是某一签标没有必合,这个时间可能还会更长;
  2. 很多的标签本来就没有这个属性或属性本身就是统一的,那么更给设置一次,也有时间的开消;

建议的的解决办法:

  1. 不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;
  2. 不要使用*;而是把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0}

2、滤镜的一些东西不要去用

IE的一些滤镜在FIREFOX中不支持,往往写一些效果时你还是使用CSS HACK;而滤镜是一个非常毫资源的东西;特别是一些羽化、阴影和一个前透明的效果;

例如一个阴影效果:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

例子的链接为:http://www.zishu.cn/blogview.asp?logID=610
百姓网的登陆部分使用了阴影效果:http://shanghai.baixing.com/wo/denglu

建议的解决办法

  1. 能不使用就不要使用,一方面兼容问题;很多效果只能在IE中使用;
  2. 就本例而言,如果非要这样在的效果,建议用图片作背景;(只说优化速度,实际应用还是可以小部分用,有人可能会说,用图片还多一个HTTP请求呢,呵呵……)

一个非常好的例子,就是在今年512大地震时,很多网站一夜之间全部变成了灰色,他们只用了一行CSS代码:

body{filter: gray;}

但,你会看会看到这些网页非常的慢,打开后你的CPU也会飙升,不夸张的说,如果你的电脑配置差,干死你也不为过。

3、一个页面上少用绝对定位

绝对定位(position:absolute )是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但网页中如果使用过多的绝对定位,会让你的网页变得非常的慢,这一点上边FIREFOX表现要比IE还要差。

例如:

<style>li{ position:absolute;}</style>
<ul>
 <li style="left:10px; top:20px">001</li>
 <li style="left:30px; top:70px">001</li>
 <li style="left:40px; top:50px">001</li>
 ……
</ul>

建议的解决办法

  1. 尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能说,这样写会有性能问题,少用。
  2. 如果能用变通实现同样的效果,就用变通的办法。



更多的CSS:提高网页在浏览器的渲染速度请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2006-10-29   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报