基于视觉的系统性能优化

        [文章作者：孙立 链接：http://www.cnblogs.com/sunli/ 更新时间：2010-10-27]    

起因  

      最近公司一个专题，结合了电视台的直播，在直播的时候流量猛增。这个专题的尾部页面带有自动刷新某系统的动态数据的功能 ，在直播当晚，给某系统带了非常大的带宽压力。但是根据页面的结构，用户基本都停留在首屏，也就是说用户根本就没有看自动刷新的数据。页面结构如下图：

       上图中：红色方框表示用户打开的首屏区域，在直播当晚，首屏很可能会有一个在线直播窗口。下边的绿色框表示可能会自动刷新的区域。

基于视觉的系统性能优化

      在浏览器中，我们能看到的页面限于显示器的高度和宽度。剩余的部分需要拉动滚动条才能显示。一般在未显示的区域，会有一些自动刷新的ajax等技术来实时刷新页面，比如投票数据，某个相关主题的用户提交的最新数据等。如果用户的显示器并没有浏览到自动刷新区域，我们可以停止自动刷新的请求，已达到节省请求的目的，这在互联网的大型专题，web2.0应用中非常普遍。我们把这种基于用户浏览器的显示的优化叫做“基于视觉的系统性能优化(performance optimization base on view)”

为什么要使用基于视觉的系统性能优化

      1.用户已经离开电脑（午餐，开会，等等），但是浏览器仍在打开了你的页面，但是并不在自动刷新的区域。比如微博的自动提示新微薄，关注等等。

      2.用户浏览器在某一屏，但是并未看自动刷新的区域。比如视频直播，视频，某些专题。

      3.某些页面的内容，并不在用户常看的那一屏，可以选择性考虑lazy load。

   基于以上的的情况，应该还有其他场景，使用基于视觉的系统性能优化，可以减少系统请求，避免不必要的资源浪费。

如何实现基于视觉的系统性能优化(performance optimization base on view)

      要实现基于视觉的系统性能优化，非常幸运的是，几乎所有的浏览器都可以通过javascript得到滚动条的属性和事件。通过滚动条的属性和页面的高度，某一个dom节点的位置，可以非常方便的实现一旦用户的浏览区域达到某个位置，就触发请求。像google reader的翻页，也是通过用户的浏览快达到一页的尾部时，自动触发下一页的请求。

总结

      用户的在线时间越来越长，普遍的电脑配置都很高和多标签浏览器让用户打开的页面越来越多，但是用户观看的只有一个页面，所以，结合页面的“分屏”特点和这些特点，可以在很大程度上做些优化，节约带宽也好，节约服务器资源也好，总之，在很多时候，也还是值得的。欢迎有兴趣的朋友，跟我在微博交流。