web頁(yè)面是由各種各樣的對象(HTML、CSS、圖像、Javascript等)構成的，這就使得瀏覽器能夠獨立甚至并行地下載它們。提高Web頁(yè)面的性能，從而提高擴展性(為一個(gè)頁(yè)面提供的對象少，就意味著(zhù)服務(wù)器能夠多服務(wù)幾個(gè)頁(yè)面)的最簡(jiǎn)單方法之一就是減少頁(yè)面上的對象。對大多數頁(yè)面來(lái)說(shuō)，造成性能問(wèn)題的罪魁禍首都是圖形化對象，如照片和圖像。作為示例，讓我們來(lái)看看Google的檢索頁(yè)面(www.google.com)如他們自己所述，該頁(yè)面本質(zhì)上就是極簡(jiǎn)的。在編寫(xiě)本書(shū)時(shí)，Google的檢索頁(yè)面上只有5個(gè)對象:一個(gè)HTML文件、兩個(gè)圖像和兩個(gè)Javascript文件。我做了一個(gè)不算很科學(xué)的實(shí)驗，載人該檢索頁(yè)面的時(shí)間約為300毫秒。再看一看與我們合作的一個(gè)在線(xiàn)雜志業(yè)，我們這個(gè)客戶(hù)的主頁(yè)有200多個(gè)對象，其中145個(gè)是圖像，平均需要花費111秒以上才能載入該頁(yè)面。這個(gè)客戶(hù)并沒(méi)有意識到，頁(yè)面性能低會(huì )導致有價(jià)值的讀者流失。Google于2009年發(fā)布過(guò)一個(gè)白皮書(shū)，聲稱(chēng)測試表明檢索延遲增加400毫秒，就會(huì )使每天的檢索量減少將近0.6%。
減少頁(yè)面上的對象是提高性能和可擴展性的好方法，但是在你急于刪除所有圖像前，還需要考慮幾點(diǎn)。首先，顯然要考考慮你想傳達給客戶(hù)的重要信息。如果沒(méi)有圖像，你的頁(yè)面看起來(lái)就會(huì )像1992W3項目的頁(yè)面，該頁(yè)面據說(shuō)是史上最早的一個(gè)Web頁(yè)面。由于你需要圖像、Javascript腳本和CSS文件，那么第二點(diǎn)需要考慮的就是把相似的對象合并到一個(gè)文件中。這個(gè)主意并不壞，事實(shí)上，還有一個(gè)專(zhuān)門(mén)的技巧，即CSS圖片精靈。所謂圖片精靈，就是一組小圖像的集合，這些小圖像被組合成一個(gè)較大的圖像，使用CSS處理這幅圖像就可以只顯示其中一幅小圖像。這樣做的好處就是大大減少了所請求的圖像數量。返回 Google檢索頁(yè)面，該頁(yè)面上的兩個(gè)圖像之一，就是一個(gè)圖片精靈，它是由二十多個(gè)能夠獨立顯示的小圖像構成的。
至此，我們已經(jīng)討論過(guò)，雖然減少頁(yè)面上的對象可以提高性能和可擴展性，但是這種做法必須權衡考慮頁(yè)面對現代外觀(guān)的需求(圖像、CSS文件和Javascript)。接下來(lái)，我們討論如何把這些對象組合成一個(gè)對象，從而減少瀏覽器生成頁(yè)面所必需的請求。不過(guò)，這就有另外一點(diǎn)需要權衡，即把所有對象都組合到一個(gè)又對象中，就不能利用我們在每個(gè)服務(wù)器的最大同時(shí)持續連接數了。簡(jiǎn)單重述一下，最大同時(shí)連接數指瀏覽器從一個(gè)域中同時(shí)下載多個(gè)對象的數量。如果所有內容都放在一個(gè)對象中，那么瀏覽器這種能同時(shí)下載兩三個(gè)對象的能力就毫無(wú)用武之地了?，F在，我們需要考慮把這些對象分布到幾個(gè)小對象中，這樣就能夠同時(shí)下載。
瀏覽器的同時(shí)連接功能是對提供對象的域的限制。如果頁(yè)面上的所有對象都來(lái)自于一個(gè)域(www.akfpartners.com)，那么瀏覽器設置的最大連接數就是最多可以同時(shí)下載的對象數。如前所述，這個(gè)最大數建議設為2，不過(guò)許多瀏覽器默認設置為6或者更高。因此，最好把你的內容(圖像、CSS文件、Javascript文件等)分成足夠多的對象，以便充分利用瀏覽器的這一功能。能夠真正利用瀏覽器這一功能的一個(gè)技巧是從不同的子域提供不同的對象(例如，static.akfpartners com、static2.akfpartners，com等)。瀏覽器會(huì )分別考慮這些域，能夠并發(fā)地讓每個(gè)域都達到最大連接數。前面我們提到過(guò)的在線(xiàn)雜志的客戶(hù)，對載入時(shí)間1秒的頁(yè)面使用了該技術(shù)，把對象分布到7個(gè)子域中，從而把平均載入時(shí)間減少到了5秒以下。
遺憾的是，對于理想的對象大小或應該采用多少個(gè)子域，沒(méi)有絕對的答案。提高性能和可擴展性的關(guān)鍵還是測試頁(yè)面。在必要的內容和功能、對象大小、顯示時(shí)間、總下載時(shí)間、域等因素之間，都要進(jìn)行平衡。如果頁(yè)面上有100個(gè)對象，每個(gè)大小50KB，那么把它們組合到一個(gè)圖片精靈中可能不是好方法，因為在沒(méi)有把4.9MB的對象下載完之前，任何圖像都顯示不出來(lái)。如果把所有js文件都組合到一個(gè)文件中，那么在沒(méi)有把整個(gè)文件下載完之前，任何 Javascript功能都不能用。究竟哪種選擇才是最好的，只有使用各種ISP連接速度在各種瀏覽器上測試頁(yè)面之后才能確切知道。
總之，頁(yè)面上的對象越少，網(wǎng)頁(yè)性能就越好，但是必須與其他因素平衡。這些因素包括必須顯示多少內容，多少對象可以組合起來(lái)，如何通過(guò)增加域最大限度地利用同時(shí)連接，頁(yè)面總體大小以及限制對象數量是否有幫助等。雖然本原則涉及很多提高Web站點(diǎn)性能的技術(shù)。
此外，還有很多優(yōu)化網(wǎng)站建設性能的技術(shù)可以考慮，包括在頁(yè)面頂部載入CSS文件、在底部載入 Javascript文件、減小文件、利用緩存、延遲加載等。
本文地址：http://havencoinwallet.com//article/3451.html
