博客园首页优化心得
2009-12-07 09:04
267 查看
周末,我们对博客园首页进行了优化,将其中的一些心得与大家分享。
背景图片的优化
博客园首页主导航的背景图片之前存在这样的问题:在IE和Chrome中第一次打开页面时,背景图片加载延迟比较明显,如果刷新页面,背景图片所在位置会闪一下,即使图片是304状态(在FireFox中未出现这样问题,可能是FireFox加载背景图片的机制不同)。由于导航文字用的是淡灰色(#EEEEEE),在没有背景图片的白色背景色下看起来很不舒服。
开始我们使用两种优化方法,并没有产生效果。
1. 背景图片的预加载
参考文章:了解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代码对页面输出进行清理
更进一步的需要清理回车换行符。
js文件压缩
工具:JSMin
命令:jsmin <site.src.js >site.js
CSS命名缩短
抱着省一个字节是一个字节的原则,将CSS的class命名缩短。
部分内容采用脚本加载
比如网站二级分类,改为jQuery调用WebService加载,不仅减小了页面大小,而且减小了服务器端显示首页时的处理负担。
小结
这次的首页优化,从我们的使用体验上看效果是比较明显的,当然首页的优化还有很大的空间,我们会继续优化。
如果您对博客园首页优化有什么建议,期待您的分享!
背景图片的优化
博客园首页主导航的背景图片之前存在这样的问题:在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加载,不仅减小了页面大小,而且减小了服务器端显示首页时的处理负担。
小结
这次的首页优化,从我们的使用体验上看效果是比较明显的,当然首页的优化还有很大的空间,我们会继续优化。
如果您对博客园首页优化有什么建议,期待您的分享!
相关文章推荐
- 博客园首页优化心得(转)
- SQL数据批量提交的优化和心得
- Android过度绘制优化心得
- 记录平常工作笔记(一篇不上博客园首页的博客)(连载)
- 关于BaseAdapter的使用及优化心得(一)
- MVP实战心得(四)---封装优化,拆分Toolbar与ContentView
- SQL Server 死锁处理和优化心得
- 优化网站提高搜索:首页html代码的<head>和</head>之间的内容
- 淘宝首页性能优化实践
- cs231n 编程作业(2)学习心得——多种优化方法
- 自定义类似微博首页界面(图文混排,优化流畅性,高度封装)
- 老赵看博客园首页
- 前天进行了一次程序优化的过程和心得
- iOS微信小视频优化心得
- asp.net利用存储过程和div+css实现分页(类似于博客园首页分页)
- Hibernate学习心得--性能优化
- 内页优化和flash首页优化的问题
- AngularJS性能优化心得,自己踩过的抗,及一些别人的经验(转哦)
- 进入博客园首页 怎么出现这种错误?不知其他人有没有???
- javascript引起博客园首页不能显示问题说明