亚洲欧美视频二区,精精国产xxxx视频在线野外,欧美另类视频在线

轉自： Saturn's Weblog

一些泛WEB 2.0網站為了追求用戶體驗，可能會大量使用CSS和JS文件。這就導致在服務器帶寬一定的情況下，多用戶并發訪問速度變慢。如何加快網頁響應速度？解決辦法之一就是：依照 Yahoo性能優化小組提出的N條性能優化建議對前端程序進行優化和重構，關于此文的討論很多，在這里不再贅述。

這篇文章主要分享一下我個人在實際項目中，對于 使用PHP對JS和CSS進行壓縮的經驗 ，在這里假設服務器 僅支持GZIP壓縮 ，不支持.htaccess（符合很多站長的租用的虛擬主機實際情況）。

首先說說對CSS和JS文件進行性能優化的幾個小技巧：

將多個CSS/JS文檔合并成一個文件，以減少HTTP請求
對合并后的文件進行文檔壓縮，比如分別使用 js compressor 和 CSS compress
如果使用到一些主流的JavaScript框架，比如JQuery, Mootools或者YUI，強烈推薦直接使用 Google AJAX Library 以外部鏈接的形式導入基庫。
最后，就是本文所提到的，使用GZIP在服務器端對JS/CSS文檔進行壓縮。

這里提到的方法對系統來說是無侵入式的，也就是說不管你的程序是新編寫的，還是已經上線了很久，均適用。

先看我對圖標吾愛進行優化的實例截圖（YSlow）：

在這個例子中，我分別對服務器輸出的HTML文檔、JS文檔和CSS文檔使用了GZIP壓縮，可以看到壓縮效果非常明顯，文件體積減小了70%以上。頁面加載速度明顯加快。

實際上，用PHP使用GZIP壓縮非常簡單，其核心是使用ob_gzhandler，不過需要注意的一點是，并不是所有瀏覽器都支持GZIP傳送到客戶端的數據，所以要進行一定的容錯處理。

下面是使用PHP通過GZIP壓縮CSS的實例。

在存放CSS的文件夾中新建一個style.php文件，在此文件中加入以下代碼：

                            
                              

                              
                                 if
                                
                                  (
                                
                                extension_loaded
                                
                                  (
                                
                                
                                  'zlib'
                                
                                
                                  )
                                
                                
                                  )
                                
                                
                                  {
                                
                                //檢查服務器是否開啟了zlib拓展
                              
                              

                              
                                 ob_start
                                
                                  (
                                
                                
                                  'ob_gzhandler'
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                
                                  }
                                
                              
                              

                              
                                 header 
                                
                                  (
                                
                                
                                  "content-type: text/css; charset: gb2312"
                                
                                
                                  )
                                
                                
                                  ;
                                
                                //注意修改到你的編碼
                              
                              

                              
                                 header 
                                
                                  (
                                
                                
                                  "cache-control: must-revalidate"
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                 $offset 
                                
                                  =
                                
                                
                                  60
                                
                                
                                  *
                                
                                
                                  60
                                
                                
                                  *
                                
                                
                                  24
                                
                                
                                  ;
                                
                                //css文件的距離現在的過期時間，這里設置為一天
                              
                              

                              
                                 $expire 
                                
                                  =
                                
                                
                                  "expires: "
                                
                                 . gmdate 
                                
                                  (
                                
                                
                                  "D, d M Y H:i:s"
                                
                                
                                  ,
                                
                                 time
                                
                                  (
                                
                                
                                  )
                                
                                
                                  +
                                
                                 $offset
                                
                                  )
                                
                                 . 
                                
                                  " GMT"
                                
                                
                                  ;
                                
                              
                              

                              
                                 header 
                                
                                  (
                                
                                $expire
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                 ob_start
                                
                                  (
                                
                                
                                  "compress"
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                 function compress
                                
                                  (
                                
                                $buffer
                                
                                  )
                                
                                
                                  {
                                
                                //去除文件中的注釋
                              
                              

                              
                                 $buffer 
                                
                                  =
                                
                                 preg_replace
                                
                                  (
                                
                                
                                  '!/
                                  
                                    \*
                                  
                                  [^*]*
                                  
                                    \*
                                  
                                  +([^/][^*]*
                                  
                                    \*
                                  
                                  +)*/!'
                                
                                
                                  ,
                                
                                
                                  ''
                                
                                
                                  ,
                                
                                 $buffer
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                 return $buffer
                                
                                  ;
                                
                              
                              

                              
                                
                                  }
                                
                              
                              

                              
                                ?
                              
                              

                              
                                 //包含你的全部css文檔
                              
                              

                              
                                 include
                                
                                  (
                                
                                
                                  'global.css'
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                 include
                                
                                  (
                                
                                
                                  'layout.css'
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                ?
                              
                              

                              
                                 if
                                
                                  (
                                
                                extension_loaded
                                
                                  (
                                
                                
                                  'zlib'
                                
                                
                                  )
                                
                                
                                  )
                                
                                
                                  {
                                
                              
                              

                              
                                 ob_end_flush
                                
                                  (
                                
                                
                                  )
                                
                                
                                  ;
                                
                                //輸出buffer中的內容，即壓縮后的css文件
                              
                              

                              
                                
                                  }
                                
                              
                              

                              
                                ?
                                
                                  >

如果你處理的是JavaScript文件，你需要將上面代碼中的第5行的Content-type修改成以下：

? header ("content-type:application/x-javascript; charset: gb2312");

同樣需要注意的是文件的編碼，這里我用的是gb2312，如果你采用的是UTF-8或其他編碼，修改成對應的即可。

修改完成之后，在原引入CSS和JS文件的地方，將.css后綴/.js后綴的文件更換成這個style.php文件即可，如：

                <
                
                  script
                
                
                   type
                
                =
                
                  "text/javascript" 
                
                
                  src
                
                
                  ="
                
                
                  http://www.icon52.net/scripts/autoSuggest.js.
                  
                    
                      php
                    
                  
                  ?v=121
                
                
                  "
                
                >

Live Demo請使用Firefox，并安裝YSlow插件查看圖標吾愛這個網站。

2009-8-30 Update：

由于上面代碼中使用到了HTTP的Expires（過期）屬性用于在客戶端緩存CSS/JS代碼，所以，如果過期時間設置的太長（比如2020 年），當你在服務器端修改了JS/CSS代碼時，客戶端可能不會立即生效。解決辦法是：在php文件后面添加一個隨機參數，如上面例子中的 v=121 ，當下次修改了文件時，記得相應修改此隨機參數即可。

使用PHP壓縮網站JS/CSS文檔的實例

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義