Java Web 前端高性能優化（一）

時間 2019-11-10

標籤 java web 前端高性能優化欄目 Java 简体版

原文原文鏈接

Web 發展的速度讓許多人歎爲觀止，層出不窮的組件、技術，只須要合理的組合、恰當的設置，就可讓 Web 程序性能不斷飛躍。全部 Web 的思想都是通用的，它們也能夠運用到 Java Web。這一系列的文章，主要講解網頁前端性能優化，是與用戶最直接接觸的。事實證實，與其消耗大量時間在服務器端，在前端進行的優化更易得到用戶的確定。javascript

一.引言

前端的高性能部分，主要是指減小請求數、減小傳輸的數據以及提升用戶體驗，在這個部分，圖片的優化顯得相當重要。許多網站的美化，都是靠絢麗的圖片達到的，圖片偏偏是佔用帶寬的元兇。每一個 img 標籤，瀏覽器都會試圖發起一個下載請求。本文就詳細介紹了圖片優化的幾種方式，介紹了使用的工具以及優化後的結果。css

二.圖片壓縮

減小圖片的大小，能夠明顯的提升性能，而對於已有圖片，要想減小圖片的大小，只能改變圖片的格式，這裏推薦的是 PNG8 的格式，它能夠在基本保持清晰度的狀況下，減小圖片的大小。知道這個原理之後，能夠用 Windows 的畫圖工具、以及 PhotoShop 工具逐個的改變。可是這樣作的缺點是單張處理，效率太慢。本文推薦一個在線轉換工具 Smush.it，能夠批量的進行壓縮與轉換。它的地址是：www.smushit.com/ysmush.it 打開後效果以下圖所示。html

圖 1. Yahoo 提供的在線壓縮工具前端

咱們上傳了一張大小爲 3790K 的圖片，待在線程序處理完畢後，點擊 Download Smushed Images 下載查看結果。下載界面以下圖所示。java

圖 2. 壓縮後的結果web

打開下載下來的壓縮包，查看結果能夠看到，圖片從 3790 減小到了 3344，就以下圖所示。對於大批量的圖片網站，這個方法會幫助快速實現批量圖片壓縮。瀏覽器

圖 3. 壓縮後的結果緩存

三.圖像合併實現 CSS Sprites

CSS Sprites 是一個吸引人的技術，它其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。性能優化

利用CSS Sprites 能很好地減小網頁的 HTTP 請求，從而大大的提升了頁面的性能，這也是 CSS Sprites 最大的優勢，也是其被普遍傳播和應用的主要緣由。服務器

CSS Sprites 能減小圖片的字節，因爲圖像合併後基本信息不用重複，那麼多張圖片合併成 1 張圖片的字節每每老是小於這些圖片的字節總和。同時 CSS Sprites 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。同時，因爲將圖片合併到一張圖片，所以圖片的請求數就被縮減到 1 個。其餘的請求均可以用到本地緩存，不須要訪問服務器。下圖是一個合併之後的圖片。它將不少小圖標都拼到了一塊兒。

圖 4. 合併後的圖片

這裏介紹一個小工具 ---「CSS Sprites 樣式生成工具 2.0」，能夠從這裏下載。這是一個簡單免費的小工具，用該工具打開上面的圖片，選中圖片中的某塊。以下圖的「綠色大拇指」部分，工具會計算出這個部分的長、寬、距離左上角的距離。勾選複製類名、複製寬、複製高，再點擊「複製當前樣式」按鈕。這樣生成的樣式會被複制到剪切板上。

圖 5. 小工具的使用

生成的 CSS 代碼如清單 1 所示。

清單 1. 小工具生成的 CSS 代碼

.div_6148{width:18px;height:20px;background-position:-17px -209px;}

將這段代碼運用在網頁上，

清單 2. 測試 CSS Sprites 代碼

<html>
 <head> 
     <style> 
           .div_6148 
           { 
              width:18px; 
              height:20px; 
              background-image:url(css-sprites-source.gif); 
              background-position:-17px -209px; 
   } 
     </style> 
 </head> 
 <body> 
 <div class="div_6148"></div> 
 </body> 
 </html>

打開測試網頁顯示結果以下圖所示。

圖 6. 測試網頁效果

能夠看到，網頁只顯示工具選擇的「綠色大拇指」部分，這樣的代碼能夠運用在網頁的多個部分，而圖片只須要下載一次，這就是該技術的最大優點，減小了由於小圖片引發的多個請求。

四.多域名請求

有時候，圖片數據太多，一些公司的解決方法是將圖片數據分到多個域名的服務器上，這在一方面是將服務器的請求壓力分到多個硬件服務器上。另外一方面，是利用了瀏覽器的特性。通常來講，瀏覽器對於相同域名的圖片，最多用 2-4 個線程並行下載。不一樣瀏覽器的併發下載數，都是不一樣的，併發數以下清單 3 所示。

清單 3. 各瀏覽器的併發下載數



Browsers HTTP/1.1 HTTP/1.0

IE6,7 2 4

IE8 6 6

FireFox 2 2 8

FireFox 3 6 6

Safari 3,4 4 4

Chrome 1,2 6 ?

Chrome 3 4 4

Opera 9.63,10.00alpha 4 4

而相同域名的其餘圖片，則要等到其餘圖片下載完後纔會開始下載。這裏我作了一個測試，選擇了多個相同域名的圖片在同一網頁上。代碼如清單 4 所示。

清單 4. 單域名的多圖片下載

<html> 
 <body> 
 <img src="http://img1.gtimg.com/news/pics/hv1/123/231/804/52339128.jpg"><br> 
 <img src="http://img1.gtimg.com/news/pics/hv1/87/235/804/52340112.jpg"><br> 
 <img src="http://img1.gtimg.com/finance/pics/hv1/41/119/804/52310486.jpg"><br> 
 <img src="http://img1.gtimg.com/sports/pics/hv1/246/198/804/52330836.jpg"><br> 
 <img src="http://img1.gtimg.com/ent/pics/hv1/101/54/805/52358996.jpg"><br> 
 <img src="http://img1.gtimg.com/blog/pics/hv1/169/226/804/52337899.jpg"> 
 </body> 
 </html>

接下來，使用 FireFox 的 Firebug 插件監控網絡(Firebugde 使用請參考Firebug,Debugger javascript 調試利器附下載地址)。結果以下圖所示。

圖 7. 單域名多圖片的監控效果

能夠看到，相同域名的多張圖片，它們下載的起始點是存在延遲的。它們並非並行下載。當咱們將其中的 3 張圖片換成別的域名圖片。如清單 5 所示。

清單 5. 多域名多圖片下載

<html> 
 <body> 
 <img src="http://img1.gtimg.com/news/pics/hv1/123/231/804/52339128.jpg"><br> 
 <img src="http://img1.gtimg.com/news/pics/hv1/87/235/804/52340112.jpg"><br> 
 <img src="http://img1.gtimg.com/finance/pics/hv1/41/119/804/52310486.jpg"><br> 
 <img src="http://i0.itc.cn/20110624/64a_2ee7d710_2ec6_b38d_b678_dc3af28392be_1.jpg"><br> 
 <img src="http://i0.itc.cn/20110624/3b0_643eaea5_1233_b543_82b7_9c7273c7f97c_1.jpg"><br> 
 <img src="http://i0.itc.cn/20110623/962_fa6e8a78_625a_1234_147f_3a627fe17033_1.jpg"> 
 </body> 
 </html>

再次查看網絡監控，能夠看到，這些圖片是並行下載的。

圖 8. 多域名多圖片測試結果

多域名的下載當然很好，可是太多域名並不太好，通常在 2-3 個域名下載就差很少。