用户体验--速度

原文地址：http://www.aliued.cn/?p=1646&cpage=1#comment-2118

 

本人喜欢看F1，迷恋那种风驰电掣的感觉，今日恰逢Webplayer项目一期的发布，看邮件似乎大家对新的hover展示效果反响还不错，呵呵。这里只是结合这个东西谈一下对于”提高页面加载速度”上的看法。

如 果从前端技术来看这次一期的项目，最大的改变或许就应该是ajax实现无刷新提取offer的这个操作了。做这个ajax通信的时候，首先想到了一点，那 就是”请求–响应“的这个过程中offer应该以什么样的效果来展现？什么都不管让用户有一个等待的过程？或是像大多数ajax的做法一样加载一张 loading……的图片（实施上绝大多数的ajax操作都 是这样的，在网上你可以找出一大堆的loading效果图）。实现的原理图如下：

但是我相信大多数有着很强目的性的阿里巴巴用户都不会喜欢频繁地在detail页面上看到这 loading……图片，虽然按普通的网速它可能出现不到1秒钟的时间。于是我对这个加载过程做了一定的处理。

在原先的页面上预先加载了三组图片。这里姑且称为A,B,C，而当前展示的是B组。A和C组是隐藏的，不可见。如同所示：

当点击”下一组“按钮的时候，把B组的内容加载到A中，把C组的内容加载到B中，同时利用ajax请求从后台调取新的输入填入C组中。相信用户在正 常情况下点击”下一组“按钮都会有一定的时间去浏览新展示出来的内容，而页面正是在这段事件把数据从后台请求过来。点击”上一组“情况与此类似。这个可以 在很大程度上减少乃至避免点”下一组“按钮后的等待过程。

当然这个做法同时也会带来另一个问题，就是在第一次加载页面的时候会多加载2组 （A和C）offer的内容。如果用户不产生点击”上一组“或是”下一组“的行为，那么这2组的内容就是完全多余的。对于这点，我采用了一个相对来说比较 折中的办法。把A和C的内容全部放到页面最后去加载。避免页面加载到offer展现这一块是的拥塞。对于用户来说几乎感觉不到着两个隐藏容器的加载时间。 当然，现在也可以利用我在FDev（目前正在开发的一个轻量级javascript框架）中刚完成的domReady 的方法在Dom树加载完毕后去添加进 来。 （切忌不要用window.onload的，它必须等待所有的图片加载完毕 后才触发，好慢！！）

当然这个做法会带来另外一个问题，就是B组加载完毕而A和C组还没加载的时候用户点击”上一组“和”下一组“怎么处理，不做处理的话 肯定是会报错的，怎么办？禁用？个人认为禁用也是一个不错的方案，理由有二个方面：第一，从用户的行为上看，点开一张offer总需要有一定的浏览时间再 去切换上一组或是下一组吧，毕竟只有极少数的有效用户会去疯点”上一组“和”下一组的按钮“；第二，从detail的结构上看，在加载可切换的offer 后几乎是马上到了页面最下面，这之间所需的时间并不长，以公司的网上甚至根本感觉不出来。但是更负责地看，我们也不排除有些网速极慢的用户的等待情况。于 是我做了一个简单的处理，在点击”上一组“和”下一组“的按钮后如果发现所需的A组和C组还不存在，则延时0.2秒后继续请求，最多产生2秒（10次）的 请求，如果点击后2秒后A和C还没有加载完毕，则本次请求无效。当然为什么是2秒，我没有数据，没有参考，大抵可以说是拍脑袋想出来的，因为点击后2秒还 没反应我觉得总是有问题的啦 ，呵呵，希望有高手看看这个这个时间是否合理。

发完这篇文章后，估计很多人都会觉得对于这屁大的问题写篇文章或是有小题大作之嫌，要知道在F1里任何的细节都有可能导致完全不同的结果！。在这里再举几个互联网上对更细节的东西看起来更加变态的方法：

1、Google的预加载：

这是张什么图片？google的首页，下面是用firebug查看的他加载的内容。注意显示出来的这张图片。我们发现Google的首页根本没有用 到这张图片，这是list页面所需要用到的图片。明白了吧。一般人上Google绝不是欣赏下Google首页长什么样子，他必定会进入搜索环节。对于 Google，他的list页面肯定比首页大得多，于是在首页的时候就把list所需用到的图片给预先加载了，并作缓存，到list页面后就不需要从网上 重新下载了！尽管这张图片也只有7k。

2、yahoo的按需加载：

以前写过一篇文章[suggest项目总结-用户体验篇 ] 曾经谈到yahoo的的suggest功能，只是当时并不知道yahoo的所做的精心处理。他处理suggest功能的js以及现实效果的css只有在用 户点击了输入框之后才会去加载，（因为只输一个字母就去搜索的用户毕竟是少数，而且这时候的sugguest也很难匹配）如果用户在首页不产生搜索行为， 他的这段suggest功能的js和css也就多余了，不会去做加载。而他们的大小分是2k和13K。与此同时，下一个将出现的页面（list）上的图片 也开始提前加载进来了。

3、yahoo的分块加载：

还是yahoo，在右上角的那个切换的tip（我们中文站也有）。当你在页面的DOM结构还没有加载完毕的时候去触发你会发现鼠标移动上去是没有切 换效果的。yahoo认为首先要把网站上最重要的内容加载出来。于是，这段切换的效果也是在Dom数加载完毕后才动态添加进来的。这样可以尽可能地加快页 面显示速度

……

最后再和大家分享两个数据：

Google: 慢500ms = 20%将放弃访问；

Amazon：慢100ms = 1% 将放弃交易；

完