10条影响CSS渲染速度的写法与建议
作者:zishu 来源:zishu blog 发布时间:2008-09-09 22:02:00
最近很少写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;
这样写的问题是:
遍历会消耗很多的时间,如果你的HTML代码写的不规范或是某一签标没有必合,这个时间可能还会更长;
很多的标签本来就没有这个属性或属性本身就是统一的,那么更给设置一次,也有时间的开消;
建议的的解决办法:
不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;
不要使用*;而是把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0}
2、滤镜的一些东西不要去用
IE的一些滤镜在FIREFOX中不支持,往往写一些效果时你还是使用CSS HACK;而滤镜是一个非常毫资源的东西;特别是一些羽化、阴影和一个前透明的效果;
例如一个阴影效果:
运行代码框
例子的链接为:http://www.zishu.cn/blogview.asp?logID=610
百姓网的登陆部分使用了阴影效果:http://shanghai.baixing.com/wo/denglu
建议的解决办法:
能不使用就不要使用,一方面兼容问题;很多效果只能在IE中使用;
就本例而言,如果非要这样在的效果,建议用图片作背景;(只说优化速度,实际应用还是可以小部分用,有人可能会说,用图片还多一个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>
建议的解决办法:
尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能说,这样写会有性能问题,少用。
如果能用变通实现同样的效果,就用变通的办法。
猜你喜欢
- <'% '************************************************
- 用DIV+CSS可以作出很多不同形状的角形;以下我只写了几个;CSS没有优化;是为了让大家看得更清一些;以下是一些小三角的形状:这是第一个小
- 一般来说,一个真正的、完整的站点是离不开数据库的,因为实际应用中,需要保存的数据很多,而且这些数据之间往往还有关联,利用数据库来管理这些数据
- 如何显示一个等待或欢迎信息? <% Response.Buffer = True %
- 如何用ASP输出HTML文件?<!--#include file="top.inc"--><
- 当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求,SAAS的模式看起来非常有吸引力。Web应用程序的界面设计,其核心
- 大家都知道对于一个页面来说,最基本的结构呢就是<html> <head> <!-- 头部信息内容区域
- 这些导航菜单来自于Dribbble网站,出自于世界各地的优秀设计师之手,涵盖了各种不同的风格,个个都非常精美。这里我将这些导航菜单展示出来,
- 很多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当。相对来说,将数据装入数据库是直截了当的
- 1.字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66
- css的流行导致了标签的流行,很直观,看起来很清爽。流行的一部分,还有很多种功能强大且美观的导航。。。1. Change.org2. N.D
- 现在,比较牛的设计师和开发者都认识到了可用性在他们工作中的重要性。可用性好的网站会极大地提高用户体验,并且好的用户体验会让用户更加快乐。用聪
- 这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。var ie&nb
- 原来图片自适应宽度一般都是通过Javascript来解决的,但是多少还是比较麻烦。还有一种通过设置外层容器overflow:hidden属性
- Oracle是应用最广的大型数据库,而在范式下进行Oracle数据库设计则可以大大减少数据冗余,使数据库维护更方便,可惜范式下的数据表一般不
- 继续Mootools常用方法扩展,依然还是String类的扩展。方法:unescapseHTML说明:这个上次忘了,和escapseHTML
- 我们怎样才能了解用户需求呢?大家都知道可用性测试、调查问卷之类与用户进行沟通的途径,这些方法各有各的利弊,如果逐一分析的话,恐怕至少要分成三
- 要读懂这些代码主要是要了解ASP中操作二进制数据的对象ADODB.Stream!本程序主要用的就是Adodb.Stream,如果你有这个基础
- ASP是目前一种广为应用的用来快速构建动态WEB站点的编程语言,默认的内置开发语言是VBScript,由于ASP和微软Windows系列操作
- 第一节:WAP的潜能 这些日子,我们常听到WAP技术,一种手机上网的技术。从技术上讲,移动电话不可能和PC来竞争,移动电话的屏幕只能容下很少