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