提高CSS网页渲染效率的11点注意事项_经验交流

1、十六进制的颜色值对位数与大小写 

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 

* 不赞成 - color:#f3a; 

* 建议用 - color:#FF33AA; 

2、display与visibility的差异 

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。 

* 不赞成 - visibility:hidden; 

* 建议用 - display:none; 

3、border:none;与border:0;的区别 

和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。 

* 不赞成 - border:0; 

* 建议用 - border:none; 

4、不宜用过小的背景图片平铺 

一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。 

* 不赞成 - 宽高8px以下的平铺背景图片 

* 建议用 - 衡量适中体积及尺寸的背景图片 

5、慎用IE滤镜 

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。 

* 不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。 

* 建议用,最好选择其它方法能避免使用滤镜。 

6、*{ margin:0; padding:0;}避免浏览器样式差异 

*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。 

* 不赞成,使用*号通配符 

* 不赞成,div span button b table等标签纳入通配符控制内外填充样式 

* 建议用,有选择性地使用通配符控制内外填充样式。 

7、不要添加额外的标签来描述class或id 

如果你有一个选择器是以id作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。 

* 不赞成 - button#backButton { } 

* 不赞成 - .menu-left #newMenuIcon { } 

* 建议用 - #backButton { } 

* 建议用 - #newMenuIcon { } 

8、尽量选择最特殊的类来存放选择器 

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。 

* 不赞成 - treeitem[mailfolder="true"] > treerow > treecell { } 

* 建议用 - .treecell-mailfolder { } 

9、避免子孙选择符 

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。 

* 不赞成 - treehead treerow treecell { } 

* 好一点,但还是不行(参照下一条) - treehead > treerow > treecell { } 

10、标签类中不要包含子选择符 

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下) 

* 不赞成 - treehead > treerow > treecell { } 

* 建议用 - .treecell-header { } 

11、留意所有子选择符的使用 

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。 

* 不赞成 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { } 

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。 

* 建议用 - .tree-folderpane-icon[IsImapServer="true"] { } 

时间: 2024-11-05 20:41:37

提高CSS网页渲染效率的11点注意事项_经验交流的相关文章

如何提高CSS网页渲染效率

  如何提高CSS网页渲染效率?CSS学习过程中需要关注的细节之处非常多,而这些细节之处也是影响CSS的网页渲染效率的重要因素,黑猫整理了由前辈们提出的提高CSS网页渲染效率的方法,一起来学习一下. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率. * 不赞成 - color:#f3a; * 建议用 - co

关于《精通css》之几个不错的注意事项_经验交流

很多认真的读者提出了不少的问题和建议,以下是本人看完书后的补充的一些观点: 总的来说,翻译能得85分,不像某些人说得那么差,误导读者. 1. filter在本书中有两个用途,52页中间AlphaImageLoader过滤器应该翻译为滤镜,其他的地方翻译成过滤器是比较合适的. 2. 71页原书应该有错误,a:hover伪类问题不止是IE 5.x有问题,IE6标准模式下也是有问题的. 3. 144页(原书164页)应该是原书的错误,MSBMH代码段有问题: * html #content { wid

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

CSS渐变文本效果的两种方法比较_经验交流

是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon) 优势 这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6

IE6不能正常解析CSS文件问题的解决方法及原因分析_经验交流

网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI 编码,并没有保存为 UTF-8 格式.可能你会发现在一般情况下这样也是没有问题的,然而当 CSS 文件中包含有中文注释时就可能不尽如人意了!估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析,所以才会发生 CSS 在 IE6 下不起作用的情况.看来微软已注意到这个问题,在 IE7 中把它修复了.但是用IE6 的人还是不少.因此这个问题需要解决: 方法一:把 CSS.JS

css 不换行 自动换行 强制换行的实现方法_经验交流

强制不换行 div{ white-space:nowrap; } 自动换行 div{  word-wrap: break-word;  word-break: normal;  } 强制英文单词断行 div{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认  pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 设置强行换行: wor

CSS仿淘宝首页导航条布局效果_经验交流

以下是CSS内容部分: 以下是引用片段: 首页 数码通讯 女人 男人 家居 书籍音像 运动 游戏 宠物 香港街 淘宝商城 仿淘宝网首页导航条效果 转载请注明出处 子鼠 www.zishu.cn 2006-05-21 凌晨03:05分 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

CSS实现每行新闻数量不等效果代码_经验交流

本来还以为这块是由后台单独去做的,今天看到这种效果,居然是CSS实现的.现在将它放到这里与大家共享 特别推荐 1.脚本代码收藏站,AJAX/JS/ASP/PHP一网打尽[特别推荐]! 2.看书了小说网! 3.中文最强大的搜索引擎! 4.,下载中心! 5.新增加photoshop,flash,制作教程经典收藏! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet