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