oneoo's 私家花园

知不觉Yo2已经为大家服务了两年时间。刚起步的时候网站出现了很多问题，稳定性也欠佳。但我们有很多网友的支持，慢慢的走到今天。非常感谢大家

　　回顾2008，我们做了很多事情。

1月博客系统从 2.05升级到 2.3.3 版本

3月 Yo2 审核过滤系统开发完成

5月 Yo2 CDN 系统开发完成

6月 Yo2 CDN 系统成功上线运营

　　今年的重点项目是 CDN 系统的建设，能更好的缓解因拔线而造成无法访问的影响，并且博客访问速度得到很大的提高。

　　目前 Yo2  正在使用的 WordPress 版本还是 2.3.3，虽然有点老，但我们认为这个版本是非常稳定的，经过我们1年时间的不断优化与修正，博客数据的处理效率非常高，博客系统的BUG也很少。

　　而新版的 WordPress 在数据库上与 2.3.3 相差很少，但功能并没有增加多少，主要是后台的操作界面加强与美化，所以我们还未有升级到新版的想法。为了保证稳定的服务，希望广大用户可以体谅。当然我们也在密切关注新版 WordPress 的发展，会认真考虑在一个适当的时间升级到新版程序。

 　　希望大家能一如既往的支持 Yo2，一起走过更长的道路  谢谢！

嘿，很有标题党的意识。大家见笑了～笑笑罢了

　　刚在 Yo2Mass 看到《从豆瓣宕机看IDC单点问题》 一文，自己是深有感触的。刚好今天我们电信的服务器也出了故障，断网4个多小时。从Yo2开张到现在，我们都不知道换多少个IDC。就是没能找到一个很稳定的（当然太贵的我们是租不起）。

　　豆瓣所在的机房是北京实力比较厚的IDC之一，我们也有台服务器在他们的天津机房。一直用着，感觉还可以。虽然偶尔会出现某些地区访问速度慢的问题，但因它在教育网的访问速度挺好的，所以一直在用。万没想到，我一直说算稳定的IDC也会出现如此长时间的断网故障《2008.10.31 豆瓣访问故障》。刚查了下豆瓣的服务器信息，发现他们已经把服务器出口切换到其他机房。他们的数据估计都在原来的机房，新的出口应该是直接 Proxy 代理，访问速度并不理想。

　　做网站的技术都知道什么是单点故障和它所造成的影响。传统的解决方案是使用LVS把访问请求分发到多个服务器，如果某台服务器故障，它可自动分发到另外的服务器，能很好的解决单点故障问题。但你再看远一点，在前端的LVS不是一个非常大的单点吗？万一它出现故障，那么它后面的N台服务器都无用武之地！大家都在努力解决单点故障的问题，却未意识到自己在制造一个更大的单点故障风险。

　　Yo2也有单点故障的情况发生，但它的影响不至于扩散到全局，因为我们使用了CDN技术。我们目前在几个网络、分几个机房，架设了访问加速节点。CDN利用域名智能解析技术把用户的访问指向到不同的服务器，部分用户间是相对独立的，如网通用户与电信用户，甚至可以精确到某个省份和地区。比如今天电信服务器出现故障，就不会影响到网通和教育网用户的访问，并且我们及时在CDN上把电信的访问切换到其他的机房，能快速恢复服务（当然域名解析耗时比较长，大概1个小时左右）

　　但CDN也不是灵丹妙药，不是什么网站应用都能使用CDN。比如一些动态页面就无法使用CDN系统的缓存功能，只能直接Proxy。如果网站应用是以动态内容为主，那么建立CDN系统也就等于把成本扩大1倍。因为它只能直接Proxy到后台服务器，CDN跑多高的带宽，后台的服务器都会跑这么高；后台服务器需要处理的数据量跟没使用CDN是一样的，并不会减少。除非把内容缓存在CDN的加速节点上，这样不仅能节约服务器的成本，并且访问速度会快很多。但目前商业运营的服务商，还未能提供这个完美的解决方案。

　　Yo2是在成长过程中就意识到单点故障问题的严重性，我们必须把影响降低到最低。因没找到能提供解决方案的服务商和需要考虑运营成本，所以我们选择了自主根据Yo2作针对性的开发。目前我们是拥有一个算完美的解决方案。当然目前的加速节点还很少，单点故障的影响还是比较大。只是从以前的影响100%降低到40%左右，随着Yo2的成长，我们会继续增加更多的访问节点，单点故障的影响将会降到更低

日好几个网站（博邻、99音乐网、博客网）倒下了，难道真如马云说的“互联网的冬天来了”？这几个网站都有一个共同点：有VC资金的支撑。平时花惯VC的钱，“洗脚唔抹脚”（该歇后语是形容人花钱没节制），当然我说的不一定正确哦，也可能是其他原因导致 。

　　其他行家看在眼里，自然有自己的想法，并做自我检讨。压缩成本是过冬的必然措施。刚跟一个网站的服务器管理员聊了下，问题确确实实的摆在你面前。他虽然是管服务器的，但公司的办公电脑也得兼顾维护，甚至连服务器都得自己组装。这些都是为了精简人手，节约成本。

　　想想我们Yo2，一直都是自费运营的，本来可用资金就很少。穷孩子早当家嘛 一开始就从技术上把服务器成本压缩到很低，并且Yo2就只有两个免费劳工，开发、设计、维护、日常管理全都自己干。整个网站的运营成本就只有服务器这块了，so～目前Yo2的运营状况是良好的。

　　我们虽然没有VC的盈利压力，但同样需要打开更多盈利渠道，我跟charles也希望能收到点工资哦。这个冬天我们觉得不算冷

　　目前Yo2可发展的盈利渠道有技术输出（CDN）和广告服务两个方面。我是比较看好CDN技术的输出，因这个技术可以给网站省钱 并且能提高性能。本来需要 10 台服务器才能支撑的网站，应用了Yo2的CDN技术后可节约部分服务器支出。只要节约出来的服务器支出多于要支付给Yo2的技术输出费用，那么就帮你把钱省下来了。

图片

附件(1):

上一篇文章我已经大概介绍过 FireFox 浏览器的 FireBug 扩展，它不仅仅能够帮助我们分析页面的加载过程，更重要的功能是帮助网页设计人员开发网页。

　　因涉及的知识面很广，所以我只在这里跟大家说说，如何利用它来美化自己的博客模板

 

　　左图：是FireBug扩展查看页面HTML元素的截图，左侧为HTML代码，而右侧则是当前HTML标记的css属性。

　　右图： 点击扩展界面左上角的查看按钮，我们的鼠标在浏览器上指向某一区块，那么左侧的HTML标记可自动定位到当前标记上。找到自己需要的区块，按下回车键（防止点击页面上的链接）右侧的css属性可切换到当前标记下。通过该功能我们可以快速找出自己想修改的HTML标记和css，方便修改。

　　左图：在HTML标记的css属性上，我们还可以点击相关的文字进行修改。比如我刚从是定位到博客标题的文字上，css属性列表中的 #header a {..,} 就是文字的属性了，其中已带color颜色属性为#000000黑色。点击颜色值将出现编辑框，我们可以在这里即时修改css属性并预览效果。

　　右图：我们已经准确找到准确HTML标记的css属性，我们就可以参考css熟悉列表上的元素名称，对自己的模板css进行修改。

　　左图：切换到布局选项卡，我们还可以直观的看到当前HTML元素的大小和定位信息。

　　右图：Yo2的博客可以进入管理后台-》私有模板-》编辑私有模板，修改模板的css文件。一般把自己需要修改的css写在文件的尾部。（如果你正在使用系统模板，请先私有化）

　　以上是很简单的使用说明，至于如何写出自己需要的css效果请参考《CSS2 参考手册》 ，通过css可以不仅于修改文字的大小、颜色，还可以修改背景、定位、特效等等，你所能看到的一切 BTW:我无法提供HTML或CSS的教学指导，因日常工作量也蛮大的，还请体谅。我鼓励大家一起学习，互相帮助！

F

irebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。～～引用: 初识Firebug 全文

安装好FireBug扩展后，在 FireFox 中打开FireBug的界面，扩展就可以捕获当前窗口(标签)的网页加载过程。如我按Ctrl+F5强制刷新访问博客首页 http://oneoo.com

 

　　从左图最下方，我们可以看到整个页面加载浏览器发起了94个请求，总下载数据是146Kb，整个加载过程耗时5.24秒。而在右图，点击请求列表以展开显示该请求的详细信息，当中包括了服务器传回浏览器的Header信息，和浏览器向服务器发出请求的Header信息。这些Header信息对于普通用户来说，没什么特别意义，我就不在这里给大家阐述了。我们只需要找出影响页面加载速度的地方就足够了

 

 　　从左图我们可以在请求列表上，很直观的就可以判断出哪些请求是比较慢的。查出原因就可以对症下药，想办法加快它的加载速度（通常是由我来想的）或删除之。而右图则是浏览器刷新访问时产生的请求列表，当中可发现很多请求只是304 Not Modify返回（即无需重新下载，使用浏览器缓存）结合下面的右图（普通点击访问）所产生的请求列表，来做一个综合性的分析，看看哪些请求在下载时的速度慢，和哪些请求是可以被浏览器缓存下来的（这个最重要）务求把普通点击访问所需要发起的请求数量降到最低（Yo2的博客最低可以只发起2个请求）我的博客已经做过认真的分析和优化，去除了第三方网站的访问统计，第三方网站的图片调用等等，与博客没什么必要关联的东西，可以说是最佳状态了。当然关闭yo2sns插件的访问统计功能，速度还能更快一些。

　　但做事不一定要极端的，能把页面的加载耗时控制到10秒以下，基本ok

　　左图是我使用另一个扩展 Yslow分析得出的数据，左边的饼图是浏览器在没有任何缓存数据的情况下，将需要下载的页面元素，右边的饼图则是在浏览器有缓存数据的访问所需下载元素。 Yslow还可以给页面下载速度打分，要获取高分就得有很高深的优化能力了 _-!!不是一般人可以做得来，我的博客评分也只是60左右，勉强及格。

　　我的博客页面上的元素非常多，达到 94个，能够获得5秒左右的加载速度，成绩算理想的。我个人评分是90分 看过其他BSP提供的博客服务，个别经过精心优化（很少图片）的页面加载需要发起30多个请求，耗时在3～5秒左右。而部分华丽的BSP甚至一个页面就需要发起100多个请求，加载耗时超过10秒 _-!!什么音乐播放器、动态相册、广告等等的附加元素都挂到博客上，不慢才怪 _-!!

　　博客是以内容为主打，千万别忘记这个宗旨。太多花哨的玩意不会增加流量。

Fiddler 是一个http调试代理，它能够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddler 所有的“进出”的数据（指cookie,html,js,css等文件）

引用自：HTTP调试工具：Fiddler介绍一（翻译）

 　　Fiddler2 下载地址：http://www.fiddler2.com/fiddler2/version.asp

　　安装好 Fiddler 并开启该软件，然后 Ie 浏览器的所有访问请求都将被 Fiddler 截获，我们会根据截获的内容进行分析 以下为全新访问(浏览器没有任何缓存数据) http://oneoo.com 所获得的截图：

　　软件界面上的左栏为打开该页面所产生的全部访问请求，其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据，包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。

　　全选左栏的请求记录，并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间：

 　　选择第一个请求和最后一个请求，可获得整个页面加载所消耗的总体时间（右图）。从左图的条形图表中还可以分别出哪些请求耗时最多，从而对页面的访问进行访问速度优化（如果是第三方网站的服务调用，可以考虑去除）。而状态栏上可查看到整个页面所需要发送的请求总数。

　　分析得出，我的博客首页总共有 84 个请求，其中两个比较大的图片耗时最多，全新的访客打开页面需要 9 秒时间。

　　现在我们点Edit菜单Remove -> All sessions 清空记录，开始分析普通访客的加载过程

 

 　　左图为用户点击链接访问，因刚才的访问已经让浏览器把大量的数据缓存下来，所以需要发送的请求数量很少，才5个，总耗时1秒。而右图为用户点击刷新按钮访问页面，因为是刷新访问，浏览器不会使用缓存数据，但会发送请求询问页面服务器浏览器上的缓存数据是否过期，所以会发送 84个请求。因为这些请求比较特殊，如果浏览器上的缓存数据跟页面服务器上的内容一致，那么服务器会返回 304 状态，而不需要重新下载内容的，所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。

　　综合以上的全新访问、带缓存点击访问和带缓存刷新访问，三种形式测试得出的数据，可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。

　　如果你觉得自己的博客打开速度慢，也可以试试用 Fiddler 来测试一下，看看到底是慢在哪个地方，做出优化 通常国外的统计代码都比较拖时间的～

　　Ok～ 下期将会推出 FireFox + FireBug 和 httpfox 扩展来分析网页加载过程的教程。(FeedSky 验证 ece410df)

过几天的反复调整，已达到比较好的配色方案。部分细节也得到修正，现在就正式共享给大家使用 Yo2 系统已安装好，在推荐、精美、双栏、三栏、简朴分类中可以找到(不如说全部分类都能显示 )

　　one-simpleMagazine 是一个模仿 wordpress 杂志类模板的布局设计而成，虽然感觉模板有些设计元素，但它却非常简朴。整个模板只有一个 30k大小的背景图片。博客首页采用杂志类型的展现方式，首个文章全文输出，而其他文章则以 300字以内的摘要输出，摘要中可自动缩略显示文章内部的图片(有杂志味)其他分页则全部以摘要显示。博客首页支持双侧栏，一左一右。右侧栏为主侧栏，可摆放常用的区块，而左侧栏则以文章分类、存档的博客导航为主。整个模板基于单层 div 进行渲染，可以加快页面的显示速度(如使用多层 div 嵌套，浏览器则需要下载完整的 html 内容后才能显示) 。

　　如需修改左侧栏的宽度，请修改css的#contents-main和#leftbar，当中两个数值加起来应该等于 600px 。而右侧栏则不建议修改宽度，涉及的改动会多一些。背景图片请通过修改 css 进行更换。

　　下载 ne-simpleMagazine 模板

　　*UPDATE: 右侧栏HTML代码放置到页面最下方、侧栏区块加入 overflow:hidden 属性(防止侧栏内容撑破模板)

　　*UPDATE: WordPress 官方下载地址：http://wordpress.org/extend/themes/one-simplemagazine ，支持 Gavatar 头像

晚想到自己的博客侧栏内容越来越多，基于 K2 模板精简出来的单栏模式，显然无法满足需求。开始琢磨自己做个仿杂志类型的模板

　　配色比较鲜，部分细节还需要慢慢调整。毕竟这只是我今天下午基于 wordpress 默认模板的基础上制作出来的，有待慢慢打磨 正式作品将会公开下载使用。这也将是我第一个公开发行的 wordpress 模板 请多多支持，提出宝贵意见。

奈于目前 Chrome 的功能实在太简单，充其量只是个骨架，完全未能代替 FireFox 甚至 Ie。我也只是尝尝鲜，光看它的界面是比较吸引我的。我想像我一样的人多的是 Chrome 目前可能是最快被装上，但也是最快被弃用的一个浏览器了。但它给我们带来了全新的浏览器使用体验，非常精简的界面。相信日后会有很多追随者模仿。

　　刚在网上闲逛与 Chrome 浏览器相关的文章，顺手点开 FireFox 的 addons，查看最新的扩展列表信息。意外的发现了 Chromifox 主题，马上装来试了下，虽然 Tabbar 无法像 Chrome 一样放置在窗口标题上(FireFox 如不进行源码级的修改，单单依靠修改主题是无法模拟出来滴)，但也能达到 80% 了。很八错，强烈推荐之～～～上图

哦，截图上的 Yo2 首页是内部开发版本，并不能公开访问，也不代表新版一定会是这个样子滴。

　　还有个扩展 Chrome Package 是可以把 Tabbar 放到工具栏上方的，目前还只是测试版，有些网友提到无法完美卸载和与 Tab 增强扩展有兼容性的问题，所以暂时不作尝试了。建议你在尝试之前备份好 FireFox 的设置先。～