页面演变记

这阵子的页面修改算是告一段落了，回想起这一段时间页面的演变情况，不禁感慨万千。

 

一，利用jQuery最**的方式，查找页面所有符合要求的文本控件，分别绑定到缓存在页面的json数据上。理论上讲这种方式没有任何问题。可是一旦投入实战却发现问题极其严重：

 

1.每次都取相同数据，造成不必要的重复取值，浪费服务器和网络带宽。

2.如果json数据量非常少，页面性能还算马马虎虎。如果json数据稍微多点，页面就会立马变得如同八戒的身材，臃肿不堪，基本不能健步如飞。

3.如果其他用户添加新数据，在不刷新页面或者重新进入页面的情况下，无法实现更新显示。

 

鉴于此，于是将这种方式毫不犹豫地抛弃了。

 

二，既然页面上控件都用相同的数据源，那么干脆在页面初始化时仅加载一次数据源，所有控件共享这个数据源不就行了？这就是我的第二个方法，这期间还学会了评估效果，记得最得意的一个页面，在相同json数据量的前提下，没有优化前，初始化一次需要约20秒，优化后仅需4-6秒。

 

三，第二种优化方法和第一种方法思路基本相同，不过是换汤不换药而已。一旦投入实战，即刻发现还是达不到对页面性能的要求。于是产生新的思路：在页面控件被触发时才实时从后台取少量数据。于是，对jQuery的一个组件进行了大刀阔斧的改进。最终页面加载如同鱼儿在水中游般顺畅。

 

四，在采用第三种方案后，本以页面会就此保持下去。没想到，在用户现场演示时，页面的局部刷新时间最多要10秒！天呐，这绝对不能接受！于是重新审视并调整页面结构，还对UpdatePanel进行了重新划分，这样一来页面局部更新流畅了许多。

 

五，某次，从用户现场返回的途中忽然想到，由于表单操作的时间不会很短，假如用户录完数据后发生系统错误或者被要求重新登录，从而发生页面数据丢失情况，那么用户岂不是气的要把房子给点着！？，于是趁着方法四的热乎劲，对页面进行了缩编......，从而基本上保证了录入数据的安全性，还顺势发挥了Ajax的威力。

 

至此，我想我可以安心的休息一段时间了......