91精品国产一区二区三区蜜臀,欧美国产小视频,色婷婷国产精品

轉(zhuǎn)自： Saturn's Weblog

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

這篇文章主要分享一下我個(gè)人在實(shí)際項(xiàng)目中，對(duì)于 使用PHP對(duì)JS和CSS進(jìn)行壓縮的經(jīng)驗(yàn) ，在這里假設(shè)服務(wù)器 僅支持GZIP壓縮 ，不支持.htaccess（符合很多站長(zhǎng)的租用的虛擬主機(jī)實(shí)際情況）。

首先說(shuō)說(shuō)對(duì)CSS和JS文件進(jìn)行性能優(yōu)化的幾個(gè)小技巧：

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

這里提到的方法對(duì)系統(tǒng)來(lái)說(shuō)是無(wú)侵入式的，也就是說(shuō)不管你的程序是新編寫(xiě)的，還是已經(jīng)上線了很久，均適用。

先看我對(duì) 圖標(biāo)吾愛(ài) 進(jìn)行優(yōu)化的實(shí)例截圖（YSlow）：

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

實(shí)際上，用PHP使用GZIP壓縮非常簡(jiǎn)單，其核心是使用ob_gzhandler，不過(guò)需要注意的一點(diǎn)是，并不是所有瀏覽器都支持GZIP傳送到客戶端的數(shù)據(jù)，所以要進(jìn)行一定的容錯(cuò)處理。

下面是使用PHP通過(guò)GZIP壓縮CSS的實(shí)例。

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

                            
                              

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

                              
                                 ob_start
                                
                                  (
                                
                                
                                  'ob_gzhandler'
                                
                                
                                  )
                                
                                
                                  ;
                                
                              
                              

                              
                                
                                  }
                                
                              
                              

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

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

                              
                                 $offset 
                                
                                  =
                                
                                
                                  60
                                
                                
                                  *
                                
                                
                                  60
                                
                                
                                  *
                                
                                
                                  24
                                
                                
                                  ;
                                
                                //css文件的距離現(xiàn)在的過(guò)期時(shí)間，這里設(shè)置為一天
                              
                              

                              
                                 $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中的內(nèi)容，即壓縮后的css文件
                              
                              

                              
                                
                                  }
                                
                              
                              

                              
                                ?
                                
                                  >

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

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

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

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

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

Live Demo請(qǐng)使用Firefox，并安裝YSlow插件查看圖標(biāo)吾愛(ài) 這個(gè)網(wǎng)站。

2009-8-30 Update：

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

使用PHP壓縮網(wǎng)站JS/CSS文檔的實(shí)例

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

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

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利