頁面中CSS加載方式的優(yōu)化
更新時(shí)間:2008年03月26日 22:50:59 作者:
今天學(xué)到了css的加載優(yōu)化,原來用@import的方法是不對(duì)的
1、應(yīng)該將 CSS 放置于結(jié)構(gòu)的上方(一般放置于 head 元素內(nèi))。CSS 是解釋型語言,F(xiàn)irefox 和 IE 在等待 CSS 傳輸完成之前不會(huì)渲染任何東西。只有將 CSS 前置,才可在瀏覽器解析結(jié)構(gòu)時(shí),對(duì)頁面進(jìn)行渲染。
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)致的問題就是,頁面會(huì)有一段時(shí)間“樸素”,突然之間又“華麗”,用戶體驗(yàn)很不好。
2、盡量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的樣式導(dǎo)入方式,而減少 @import 的使用,更勿使用多層嵌套的 @import 。因?yàn)樵?nbsp;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)致的問題就是,頁面會(huì)有一段時(shí)間“樸素”,突然之間又“華麗”,用戶體驗(yàn)很不好。
2、盡量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的樣式導(dǎo)入方式,而減少 @import 的使用,更勿使用多層嵌套的 @import 。因?yàn)樵?nbsp;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)文章
制做Google Sitemap文件的簡(jiǎn)單方法與圖文教程
制做Google Sitemap文件的簡(jiǎn)單方法與圖文教程...2007-03-03超級(jí)實(shí)用的幾款瀏覽器插件,打開豐富資源大門
去瀏覽器搜索資源和信息已經(jīng)成為我們的日常,但一個(gè)沒有裝插件的瀏覽器充其量只能發(fā)揮40%的功能,沒有插件的瀏覽器是沒有靈魂的,要想發(fā)揮瀏覽器全部的功能,插件是必不可少的,學(xué)會(huì)之后讓你的瀏覽器“活過來”2021-08-08比較詳細(xì)的分析下載站的發(fā)展注意事項(xiàng)
比較詳細(xì)的分析下載站的發(fā)展注意事項(xiàng)...2007-11-11在IE6-的標(biāo)準(zhǔn)模式下和quirk模式下實(shí)現(xiàn)min-width
首先我們知道這個(gè)效果應(yīng)該是一個(gè)老話題了。 今天整理文件的時(shí)候,發(fā)現(xiàn)自己以前的一些布局的解決方法躺在文件夾里很長(zhǎng)時(shí)間了,翻翻老底吧 需要說明的是有幸也見到過CSSPLAY的老工程師站長(zhǎng)對(duì)這個(gè)效果的實(shí)現(xiàn),而且肯定是很早就給出來了。2008-06-06