系統優化技巧

1、儘量減少HTTP請求：Minimize HTTP Requests


2、利用HTTP緩存機制：Add an Expires or a Cache-Control Header


3、啓用Apache Gzip壓縮網頁內容：Gzip Components


4、腳本和樣式表放到獨立的文件：Make JavaScript and CSS External


5、腳本和樣式表精簡：Minify JavaScript and CSS

6、避免在HTML中縮放圖像：Don't Scale Images in HTML

一. 儘量減少HTTP請求


 1. 合併小圖片，減少加載網頁發送得HTTP請求次數


    CSS Satyr（CSS 塞特斯）是一款 CSS Sprites 的小工具。可以將多個小圖片整合成一張圖片，並生成相應的CSS調用代碼。


    生成後使用其中得定位CSS，如


        背景圖：
        

    .xnie {background-image: url(nextAndPrev.jpg);}

        每張小圖得具體位置信息：
       

        /* cls_1 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_next.png */
	.cls_1 {background-position: -0px -0px; width: 30px; height: 30px; }
	/* cls_2 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_prev.png */
	.cls_2 {background-position: -34px -0px; width: 30px; height: 30px; }
	/* cls_3 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_scroll_back.png */
	.cls_3 {background-position: -68px -0px; width: 14px; height: 20px; }
	/* cls_4 : D:\MEworkspace\CfgWeb\WebContent\order\intellect\gallery\ad_scroll_forward.png */
	.cls_4 {background-position: -86px -0px; width: 14px; height: 20px; }

        爲避免換行，稍微改造下：
       

        ul { display: inline-block; }
	ul { *display: inline; *zoom: 1; } 
	li { display: inline-block; }
	li { *display: inline; *zoom: 1; }

   使用(以"放大鏡","回收站")：
          
 

<img src="<%=request.getContextPath()%>/images/quote.gif"  border="0" style="cursor: hand" onClick="selectMaterial()"> 
<img src="<%=request.getContextPath()%>/images/aiger.gif"  border="0" style="cursor: hand" onClick="clearMaterial()"> 
	
<ul><li class="xnie quote" οnclick="selectMaterial()" style="cursor: hand"></li> </ul>	
<ul><li class="xnie aiger" οnclick="clearMaterial()"  style="cursor: hand"></li> </ul>

      
       注意，當需要後續往已生成的圖片裏面追加圖片時，只需將原來的生成的圖片拖入，把新加入的圖片放到後面排列，生成後的樣式會把原來
             生成的當成一個樣式處理（原來生成的小圖片相對位置沒變，還用原來的樣式即可），新增加的圖片會單獨生成css偏移量，把它們複製到
             原來的生成的樣式下即可。


  


 2. 消除掉404錯誤


 
 3. 消除不必要的Ajax請求，避免頁面載入過程中就需要使用的東西再用ajax去請求調用，直接在轉向頁面前的action後臺處理完返回給前臺頁面使用


    如頁面載入時，通過ajax去分別獲取國家，省市的代碼  
 
    如 配置主題下單orderEdit_body.jsp   initFuel()中的  
 


 4. 避免直接在jsp頁面寫大量js代碼，這些代碼無法被緩存， 每次都得請求從服務器端返回， 因該把它們單獨放入js文件，在jsp頁面引入。






 二. 開啓Apache緩存機制


     修改httpd.conf文件，如有有下面三行，去點前面的‘＃’，若沒有，則新增（需確保

	LoadModule cache_module modules/mod_cache.so 
	LoadModule disk_cache_module modules/mod_disk_cache.so
	LoadModule mem_cache_module modules/mod_mem_cache.so


	<IfModule mod_cache.c>
	    <IfModule mod_mem_cache.c>
		CacheEnable mem /
		MCacheSize 204800
		MCacheMaxObjectCount 5000
		MCacheMinObjectSize 1
		MCacheMaxObjectSize 102400
	    </IfModule>
	</IfModule>

     設置 LogLevel debug
     重啓apache，刪除瀏覽器臨時文件，logs\error.log 中出現cache 字符說明配置緩存成功


     更多詳細配置請搜索apache緩存機制






 三. 啓用Apache Gzip壓縮網頁內容
 
     利用Apache中的Gzip模塊，我們可以使用Gzip壓縮算法來對Apache服務器發佈的網頁內容進行壓縮後再傳輸到客戶端瀏覽器。這樣經過壓縮後實際上降低了網絡傳輸的字節數，
     最明顯的好處就是可以加快網頁加載的速度。


     Web服務器處理HTTP壓縮的過程如下：


   1. Web服務器接收到瀏覽器的HTTP請求後，檢查瀏覽器是否支持HTTP壓縮（Accept-Encoding 信息）；


   2. 如果瀏覽器支持HTTP壓縮，Web服務器檢查請求文件的後綴名；


   3. 如果請求文件是HTML、CSS等靜態文件，Web服務器到壓縮緩衝目錄中檢查是否已經存在請求文件的最新壓縮文件；


   4. 如果請求文件的壓縮文件不存在，Web服務器向瀏覽器返回未壓縮的請求文件，並在壓縮緩衝目錄中存放請求文件的壓縮文件；


   5. 如果請求文件的最新壓縮文件已經存在，則直接返回請求文件的壓縮文件；


   6. 如果請求文件是動態文件，Web服務器動態壓縮內容並返回瀏覽器，壓縮內容不存放到壓縮緩存目錄中。




     Apache上利用Gzip壓縮算法進行壓縮的模塊有兩種：mod_gzip 和mod_deflate。要使用Gzip Web壓縮，請首先確定你的服務器開啓了對這兩個組件之一的支持。在Linux服務器上，
     現在已經有越來越多的空間商開放了對它們的支持，有的甚至是同時 支持這兩個模塊的。例如目前Godaddy、Bluehost及DreamHosts等空間商的服務器都已同時支持mod_gzip 和mod_deflate。


     雖然使用Gzip同時也需要客戶端瀏覽器的支持，不過不用擔心，目前大部分瀏覽器都已經支持Gzip了，如IE、Mozilla Firefox、Opera、Chrome等。


     通過查看HTTP頭，我們可以快速判斷使用的客戶端瀏覽器是否支持接受gzip壓縮。若發送的HTTP頭中出現以下信息，則表明你的瀏覽器支持接受相應的gzip壓縮：


     Accept-Encoding: gzip 支持mod_gzip
     Accept-Encoding: deflate 支持mod_deflate 
     Accept-Encoding: gzip,deflate 同時支持mod_gzip 和mod_deflate 


     如果apache開啓了GZIP壓縮，其返回的頭裏應該有
     Content-Encoding: gzip
      
     *** Apache開啓Gzip壓縮方法：
     1. 修改httpd.conf , 找到下面兩行，如果沒有手動加上（確保modules文件夾下有這兩個so文件）
       

LoadModule deflate_module modules/mod_deflate.so    #開啓Apache deflate壓縮
LoadModule headers_module modules/mod_headers.so    #告訴瀏覽器使用gzip壓縮返回，否則瀏覽器不解壓直接下載gzip包展示會出錯，可能就是加上 Content-Encoding: gzip 說明

     2. 修改httpd.conf ，加入壓縮規則等描述，可加至最後
        

	<IfModule mod_deflate.c> 
	    SetOutputFilter DEFLATE  
	    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary  
	    SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary  
	    SetEnvIfNoCase Request_URI .(?:pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary


	    AddOutputFilterByType DEFLATE text/*  
	    AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript application/javascript application/x-javascript 
	    AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp  
	</IfModule>

     3. 重新啓動Apache 測試


      壓縮後頁面大小降低90％左右


  


  四. 腳本和樣式表放到獨立的文件


      把原來的部分以JSP文件存儲的JS文件， 改爲JS文件 （處理其中的<%=request.getContextPath()%>  ) 
      JSP文件導致每次都加載，無法緩存. 






  五. 腳本和樣式表精簡：Minify


    合併頁面中得CSS，JAVASCRIPT文件請求
    
    一般得JSP頁面中都會鏈接許多外部JS文件和CSS，文件，瀏覽器在加載頁面得過程中會對這些外部引入得JS和CSS文件單獨發送HTTP請求（可用HTTP WATCH測試）在內網環境可能單個都很快，
    但是在外網或者網絡環境不好的情況下，這些請求所耗費的時間就會被放大很多倍，我們得目標就是把這些
    分散得HTTP請求合併起來，減少因爲網絡情況不佳而產生得等待和響應時間。
    以orderEdit_body.jsp 爲例 ，18個js文件請求和三個CSS請求最終可以合併成2個HTTP請求。


    益處：
        1. 合併後請求JS文件的總大小會縮小 （minify會在apache端把請求的js文件列表合併壓縮，包括去掉換行，空格等）
2. 網頁發送HTTP請求的總數會大幅降低.


    環境配置(具體可參考本人整理的環境配置說明)：
        1. 本地需配置apache+tomcat環境。
2. apache配置minify (因爲minify是php語言編寫的，所以還要給apache配置支持php環境）




    頁面需改動


        引入CSS原寫法：

        <link href="/CfgWeb/css/style.css" rel="stylesheet" type="text/css">
<span style="white-space:pre">	</span><link href="/CfgWeb/css/autocomplete.css" rel="stylesheet" type="text/css">
<span style="white-space:pre">	</span><link href="/CfgWeb/js/jquery/thickbox.css" rel="stylesheet" type="text/css">

        引入CSS新寫法：
       

<pre name="code" class="html">        <link href="/min/b=CfgWeb&f=/css/style.css,/css/autocomplete.css,/js/jquery/thickbox.css" rel="stylesheet" type="text/css">

        引入CSS原寫法：

        <script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js"   charset="utf-8"  type="text/javascript"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/pcm_window.js" charset="utf-8" type="text/javascript"></script> 
        <script language="javascript" src="<%=request.getContextPath()%>/js/error.js"      charset="utf-8"  type="text/javascript"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/orderConfig.js" charset="utf-8"  type="text/javascript"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgPic.js" type="text/javascript" charset="utf-8"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/orderConfigEdit.js" type="text/javascript" charset="utf-8"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgFourthEdit.js" type="text/javascript" charset="utf-8"></script> 
        <script language="Javascript" src="<%=request.getContextPath()%>/js/orderCfgComment.js" type="text/javascript" charset="utf-8"></script> 

        引入CSS新寫法：

	<script type="text/javascript" 
              src="/min/b=<%=request.getContextPath().substring(1,request.getContextPath().length()) %>&f=/js/calendar.js,/js/pcm_window.js,/js/error.js,/js/orderConfig.js,/js/orderCfgPic.js,/js/orderConfigEdit.js,/js/orderCfgFourthEdit.js,/js/orderCfgComment.js" charset="utf-8"></script>

        


        ***注意引入的JavaScript文件需統一UTF-8編碼，如果目前不是，需要把它們轉爲UTF-8無BOM存儲（可用notePad++), 修改編碼後的js文件可能對原來有引用他們的jsp有影響，因此要把原來引入它的jsp頁面
中的引入指定編碼.
原寫法：

       <script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js" type="text/javascript"></script>

新寫法：

      <script language="javascript" src="<%=request.getContextPath()%>/js/calendar.js" type="text/javascript" charset="utf-8"></script> 

   
   六. 避免在HTML中縮放圖像




     避免在HTML中縮放圖像，縮放圖象極大浪費網絡流量，顯示效果可能也會因爲過渡擠壓變的有鋸齒現象，應該爲每張可能顯示小尺寸的圖片生成縮略圖，在需要顯示小圖片的時候直接使用
    小圖片顯示。
    以”智能選車（國內）“查詢爲例，用httpWatch監測客戶端接受到的網絡流量( listPicFam.jsp )。


    生成縮略圖(後臺程序修改)：
       1. 如在存放圖片數據的表picture_data 中新增字段"THUMBNAIL_FILE"用於存儲這張圖片對應的縮略圖的地址（縮略圖通過程序寫到服務器磁盤上）。
       2. 在系統中新增圖片的地方新增生成縮略圖的功能，把生成的縮略圖放到服務器硬盤上，並把縮略圖地址信息寫入數據庫 ecc_oc.picture_data 的THUMBNAIL_FILE字段。
       3. 如果有修改圖片的功能，也需要加入生成縮略圖的功能。
       4. 創建一個批量生成縮略圖的程序，用於爲現有的圖片生成縮略圖。


       上面的功能都已經有實現，並且經檢驗已經發布正式系統：
       FileUploadNewDAO.java 創建縮略圖的入口程序，它調用FileTool.java寫入圖片到服務器磁盤並把路徑信息更新到圖片數據庫表。
       ImageUtil.java  創建縮略圖的工具類,它調用FileTool.java寫入縮略圖到磁盤
       FileTool.java  操作文件及文件夾的工具類。
       
       FileTypeTest.java 判斷圖片類型的工具類，讀取圖片二進制流信息頭判斷其圖片類型。
       
       示例程序：
       PicAction.java  doInput  創建圖片的時候生成縮略圖
       PicAction.java  doUpdate 修改圖片的時候生成縮略圖
       PicAction.java  processImages 批量處理現有的圖片，爲他們生成縮略圖
                                  
                                   FileTypeTest.java判斷圖片類型
       FileUploadNewDAO.create() --------------------------------------> ImageUtil.saveImage()------->FileTool.mkdirs() 寫入文件等




    顯示縮略圖(前臺頁面修改)：


       一般頁面上顯示圖片都是通過一個統一的servlet來顯示，如OC：
       原寫法：

       <img  height="85" width="158" alt="無圖片" src="<%=request.getContextPath()%>/ShowPic?pic_id=<bean:write name="fam" property="picId"/>"/>

       新寫法：

       <img  height="85" width="158" alt="無圖片" src="<%=request.getContextPath()%>/ShowPic?pic_id=<bean:write name="fam" property="picId"/>&showThumbnail=yes"/>

       新寫法多加了一個固定參數 showThumbnail=yes ，表示此處顯示的是小圖


       ***修改顯示圖片的servlet showImage.java ,在不影響原功能的基礎上對其加以改造，判斷其是否有縮略圖（可通過判斷THUMBNAIL_FILE字段是否爲空，文件是否存在判斷），如果有則返回縮略圖
       若沒有則按原邏輯返回原圖。