驳《10条影响CSS渲染速度的写法与建议》及相关疑问

子鼠写了一篇《10条影响CSS渲染速度的写法与建议》,其中有几点我并不认同,疑问如下:

0、CSS的渲染速度
这一块我认为CSS不像JS用户有操作时就要重新渲染一次,基本上在加载时浏览器渲染过一次后,并不会再次渲染,所以如果对于首次加载时的速度问题来说还有一些道理。
但把页面的展示速度问题的重心定位原由于CSS的首次渲染速度问题是绝对不正确的,重点应该是各种元素的加载问题上!
而且除CSS外的其它元素的渲染问题相对于CSS渲染来说可能问题更多。

1、CSS选择符的遍历
“遍历”这个概念源自于程序开发,但对于浏览器来说,特别是关乎页面渲染速度的CSS,浏览器不会用这种很平常的“遍历”来进行后台的解析,而是应该专门做特别的优化,这一种从Chrome浏览器针对JS的V8引擎就可以看出。

2、CSS滤镜的效率
网站变灰代码效率最高是 html{filter:gray;} ,而不是子鼠提出的 body{filter: gray;} ,所以对于CSS滤镜的效率简单的归结原因是CSS滤镜而脱离CSS选择符也是不太全面而得出的观点。

3、绝对定位与float
基于WEB标准的网页布局无非“绝对(相对)定位布局”与“float布局”,在子鼠的文章中竞然提出两种都有问题,反而在推荐“Table页面布局”,这只能说是对于WEB标准及语义化上在认识层面上的一种偏差。
我在所从事大量的项目经验得出的结论是在页面的总体布局上使用float(主要是因为需自适应的原因),在比较精细小巧的局部使用“绝对(相对)定位布局”是一种行之有效的办法。

4、CSS的选择符深度
子鼠的文章中提出*{margin:0; padding:0}这个选择符深度最少的反而是效率最低的,推荐用body,li,p,h1{margin:0; padding:0}来单独处理。但又在CSS的选择符深度这里提出不能使用过于精确的CSS选择符,这一点十分的矛盾,因为按第一种观点是越精确越省效率,而第二种观点又在说越精确的选择符越不省效率的问题,对此令人十分的费解。
我个人认为CSS选择符越为精确,效率越高,因为浏览器只要精确的渲染定位到的元素即可,各元素的CSS耦合度低,效率高。

5、无效class
这一点不得不再说到HTML与CSS两种不同渲染的问题,要把YAHOO提出的14条网站优化建议中推荐把CSS要放在HTML的头部,那么,可以推断,如果放在HTML的底部,会出现页面没加载到CSS会先用HTML的默认CSS,然后再用加载到的CSS重新渲染。
因此,当HTML中有无效的CLASS时,CSS没有相应的,那么他还是用了HTML的默认CSS,所以效率上并没有问题。而当CSS中有无效的CLASS,HTML又没有调用这个CLASS时,HTML还是用了HTML默认的CSS,所以在效率上还是没有问题。

以上几点即是我对子鼠的文章的几点疑问,希望大家互相PK,讨论出事实的真相出来,谢谢。

囧rz人穿囧rz鞋…

囧人日记:今天早上一觉醒来就是一囧:“我囧,快九点啦!”立马来个囧人翻身,冲到公交站坐334到FYD楼下接到一个电话(我囧,不好意思,现在貌似已经忘光了早上这通囧电话具体说的啥了)leader问我在哪,我说我在楼下,然后leader囧笑了……貌似是这样,我囧……

然后打开囧人我御用的囧电脑,开心网的停车、奴隶外挂一开,嘿嘿,我的囧车、囧奴隶全都自动翻炒了一下,囧人自有囧人玩SNS的办法,我囧……

然后就是干囧活了,和一群囧人PMM、囧人PE、囧人PM、囧人设计、囧人交互、囧人开发、囧人测试、囧人后勤、囧人秘书用囧RTX、囧电话、囧人国汉语扯囧产品、囧体验还有囧文化,当然还要敲一大堆的囧代码,切一大堆的囧图,我囧……

吃囧饭这事也是分为早囧饭、午囧饭和晚囧饭三种,当然还是囧夜宵。早囧饭因为温度不高是非常非常让人囧开心的事情。午囧饭一般活干到一半又要睡个囧午觉,所以除非是下午不干这囧活了,一般都吃的一般囧。晚饭也是让人囧开心的事,因为去得早可以抢到囧人的大馒头,还可以叫上几个囧人女陪着吃,囧哉……夜宵是为了加囧班的囧人们准备的,不幸的是吃囧夜宵的人还真多,还得抢,囧人们真囧……

好了,这就是囧人一天的囧生活,做囧人穿囧鞋,今天您囧了嘛?

看囧图↓↓↓





2008年9月3日

在Chrome的浏览器地址栏中输入命令,就会返回相应的结果。

about:version – 显示当前版本 也可以是chrome-resource://about
about:memory – 显示本机浏览器内存使用状况
about:Plugins – 显示已安装插件
about:histograms – 显示历史记录
about:Dns – 显示DNS状态
about:cache(view-cache: )- 显示缓存页面
view-cache:Stats – 缓存状态
about:Stats – 显示状态
about:network – 网络监控工具
chrome-resource://new-tab – 新标签页
chrome-resource://favicon – 乱码,是什么?
about:internets – 这应该算是一个彩蛋?

钢铁IE


这是纯钢铁打造的IE浏览器,版本可能是7,也可能是8b2,这个东东在厦门的那个炮台的正门有,至于为什么有就不得而知了。(这几天去厦门老年人旅游团玩了,拍了这东东。

退出移动版