[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]