基于视觉的系统性能优化

        [文章作者:孙立 链接: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的翻页,也是通过用户的浏览快达到一页的尾部时,自动触发下一页的请求。

总结

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

posted @ 2010-10-27 11:13 草屋主人 阅读(...) 评论(...) 编辑 收藏