提醒：本文最後更新於 2858 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

連續發了幾篇純後端的文章，來點老本行有關的東東。昨天實現了本部落格的ping server之後，按計劃今天應該寫完ping client的。結果中午裝IE9，體驗新版develop toolbar時，無意中發現我的部落格請求數好多，這對一個搞了這麼多年前端的人來說太丟人了，話不多說，馬上來優化。

首先合併css和js，這沒什麼好講的，寫個py指令碼自動合併檔案，再調下yui壓縮就行了。圖片資源就有點無語了，我這不起眼的部落格面板居然用到20個多平均不到1kb的小圖，作者夠懶的。當然這面板不是我寫的哈，看最底部的版權就知道。

既然是玩自己的部落格程式，當然要發揮可以隨意折騰的優勢。除了拼大圖之外，一個可行的方案是把圖片弄成DataURI/MHTML放進css裡，大家很早就開始這樣玩了。前段時間我也寫過一個py指令碼來實現這個功能，因為有風險還沒在專案中採用，正好拿來試試。跑完指令碼後，背景圖片都替換成了下面這樣的：

.comments-list div.alt { background: #e1f4fc url(../img/comments-list-alt-bkg.png) no-repeat left top; padding-top: 40px; border: none; margin-bottom: 25px;}
=>
.comments-list div.alt { background: #e1f4fc url(data:image/png;base64,iVBORw亂七八糟一堆亂碼SuQmCC) no-repeat left top; padding-top: 40px; border: none; margin-bottom: 25px;*background-image:url(mhtml:http://www.imququ.com/static/blogs/css/style.min.css!13);}
 

原理和具體怎麼實現就不貼了，網上一大堆。需要注意的幾點：1、不要忘記最後一個分隔符後的“--”；2、引用mhtml檔案一定要用絕對路徑；3、要先yui壓縮再編圖片別弄反了，為什麼呢自己想。

搞定資源連線數後，還有一點極其不爽。Ctrl+U看下，原始碼裡大段的換行和tab，非常的不美觀。這問題在模板輸出頁面時很普遍，smarty提供了strip去多餘的空白，django有類似的spaceless。問題是這些標記要自己找合適的位置去新增，strip範圍太大容易出問題，我這麼懶當然不想一個個加。於是，就有了下面的方案。

統一攔截response，對content做html語法分析，去掉不想要的內容，再拼裝起來輸出，這就一勞永逸了。除了空白之外還有一些屬性什麼的也可以去掉，詳情可以看Miller同學這篇（連結已失效），非常全面，而且按推薦與否做了歸類。

得益於django高階的中介軟體思想，這個過程實現出來差不多就下面幾行：

class CompressHtmlMiddleware(object):
    def process_response(self, request, response):
        if request.GET.get('compress_html', '') == '1': #根據url引數判斷是否開啟壓縮
            parser = HtmlParser()
            parser.feed(response.content)
            response.content = parser.output()
        return response

這裡用到的HtmlParser是我之前基於SGMLParser寫的一段程式碼，除了去空白換行，還有幾個額外功能。寫得實在是爛就不獻醜了。貼幾個配置項，大概就明白了：

#可以刪除的閉合標籤
remove_endtag = ["html", "body", "colgroup", "thead", "tr", "tbody", "td", "p", "dt", "dd", "li", "option", "tfoot"] 

#可以刪除屬性值的屬性
token_only_name = ['disabled','selected','checked', 'readonly', 'multiple']

#可以刪除的標籤預設屬性（空屬性全部去掉）
token_def_val = { 
    'link' : { 'media' : 'screen' },
    'input' : { 'type' : 'text' },
    'form' : { 'method' : 'get' },
    'script' : { 'type' : 'text/javascript' }
}

可以看出，li、body、html什麼的結束符都被幹掉了；屬性值只要沒有特殊符號，兩端的引號也不要了。這是一個要速度不要標準的方案。

總結下，DataURI/MHTML的方案，追求最少的連線數，卻導致css檔案變大不少；HTML激進壓縮為了使程式碼內容最少，放棄標準並增加了客戶端解析的難度。自己的部落格怎麼玩都可以，實際專案中值不值得這樣去做，就要具體問題具體分析了。

--EOF--

發表於 2011-03-16 01:12:48 ，並被新增「 效能優化 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 2858 天前，文中所描述的資訊可能已發生改變，請謹慎使用。