10条影响CSS渲染速度的写法

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

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

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

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

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

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

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

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

例如一个阴影效果:

 

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

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

  1. body{filter: gray;}  

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

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

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

例如:

  1. <style>li{ position:absolute;}</style>  
  2. <ul>  
  3.     <li style="left:10px; top:20px">001</li>  
  4.     <li style="left:30px; top:70px">001</li>  
  5.     <li style="left:40px; top:50px">001</li>  
  6.     ……  
  7. </ul>  

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

4、background 背景图片的平铺

有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。

举个简单的例子:

例一:滚动一下你的页面,看速度怎么样?

<div style="height:8000px; background:url(i2008962026.gif)"></div>

例二:同样效果,再试一下这个!

 

<div style="height:8000px; background:url(120089620424.gif)"></div>

说明:测试上边的两个效果,你的电脑越差越明显,如果你的电脑配置非常好,你就把上的8000px改成9000000px试一下,如果还不行,就改的更大一些,整死机别骂我![razz]

建议的作法:
a.色彩少的图片要作成gif图片;
b.平铺的图片尽可能大一些,如果是色彩少的GIF图片,图片大一些,实际大小也不会大多少;上边的两个例子就很好的证明,第一个图片非常少,第二个图大较大一些;但速度是非常不一样的;

5、让属性尽可能多的去继承

尽可能让一些属性子可以继承父,而不是覆盖父;

简单的一个例子:

  1. <style>  
  2. a:link,a:visited{color:#0000FF}  
  3. a:hover,a:active{color:#FF0000}  
  4. #zishu a:link,#zishu a:visited{ font-weight:bold}  
  5. #zishu a:hover,#zishu a:active{ font-style: italic;}  
  6. </style>  
  7. <div><a href="#">test</a><div>  
  8. <div id="zishu"><a href="#">zishu</a></div>  

实际上我是让zishu去继承我默认设置的属性,因为那些属性已经存在了。

另外再说几个不是特别重要的地方,平时注意一点就行了,没有上边这几个影响那么大:

6、CSS的路径别太深;
例如:

  1. #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} 
这个对渲染速度没有影响;只是少几个字符;[lol]

8、别放空的的class或没有的class在HTML代码中;

9、float 的应用
这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家如果不是很明白float是怎么工作的,还是少使用为妙。

10、合理的布局
为什么这么说呢,合理的布局,可以改变CSS的写法以及渲染过程。

其实有些不能总结为CSS部分;

 

时间: 2024-12-21 08:23:09

10条影响CSS渲染速度的写法的相关文章

10条影响CSS渲染速度的写法与建议

最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助! 这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条. 1.*{} #zishu *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{marg

10条影响CSS渲染速度的写法与使用建议第1/3页_经验交流

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条. 1.*{} #jb51 *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{margin:0; padding:0} 如果这样写,页面中所有的标签的margin全是0:padding也是0: #jb

我在客户端如何可以取得服务器端的最新数据(前10条),除了定时刷新的方法,还有别的方法吗?而且数据量较大,要保证速度。希望各位大侠、高手给写建议。

问题描述 我在客户端如何可以取得服务器端的最新数据(前10条),除了定时刷新的方法,还有别的方法吗?而且数据量较大,要保证速度.希望各位大侠.高手给写建议. 解决方案 解决方案二:ajax从服务器上每次只取20条即可速度上影响不大

top n-python sqlalchemy 如何实现top写法。想按日期倒排序获取前10条记录。

问题描述 python sqlalchemy 如何实现top写法.想按日期倒排序获取前10条记录. python sqlalchemy 如何实现top写法.想按日期倒排序获取前10条记录. 解决方案 python懂的不多 这是一些积累的资料 希望对你有用啊http://download.csdn.net/album/detail/1239

网站大提速 之一 浏览器渲染速度优化

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 前言: 要实现网站的大提速,必须在各个环节进行精确的设置和安排.网站一旦打开速度变慢,往常,站长们第一时间肯定会认为"服务器慢",其实看完本章后,你会发现或许结果并不完全是这样.影响网站速度的因素千差万别,服务器仅是其中一小部分因素而已.一种常见的情况,同样的服务器,网站与网站之间的打开速度也千差万别,这就和网站的制作工艺

将 Web 应用性能提高十倍的10条建议

将 Web 应用性能提高十倍的10条建议 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点.如果你的网站不能及时的响应,或者你的 app 不能无延时的工作,用户会很快的投奔到你的竞争对手那里. 举一个例子,一份亚马逊十年前做过的研究可以证明,甚至在那个时候,网页加载时间每减少100毫秒,收入就会增加1%.另一个最近的研究特别强调一个事实,

网站设计的10条有用的可用性结论和指南

很多人在网站和界面设计的很多方面完成了很多的研究,这些结论在帮助我们提高我们的工作方面很有价值,这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南. 每个人都会赞同可用性是网站的一个很重要的方面的说法.无论你是在做一个作品集网站.网上商店还是网络应用,让你的页面对用户来说可以容易和快乐的使用是一个关键.这些年,很多人在网站和界面设计的很多方面完成了很多的研究,这些结论在帮助我们提高我们的工作方面很有价值.这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南. F

盘点10条百度快照不更新的处理方法

SEO现在越来越多的电商网站需要优化了,小就小到发布产品页面,大就大到关键词优化排名,有网络的地方就用SEO的用武之地.做一个seo需要掌握更多的seo知识,今天主要谈百度快照背后的故事.如果一个网站有新颖的地方或是新的东西都会吸引蜘蛛的到来,这样搜索引擎数据库就会更新的你网站的快照,那么我们如何才能做到让百度快照当天更新或是隔天的快照,这里根据上一篇<胖子:盘点10条百度快照不更新的原因>总结出10条对应的处理办法,提供给各位站长参考. 1.坚持每天给你的网站添加原创内容.一般我们第一天到一

用户体验:10条有用的网站可用性设计参考

每个人都会赞同可用性是网站的一个很重要的方面的说法.无论你是在做一个作品集网站.网上商店还是网络应用,让你的页面对用户来说可以容易和快乐的使用是一个关键.这些年,很多人在网站和界面设计的很多方面完成了很多的研究,这些结论在帮助我们提高我们的工作方面很有价值.这里是能够帮助你提高你的网站的用户体验的10条有用的可用性结论和指南. Form标签最好放到字段的上面 UX Matters的一份研究发现表单中的标签(label)的理想位置是在字段(field)的上面.在很多的表单中,标签被放到字段的左边,