博客园首页优化心得

　　周末，我们对博客园首页进行了优化，将其中的一些心得与大家分享。

　　背景图片的优化

　　博客园首页主导航的背景图片之前存在这样的问题：在IE和Chrome中第一次打开页面时，背景图片加载延迟比较明显，如果刷新页面，背景图片所在位置会闪一下，即使图片是304状态（在FireFox中未出现这样问题，可能是FireFox加载背景图片的机制不同）。由于导航文字用的是淡灰色(#EEEEEE)，在没有背景图片的白色背景色下看起来很不舒服。

　　开始我们使用两种优化方法，并没有产生效果。

　　1. 背景图片的预加载

< script type = " text/javascript " >
jQuery.preloadImages = function () {
for ( var i = 0 ; i < arguments.length; i ++ ) {
jQuery( " <img> " ).attr( " src " , arguments[i]);
}
}
var staticImgUrl = " http://static.cnblogs.com/images/ " ;
$.preloadImages(staticImgUrl + " bg_menu_nav.png " );
< / script>

　　参考文章：了解jQuery技巧来提高你的代码

　　2. 背景图片的压缩

　　所用工具：Pngcrush

　　操作命令：pngcrush -reduce -brute bg_menu_nav.png bg_menu_nav2.png

　　参考文章：Best Practices for Speeding Up Your Web Site

　　接着，我们就想不用背景图，但用CSS不能实现背景图中的渐变色（filter只支持IE)，于是试着用多个1px高的div拼渐变色效果，也没成功。

　　后来，我们用了一个欺骗式的方法缓解了这个问题，给导航栏加一个与背景图片最接近的背景色，这样从无背景图片到有背景图片的加载过程中，颜色上的变化不会很大，从我们的体验，感觉还是可以接受的。

　　HTML代码中的空格、空行处理

　　使用下面的ASP.NET代码对页面输出进行清理

private static readonly Regex REGEX_LINE_BREAKS = new Regex( @" \n\s* " , RegexOptions.Compiled);
private static readonly Regex REGEX_LINE_SPACE = new Regex( @" \n\s*\r " , RegexOptions.Compiled);
private static readonly Regex REGEX_SPACE = new Regex( @" ( )+ " , RegexOptions.Compiled);

protected override void Render(HtmlTextWriter writer)
{
using (HtmlTextWriter htmlwriter = new HtmlTextWriter( new System.IO.StringWriter()))
{
base .Render(htmlwriter);
string html = htmlwriter.InnerWriter.ToString();
html = REGEX_LINE_BREAKS.Replace(html, string .Empty);
html = REGEX_LINE_SPACE.Replace(html, string .Empty);
html = REGEX_SPACE.Replace(html, " " );
writer.Write(html.Trim());
}
}

　　更进一步的需要清理回车换行符。

　　js文件压缩

　　工具：JSMin

　　命令：jsmin <site.src.js >site.js

　　CSS命名缩短

　　抱着省一个字节是一个字节的原则，将CSS的class命名缩短。

　　部分内容采用脚本加载

　　比如网站二级分类，改为jQuery调用WebService加载，不仅减小了页面大小，而且减小了服务器端显示首页时的处理负担。

　　小结

　　这次的首页优化，从我们的使用体验上看效果是比较明显的，当然首页的优化还有很大的空间，我们会继续优化。

　　如果您对博客园首页优化有什么建议，期待您的分享！

转载于:https://www.cnblogs.com/cmt/archive/2009/12/07/1618301.html