Moonless.net首页

Cutsin受难记

Home Blog 归宿美林湾 Labs

2009年9月19日 星期六

使用高效的html标签

上次测试了float和position元素的显示效率,那么就留下一个问题:
平时应该多用哪些标签、显示属性应该如何设置呢?
遂补充一些测试数据如下(仍是不严格测试、53100个同级元素,浏览器是chrome):

div的显示属性:
display:block     1.x秒
display:inline-block     27.x秒
display:inline     5.x秒

默认标签:
div            1.7x秒
p              1.2x秒
span          6.x秒
i                5秒左右
b               5秒左右
q               6.x秒
a               5.x秒

重置默认标签:
q:before,q:after {content:''}        6.x秒
span:before,span:after {content:'\22'}       7秒左右
div:after {clear:both;display:block;height:0;content:"\20"}     2.6x秒

从数据上也许能看到一些端倪:
1、推荐的显示属性:
block > inline > inline-block
2、文档的大小也有很大关系,显示属性相同的情况下,推荐使用短小标签:
(i,b,p,a) > (em,hx,ul,ol,li,dl,dd,dt) > (div,ins,del,var,dfn,sup,sub,pre) > (span,q,cite)
3、伪类的content,即使设置为空,也会消耗资源
4、减少<img>
5、减少嵌套
6、减少float
7、设置doctype为html,减少自闭合

拙见待验。

标签:

收藏到网摘:新浪VIVI  365Key  POCO网摘  和讯网摘  我摘

1 条评论:

发表评论

指向此帖子的链接:

创建链接

<< 主页