取水楼BLOG

 和页面里的javascript正好相反. CSS也就是所谓的样式表需要放在顶部..呃,当然我指的是 head里面这个顶部了. 会更加好一些. 至少是在IE里面, 就算浏览器获得了所有显示需要的组件, 它依旧会等待样式表完全下载完成之后再显示. 把这个样式放在什么地方对下载的速度来说并没什么影响,但是会对页面的呈现有影响.

浏览器为什么要这样做David Hyatt做过一个解释,大致上是说, 如果样式表没有加载完成,那么显示Dom对象其实就是一种浪费. 你可以想象一下本来是个默认的颜色,结果加载到一半的时候变成红色,然后加载结束后却又因为别的规则变成蓝色的情况, 那就应该明白了.

那为什么不和javascript一样放在底部呢. 这个Dom树啊,是可以一边加载一边显示的. 就如上面所说, 浏览器会等样式表都加载完之后再显示页面. 如果放在底部恰巧页面有点大. 那用户将会在一个白屏的状态下等待很长时间. 这是一种不好的用户体验. 这样做虽然不能加快下载的速度或是什么,但至少让用户觉得没有死机,这个网站还是在运作的.

最后注意@import也会出现类似白屏的问题, 即使它存在于head中.