博客园首页优化心得

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

  背景图片的优化

  博客园首页主导航的背景图片之前存在这样的问题:在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加载,不仅减小了页面大小,而且减小了服务器端显示首页时的处理负担。

  小结

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

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

posted @   博客园团队  阅读(7246)  评论(58编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· autohue.js:让你的图片和背景融为一体,绝了!
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
点击右上角即可分享
微信分享提示