昨天steve的 講座涉及了一個(gè)我從沒(méi)考慮的領(lǐng)域，在沒(méi)法優(yōu)化后臺(tái)服務(wù)器的時(shí)候，如何合理的放置網(wǎng)頁(yè)的元件讓她們?cè)跒g覽器里顯示得更加快。這里，我就根據(jù)他的建議，把我對(duì) 這博客的更新的過(guò)程記錄一下。如果想了解更多的信息，可以看他的主頁(yè)，那里有不少他做的講座的視頻和講稿，還可以看到他在斯坦福開(kāi)的課的視頻……再進(jìn)一步就是去讀他的兩本書(shū)了《high performance web sites: essential knowledge for front-end engineers》《even faster web sites: performance best practices for web developers》。

優(yōu)化的過(guò)程，實(shí)際上就是根據(jù)yslow這個(gè)firebug的插件的提示“升級(jí)”的過(guò)程（yslow可用于不同大小的站點(diǎn)，我選擇了“small site or blog”這個(gè)選項(xiàng)）。為什么要優(yōu)化？功利的講，是讓你的頁(yè)面在搜索引擎里表現(xiàn)更好；但更重要的是，省下這1-2秒的時(shí)間，能讓你的讀者更加舒暢地瀏覽你的站點(diǎn)。

我做了一下的幾步：

[li]把所有的css文件放在一起；并避免使用@import的方式倒入css文件，因?yàn)檫@種方法強(qiáng)制瀏覽器在import的時(shí)候只能運(yùn)行一個(gè)線程，而一般情況是兩個(gè)線程一起上的。
對(duì)于我來(lái)說(shuō)，我新建了一個(gè)styleall.css文件，把所有在”screen”情況下使用的css全部復(fù)制粘貼進(jìn)去。使用yslow中的“all css” 的工具，很容易就收集到了所有的css的信息——三個(gè)插件、google和theme里用的。最終，從9個(gè)不同的css文件，我縮到了2個(gè)，一個(gè)給 ”screen”用，一個(gè)給”print”用。在修改了theme調(diào)用的css的方法后，我到每個(gè)插件的設(shè)置頁(yè)面，禁止調(diào)用相應(yīng)的css。如果插件不允許 修改的話，我就修改插件的源代碼，搜索“.css”，然后刪掉。[/li]
把所用的javascript合到一起，然后盡可能的放在頁(yè)面的末尾，因?yàn)閖s的下載強(qiáng)制性的是單線程，放在頁(yè)面的尾部，給讀者印象是頁(yè)面已經(jīng)完全下載好了，而實(shí)際上有些功能的js還在下載中。
對(duì)于我，因?yàn)樗械膉s都不沒(méi)有使用document.write，可以放心大膽的合并并放到頁(yè)面的尾部。我使用yslow中的“all js minified”工具，操作很快：所有插件使用的合并到一個(gè)min.js在插件的根目錄；所有主題使用的合并在theme的根目錄；我沒(méi)有合并來(lái)自google的javascript到前面的兩個(gè)匯總文件中，因?yàn)楦鶕?jù)我的理解，google會(huì)根據(jù)瀏覽器的不同把不同的js推送出來(lái)。

理論上我要把上面quene的部分改成直接連接到文件的模式，因?yàn)椤癲on’t use querystring – breaks proxy caching”；但這步涉及修改wordpress的核心代碼了，沒(méi)敢。合并js之后，記得到相應(yīng)的地方禁止原來(lái)的javascript的調(diào)用，然后把 調(diào)用合成js的代碼放在footer.php或類似的地方，比如我的

[li]使用sprites工具，合并背景圖片，使用css的方法調(diào)用。
對(duì)于我，直接跳過(guò)，因?yàn)檎军c(diǎn)沒(méi)用多少背景圖片；而且這步的修改很煩，“pain in the a#%!”。[/li]
[li]使用yslow中的“all smush.it”工具，壓縮圖片。
這里的操作很簡(jiǎn)單，直接下載在smush.it上生成的文件，下載替換即可。[/li]
在博客或者網(wǎng)頁(yè)服務(wù)器的根目錄下修改.htaccess文件，實(shí)現(xiàn)圖片的cache以及gzip傳送。
# add a far future expires header

expiresactive on
expiresdefault "access plus 10 years"
header set etag ""

# compress html, xml, css and js

addoutputfilterbytype deflate text/html text/plain text/xml text/css application/x-javascript
application/javascript

對(duì)于bluehost的服務(wù)器來(lái)說(shuō)，貌似deflate是不開(kāi)的，我就沒(méi)招了。

[li]預(yù)先下載大的背景文件。
我沒(méi)有做這一步，因?yàn)闆](méi)有大的背景文件。steve的本意是“big sprite.png blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用兩個(gè)線程下載的優(yōu)勢(shì)，在空擋把大文件先下載下來(lái)。[/li]

上面的操作，讓這個(gè)站點(diǎn)yslow評(píng)分從f升到了b，花費(fèi)時(shí)間2個(gè)小時(shí)；貌似顯示快了，你覺(jué)得呢？

原文：前端優(yōu)化，讓你的網(wǎng)頁(yè)在瀏覽器里顯示的更快