《高性能網(wǎng)站建設(shè)指南》閱讀筆記_規(guī)則5- 將樣式放在頂部
發(fā)布時(shí)間:2013-11-22 瀏覽:367打印字號(hào):大中小
首先書(shū)中提到了可視化反饋的重要性,一個(gè)很常見(jiàn)的例子就是進(jìn)度指示器:
在我們這里,HTML頁(yè)面就相當(dāng)于進(jìn)度指示器,當(dāng)瀏覽器逐步的加載頁(yè)面時(shí),頁(yè)頭,導(dǎo)航欄等,所有這些為等待頁(yè)面的用戶提供視覺(jué)反饋。按照作者的意思:在IE中將樣式表放在底部,可能會(huì)導(dǎo)致白屏或者是無(wú)樣式內(nèi)容的閃爍。白屏是由于瀏覽器要等待css下載完再顯示頁(yè)面的組件,所以在等待css下載的時(shí)候頁(yè)面就是白屏。無(wú)樣式的閃爍是由于先下載頁(yè)面的組件比如文字圖片,并逐步顯示,等css下載完則需要應(yīng)用新的css樣式渲染,就產(chǎn)生了這種無(wú)樣式的閃爍現(xiàn)象。
Css在底部:http://stevesouders.com/hpws/css-bottom.php
Css在頂部:http://stevesouders.com/hpws/css-top.php
用@import方式:http://stevesouders.com/hpws/css-top-import.php
無(wú)樣式內(nèi)容的閃爍:http://stevesouders.com/hpws/css-fouc.php
需要說(shuō)明的一點(diǎn)是,不管樣式放在那里并不會(huì)影響加載頁(yè)面的時(shí)間,而影響的是瀏覽器對(duì)這些組件順序的反應(yīng),如下圖:
有些用戶感覺(jué)緩慢的頁(yè)面反而加載的更快,這就是視覺(jué)化反饋的重要性。如果真的產(chǎn)生了白屏,用戶就會(huì)因?yàn)椴恢腊l(fā)生了什么而離開(kāi),去投奔競(jìng)爭(zhēng)對(duì)手。


