最新中文字幕免费看影视,在线观看国产一区二区三区,在线欧美日韩制服国产,中文字幕,亚洲一区,制服欧美激情丝袜综合色

一、將樣式表放在頂部

可視性回饋的重要性

進(jìn) 度指示器有三個主要優(yōu)勢——它們讓用戶知道系統(tǒng)沒有崩潰，只是正在為他或她解決問題；它們指出了用戶大概還需要等多久，以便用戶能夠在漫長的等待中做些其 他事情；最后，它們能給用戶提供一些可以看的東西，使得等待不再是那么無聊。最后一點優(yōu)勢不可低估，這也是為什么推薦使用圖形進(jìn)度條而不是僅僅以數(shù)字形式 顯示預(yù)期的剩余時間。在Web的世界里，Html頁面的逐步呈現(xiàn)就是很好的進(jìn)度指示器。

將沒有立即使用的css放在底部是錯誤的做法

通常組件的下載是按照文檔中出現(xiàn)的順序下載的，所以將不需要立即使用到的組件css(比如需要用戶點擊登錄彈出框需要用到的樣式)放在底部，可以得到一個加載很快的頁面。然而這個推論其實是錯誤的，IE8以下(包括IE8)的工作方式是如果css表仍在加載，構(gòu)建呈現(xiàn)樹就是一種浪費，因為在所有樣式表加載并解析完畢之前無需繪制任何東西，這時整個瀏覽器顯示都是空白，直到css加載完畢，這就失去了提供可視化回饋的機(jī)會，讓用戶感覺到緩慢。

不過，更高級版本的IE和其他瀏覽器已經(jīng)克服了“白屏”問題，所以這種情況已經(jīng)不復(fù)存在。

無樣式內(nèi)容的閃爍

這里將討論另外一種出現(xiàn)的情況，當(dāng)我們將css放在底部，頁面可以正常逐步呈現(xiàn)，但在css下載并解析完畢之后，已經(jīng)呈現(xiàn)的文字和圖片就要用新的樣式重繪了，這就是“無樣式內(nèi)容的閃爍”，這將是一種不好的用戶體驗。

CSS的最佳擺放位置

使用LINK標(biāo)簽將樣式表放在文檔HEAD中。

二、將腳本放在底部

并行下載

瀏覽器下載組件的時候并不是每次只下載一個組件，而是實現(xiàn)了并行下載的機(jī)制。HTTP規(guī)范1.1建議瀏覽器從每個主機(jī)名并行地下載兩個組件。既假如頁面的所有組件都來自于一個主機(jī)名，則每次只能同時下載兩個組件。如果組件使用了兩個主機(jī)名，而且組件的主機(jī)名分配均勻，則每次并行下載的數(shù)量變成了2*2=4。不過，當(dāng)代的瀏覽器普遍實現(xiàn)都超過了2個并行下載，不同的瀏覽器設(shè)置都有所不同。

腳本阻塞下載

并行下載組件能加快頁面的加載速度，然而，在下載腳本的時候并行下載實際上是被禁用的，即使其他組件使用了不同的主機(jī)名，瀏覽器也不會啟動其他的下載。原因如下：1. 腳本可能使用了document.write來修改頁面內(nèi)容，因此瀏覽器會等待，以確保能夠恰當(dāng)?shù)夭季郑?/span>2. 為了保證腳本能夠按照正確的順序執(zhí)行，如果并行下載多個組件，就無法保證響應(yīng)是按照特定順序到達(dá)瀏覽器的。

所以，腳本放在越靠近頂部的地方將越延遲用戶的可視化反饋，這不是一種良好的用戶體驗，會讓用戶感覺到緩慢。

最佳做法

放置腳本的最好地方是頁面的底部，這不會阻止頁面內(nèi)容的呈現(xiàn)，而且頁面的可視化組件可以盡早下載。以博客園為例，博客園就把google流量分析的js放在底部，同時把下載Blog新聞和Blog側(cè)邊欄的js執(zhí)行函數(shù)放在了底部。

三、使用外部javascript和css

基礎(chǔ)知識

頁面瀏覽量(PV)：用戶對頁面請求訪問次數(shù)總和。

內(nèi)聯(lián) VS 外置

對于兩個相同大小的頁面，一個使用了內(nèi)聯(lián)，只有html需要下載，一個使用了外置，包括一個js和一個css，在用戶不帶緩存訪問頁面的時候，內(nèi)聯(lián)所有的js和css的效率更快，原因是外置js和css帶來額外的http請求開銷，1個http請求相對于3個http請求要更快一些。盡管如此，現(xiàn)實中還是使用外部文件會產(chǎn)生較快的訪問速度，這是由于外部js和css有機(jī)會被瀏覽器緩存起來，當(dāng)再次請求相同的js或css的時候，瀏覽器將不會發(fā)出http請求，而是使用緩存的組件，減少了總體需要下載文件的大小。

綜合來講，我們一般推薦使用外置的js和css，不過這也要根據(jù)自身web的訪問場景以及PV做出最優(yōu)選擇。

如何劃分組件？

當(dāng)我們決定使用外置js和css的時候，這時怎樣劃分js和css并打包到外部文件中成為一個首要考慮的問題。在典型情況下，頁面之間的js和css的重用既不可能100%重疊，也不可能100%無關(guān)。

一種極端的做法是創(chuàng)建一個單獨的，聯(lián)合了所有js的文件，再創(chuàng)建一個包含了所有css的文件。這只要求用戶生成一個Http請求，但它增加了用戶不帶緩存訪問的情況下的數(shù)據(jù)量，同時我們必須清楚：緩存有時會失效，這將帶來更多額外的開銷。而且，在任何一塊獨立的js或css改變后，都需要更新文件，并發(fā)布新的版本號，這將使所有客戶端的舊版本緩存失效。

另一種極端的做法是為每個頁面提供一組分離的外部文件，這種方式真正做到按需下載，但缺點在于每個頁面都產(chǎn)生令響應(yīng)時間變慢的HTTP請求。

對于大多數(shù)web應(yīng)用來說，我們需要一種折中的方案！將頁面劃分為幾種頁面類型，然后為每種類型創(chuàng)建單獨的js和css。以css為例，我們可以創(chuàng)建一個所有頁面都通用的global.css，再針對不同類型的頁面，創(chuàng)建對應(yīng)的css。