|
此文章由 典 原创或转贴,不代表本站立场和观点,版权归 oursteps.com.au 和作者 典 所有!转贴必须注明作者、出处和本声明,并保持内容完整
我这里以登陆页面http://www.12306.cn/mormhweb/kyfw/为例,列举存在的一些影响效率的问题。
我使用的是windows7/ IE9 /
Fiddler. 机器是新机器。
可以看到, 下载过程大约 7 秒 ,总加载时间大约13秒。 这个页面向服务器提交了53个请求。
问题1:向服务器发送的请求次数太多, 这样的一个简单的页面有53个请求,是不科学的。淘宝登录页面有32个请求,QQ登录页面有21个请求。Ebay18个。尽量少的请求次数是高效网页设计的第一定律。
问题2: iframeblocking. 这个登录页面使用了iframe,iframe里又嵌套了一个子iframe. 是否应该使用iframe姑且不谈,我们看一个影响下载效率的阻塞(blocking)问题。 一般来说,js 文件的位置如果放置不当等,会阻塞后续的下载.
请大家看附图,有两处很明显的阻塞。第一次iframe阻塞(blocking1),大约阻塞了1.2秒,理论上,如果代码写得好,iframe1的内容应该从大约0秒开始下载。第二次iFrame阻塞大约1秒。同理,如果代码写好了,应该和iframe1同时开始下载
问题3:js 阻塞 (图中blocking3). 从图中看出, calander.js这个文件阻塞了下载进程约3秒。是什么东西在calendar.js里阻塞呢? 打开这个文件吓一跳, 是个eval(). 如下所示。 在javascript中避免使用eval()在业界应该是有一定共识了。 而且,关于日期的一些东西,用了好几个不同的js库文件,是否用了合适的库文件? 类似的东西在互联网上到处都有,购票网有没有使用相对合适的日期库文件?
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){returnd[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(newRegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('o$c;k($5u){5Q.2X.7n("6G",l($){k(!$)h.25();t$});5Q.2X.7e("6w",l(){o $=h.6t;3i($.5M!=1)$=$.7g;t$});7f.2X.2I=l($,b){o A=$.1l(/6p/,"");b.5R=l($){6L.1Y=$;tb()};h.7t(A,b.5R,1m)}}。。。
问题4. 平行加载。严格说这个不算问题。大家看附图便知,因为我用IE9所以有8个文件可以同时下载,如果用IE6 可能只有2个文件能同时下载, 这意味着下载过程会更长, 占用更多的网络资源。
总之,登录页面的问题是不够简单,太多的文件,不合适的iframe设计,不合适的日期库函数,就算不做大的修改,也可以做适当的优化把下载时间降低50%左右。 我想类似的问题应该也发生在其它页面上。如果每个页面的响应时间降低50%,就不会有那么多人卡在网络上,从而释放更多网络资源,形成良性循环。
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?注册
x
|