欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p]昨天[url=http://stevesouders.com/]steve[/url]的 講座涉及了一個我從沒考慮的領域，在沒法優化后臺服務器的時候，如何合理的放置網頁的元件讓她們在瀏覽器里顯示得更加快。這里，我就根據他的建議，把我對 這博客的更新的過程記錄一下。如果想了解更多的信息，可以看他的主頁，那里有不少他做的講座的視頻和講稿，還可以看到他在斯坦福開的課的[url=http://myvideos.stanford.edu/player/openslplayer.aspx?coll=efd5fda7-321b-4023-93be-e636195d7589&p=true]視頻[/url]……再進一步就是去讀他的兩本書了《[url=http://amazon.com/dp/0596529309?tag=stevsoud-20&camp=14573&creative=327641&linkcode=as1&creativeasin=0596529309&adid=1s1kp4ev129en37422c0&]high performance web sites: essential knowledge for front-end engineers[/url]》《[url=http://amazon.com/gp/product/0596522304?ie=utf8&tag=stevsoud-20&linkcode=as2&camp=1789&creative=9325&creativeasin=0596522304]even faster web sites: performance best practices for web developers[/url]》。[/p]
[p]優化的過程，實際上就是根據[url=http://developer.yahoo.com/yslow/]yslow[/url]這個[url=http://getfirebug.com/]firebug[/url]的插件的提示“升級”的過程（yslow可用于不同大小的站點，我選擇了“small site or blog”這個選項）。為什么要優化？功利的講，是讓你的頁面在搜索引擎里表現更好；但更重要的是，省下這1-2秒的時間，能讓你的讀者更加舒暢地瀏覽你的站點。[/p]
[p]我做了一下的幾步：[/p]
[li][b]把所有的css文件放在一起；并避免使用@import的方式倒入css文件[/b]，因為這種方法強制瀏覽器在import的時候只能運行一個線程，而一般情況是兩個線程一起上的。[br]對于我來說，我新建了一個styleall.css文件，把所有在”screen”情況下使用的css全部復制粘貼進去。使用yslow中的[b]“all css[/b]” 的工具，很容易就收集到了所有的css的信息——三個插件、google和theme里用的。最終，從9個不同的css文件，我縮到了2個，一個給 ”screen”用，一個給”print”用。在修改了theme調用的css的方法后，我到每個插件的設置頁面，禁止調用相應的css。如果插件不允許 修改的話，我就修改插件的源代碼，搜索“.css”，然后刪掉。[/li]
[b]把所用的javascript合到一起，然后盡可能的放在頁面的末尾[/b]，因為js的下載強制性的是單線程，放在頁面的尾部，給讀者印象是頁面已經完全下載好了，而實際上有些功能的js還在下載中。[br]對于我，因為所有的js都不沒有使用document.write，可以放心大膽的合并并放到頁面的尾部。我使用yslow中的“[b]all js minified[/b]”工具，操作很快：所有插件使用的合并到一個min.js在插件的根目錄；所有主題使用的合并在theme的根目錄；我沒有合并來自google的javascript到前面的兩個匯總文件中，因為根據我的理解，google會根據瀏覽器的不同把不同的js推送出來。
[p][/p]


[p]理論上我要把上面quene的部分改成直接連接到文件的模式，因為“don’t use querystring – breaks proxy caching”；但這步涉及修改wordpress的核心代碼了，沒敢。合并js之后，記得到相應的地方禁止原來的javascript的調用，然后把 調用合成js的代碼放在footer.php或類似的地方，比如我的[/p]


[li][b]使用[url=http://spritegen.website-performance.org/]sprites[/url]工具，合并背景圖片，使用css的方法調用[/b]。[br]對于我，直接跳過，因為站點沒用多少背景圖片；而且這步的修改很煩，“pain in the a#%!”。[/li]
[li][b]使用yslow中的“[i]all smush.it[/i]”工具，壓縮圖片[/b]。[br]這里的操作很簡單，直接下載在[url=http://smush.it/]smush.it[/url]上生成的文件，下載替換即可。[/li]
[b]在博客或者網頁服務器的根目錄下修改[b].htaccess[/b]文件，實現圖片的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]對于bluehost的服務器來說，貌似deflate是不開的，我就沒招了。[/p]
[li][b]預先下載大的背景文件[/b]。[br]我沒有做這一步，因為沒有大的背景文件。steve的本意是“big sprite.png blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用兩個線程下載的優勢，在空擋把大文件先下載下來。[/li]
[p]上面的操作，讓這個站點yslow評分從f升到了b，花費時間2個小時；貌似顯示快了，你覺得呢？[/p]
[p]原文：[url=http://en.dogeno.us/2009/05/frontend-modification-even-faster-web-display-browser-in-chinese/]前端優化，讓你的網頁在瀏覽器里顯示的更快[/url][/p]