藏井阁

" Scientists ask why, engineers ask why not? "

第五章:将样式表放在顶部 —《高性能网站建设指南》读书笔记

浏览器自上而下解析HTML文档并逐步呈现。但是将样式表放到文档的最后,会导致浏览器为了避免当样式改变时重绘元素而不会马上呈现,用户会看到“白屏(blank white screen)”,待内容和样式表加载完毕再突然呈现整个页面。 如果白屏发生在被用户设为主页时,启动浏览器本身需要一定时间,加上白屏,用户恐怕早就输入另外一个网址了。

将样式表放到顶部可以让页面逐步呈现。 关于浏览器对元素的呈现过程,参见“形象化的reflow”。

对于非呈现页面作用的样式表,最好的做法并不是放到底部,可在文档加载完后动态加载进来。

对CSS引用方式的选择,使用可以直观的体现哪些css文件被引用,并且可以避免@import可能带来的白屏。@import会导致加载组件的无序性,从而即使将其放到顶部了,也有可能最后才加载,导致白屏。关于采用@import的弊端详见don’t use @import

作者提供了几个测试地址,很有必要测一测:

相关文章

如何减少浏览器repaint和reflow

Gecko: Reflow Refactoring

Rendering:repaint, reflow/relayout,restyle

类别: Web开发

Tags:

damon pang

大魔

Damo

i#impng.com

专注Web开发,爱电影,爱One Piece.