第五章:将样式表放在顶部 —《高性能网站建设指南》读书笔记
浏览器自上而下解析HTML文档并逐步呈现。但是将样式表放到文档的最后,会导致浏览器为了避免当样式改变时重绘元素而不会马上呈现,用户会看到“白屏(blank white screen)”,待内容和样式表加载完毕再突然呈现整个页面。 如果白屏发生在被用户设为主页时,启动浏览器本身需要一定时间,加上白屏,用户恐怕早就输入另外一个网址了。
将样式表放到顶部可以让页面逐步呈现。 关于浏览器对元素的呈现过程,参见“形象化的reflow”。
对于非呈现页面作用的样式表,最好的做法并不是放到底部,可在文档加载完后动态加载进来。
对CSS引用方式的选择,使用可以直观的体现哪些css文件被引用,并且可以避免@import可能带来的白屏。@import会导致加载组件的无序性,从而即使将其放到顶部了,也有可能最后才加载,导致白屏。关于采用@import的弊端详见don’t use @import。
作者提供了几个测试地址,很有必要测一测: