子鼠写了一篇《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,讨论出事实的真相出来,谢谢。

打赏