人妻夜夜爽天天爽三区丁香花-人妻夜夜爽天天爽三-人妻夜夜爽天天爽欧美色院-人妻夜夜爽天天爽免费视频-人妻夜夜爽天天爽-人妻夜夜爽天天

[p]昨天[url=http://stevesouders.com/][color=#006699]steve[/color][/url]的 講座涉及了一個(gè)我從沒(méi)考慮的領(lǐng)域，在沒(méi)法優(yōu)化后臺(tái)服務(wù)器的時(shí)候，如何合理的放置網(wǎng)頁(yè)的元件讓她們?cè)跒g覽器里顯示得更加快。這里，我就根據(jù)他的建議，把我對(duì) 這博客的更新的過(guò)程記錄一下。如果想了解更多的信息，可以看他的主頁(yè)，那里有不少他做的講座的視頻和講稿，還可以看到他在斯坦福開(kāi)的課的[url=http://myvideos.stanford.edu/player/openslplayer.aspx?coll=efd5fda7-321b-4023-93be-e636195d7589&p=true][color=#006699]視頻[/color][/url]……再進(jìn)一步就是去讀他的兩本書(shū)了《[url=http://amazon.com/dp/0596529309?tag=stevsoud-20&camp=14573&creative=327641&linkcode=as1&creativeasin=0596529309&adid=1s1kp4ev129en37422c0&][color=#006699]high performance web sites: essential knowledge for front-end engineers[/color][/url]》《[url=http://amazon.com/gp/product/0596522304?ie=utf8&tag=stevsoud-20&linkcode=as2&camp=1789&creative=9325&creativeasin=0596522304][color=#006699]even faster web sites: performance best practices for web developers[/color][/url]》。[/p]
[p]優(yōu)化的過(guò)程，實(shí)際上就是根據(jù)[url=http://developer.yahoo.com/yslow/][color=#006699]yslow[/color][/url]這個(gè)[url=http://getfirebug.com/][color=#006699]firebug[/color][/url]的插件的提示“升級(jí)”的過(guò)程（yslow可用于不同大小的站點(diǎn)，我選擇了“small site or blog”這個(gè)選項(xiàng)）。為什么要優(yōu)化？功利的講，是讓你的頁(yè)面在搜索引擎里表現(xiàn)更好；但更重要的是，省下這1-2秒的時(shí)間，能讓你的讀者更加舒暢地瀏覽你的站點(diǎn)。[/p]
[p]我做了一下的幾步：[/p]
[b]把所有的css文件放在一起；并避免使用@import的方式倒入css文件[/b]，因?yàn)檫@種方法強(qiáng)制瀏覽器在import的時(shí)候只能運(yùn)行一個(gè)線程，而一般情況是兩個(gè)線程一起上的。[br]對(duì)于我來(lái)說(shuō)，我新建了一個(gè)styleall.css文件，把所有在”screen”情況下使用的css全部復(fù)制粘貼進(jìn)去。使用yslow中的[b]“all css[/b]” 的工具，很容易就收集到了所有的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”，然后刪掉。
[b]把所用的javascript合到一起，然后盡可能的放在頁(yè)面的末尾[/b]，因?yàn)閖s的下載強(qiáng)制性的是單線程，放在頁(yè)面的尾部，給讀者印象是頁(yè)面已經(jīng)完全下載好了，而實(shí)際上有些功能的js還在下載中。[br]對(duì)于我，因?yàn)樗械膉s都不沒(méi)有使用document.write，可以放心大膽的合并并放到頁(yè)面的尾部。我使用yslow中的“[b]all js minified[/b]”工具，操作很快：所有插件使用的合并到一個(gè)min.js在插件的根目錄；所有主題使用的合并在theme的根目錄；我沒(méi)有合并來(lái)自google的javascript到前面的兩個(gè)匯總文件中，因?yàn)楦鶕?jù)我的理解，google會(huì)根據(jù)瀏覽器的不同把不同的js推送出來(lái)。
[p][/p]


[p]理論上我要把上面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或類(lèi)似的地方，比如我的[/p]


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

[p]對(duì)于bluehost的服務(wù)器來(lái)說(shuō)，貌似deflate是不開(kāi)的，我就沒(méi)招了。[/p]
[li][b]預(yù)先下載大的背景文件[/b]。[br]我沒(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]
[p]上面的操作，讓這個(gè)站點(diǎn)yslow評(píng)分從f升到了b，花費(fèi)時(shí)間2個(gè)小時(shí)；貌似顯示快了，你覺(jué)得呢？[/p]