hotmail前端优化

前两天(2011-7-1)，有一篇hotmail前端优化的文章，使用户响应比以前快10倍，自己简单小结一下。原文地址：这里 。不过，只能说hotmail以前优化做得太少了，这些gmail老早就做了。（遗憾的是国内用户最近访问hotmail也不太顺畅）

现代浏览器越来越强大，可以把更多的工作从server端交给浏览器去做。更一般地说，C/S模型中，如果C越强大，就可以考虑把更多S的工作放到C中去完成。

缓存、预加载、异步操作。

优化的关键是找到平衡点。

缓存：

已加载的数据缓存住，不要每次都重新加载。

即使今天的美国，网络依然是瓶颈。所以数据离浏览器越近就越快。

如果数据不在浏览器，应该使用更加有效的方式获取。

浏览器中可以直接用DOM对象缓存，需要的时候直接切换过去。

缓存的平衡：

缓存何时需要更新，比如有新邮件时？server通知浏览器，然后浏览器获取数据。也就是，服务器推送通知。

退出hotmail时清掉缓存，保证隐私安全。当然，如果没有安全方面的问题，可以考虑缓存更长时间。

预加载：

如果内容已经有了，响应自然就是即时的。

预加载的数据类型：可以是数据，也可以是代码。

什么时候预加载什么？

原则上说应该预加载最有效的、命中率高的内容。而这要基于用户的行为特征，也就是通过用户（各阶段的）行为分析来决定。

比如：

• 用户一上来一般会查看列表中新邮件标题，然后会选择查看他们，利用用户这个停顿的时机来预加载新邮件的内容。
• 用户看这封邮件的内容很可能也会看挨着的下一封或上一封邮件的内容，所以可以预加载下一封邮件内容。
• 用户看这封邮件的时候，下一步的行为可能是删除或回复，所以可以预加载好删除和回复的代码和数据（发送时需要有地址簿的数据）。

时机的技巧：利用人在操作的间歇预加载。人不是机器，人的行为是由一系列的动作组成，中间会有或长或短的间歇时间，就算对人而言是很短的间歇，对机器而言也是很长的间隔时间了。

为了效果更好，设计上也应该需要调整。

加载技巧：可以将下载的内容分成小块，并按一定的优先顺序下载，用户最需要的应该尽快可用。而不是一次加载太多的数据，那样可能造成不能及时响应。

考虑到巨大的用户量，前端应要防止server过载，保持服务有效 。另外，后台还要努力提升存储系统的吞吐率。

我顺便补充一下懒加载：

预加载和懒加载是两个相反的行为，但都是性能优化的手段，改善用户体验，具体看怎么用了。

预加载那些用户下一步马上需要的，如初次加载就包含，或在初次加载之后，利用用户的下一步行为的间歇时间提前加载。

而懒加载是先不加载那些用户不会马上用到的，或不常用到的部分，这样减少了加载内容。

异步操作：

没啥说的，界面立刻响应，任务在后台执行，而不是等待。

最后，性能是特性，优化无止境。