頁面中CSS加載方式的優(yōu)化
更新時間:2008年03月26日 22:50:59 作者:
今天學(xué)到了css的加載優(yōu)化,原來用@import的方法是不對的
1、應(yīng)該將 CSS 放置于結(jié)構(gòu)的上方(一般放置于 head 元素內(nèi))。CSS 是解釋型語言,F(xiàn)irefox 和 IE 在等待 CSS 傳輸完成之前不會渲染任何東西。只有將 CSS 前置,才可在瀏覽器解析結(jié)構(gòu)時,對頁面進行渲染。
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.
導(dǎo)致的問題就是,頁面會有一段時間“樸素”,突然之間又“華麗”,用戶體驗很不好。
2、盡量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的樣式導(dǎo)入方式,而減少 @import 的使用,更勿使用多層嵌套的 @import 。因為在 IE 里, @import 相當(dāng)于將 <link> 放在頁面尾部。
This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.
導(dǎo)致的問題就是,頁面會有一段時間“樸素”,突然之間又“華麗”,用戶體驗很不好。
2、盡量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的樣式導(dǎo)入方式,而減少 @import 的使用,更勿使用多層嵌套的 @import 。因為在 IE 里, @import 相當(dāng)于將 <link> 放在頁面尾部。
This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.
相關(guān)文章
在IE6-的標(biāo)準(zhǔn)模式下和quirk模式下實現(xiàn)min-width
首先我們知道這個效果應(yīng)該是一個老話題了。 今天整理文件的時候,發(fā)現(xiàn)自己以前的一些布局的解決方法躺在文件夾里很長時間了,翻翻老底吧 需要說明的是有幸也見到過CSSPLAY的老工程師站長對這個效果的實現(xiàn),而且肯定是很早就給出來了。2008-06-06