【项目分析】WebService,jQuery,原生对象几种前端加载数据的性能比较(1)
背景
最近的项目遇到了一些性能瓶颈,本篇文章先不谈数据库方面的问题,仅拿前端加载一定量的数据来进行阐述,觉得目前方式比较耗时。前段时间也在做些系统优化,效果并不明显。现在是怀疑出在前端的一些ajax调用以及jQuery本身存在的一些性能问题上;于是,先试着做出些原型,进行各种形式下前端加载数据时的性能对比。
?
详细分析
1. 首先,创建一系列的实体类:
</appSettings>表示一次加载的数据量(用户信息数)为3000。
并且将compilation节点的dubug属性设置为false。
?
3. JSON加载数据测试
1)首先先测试 WebService客户端调用并且最后返回JSON加载数据:
?目前我的项目大多数就是采用这样的模式。
2)接着,如果使用jQuery的$.ajax调用并且最后JSON加载数据:
比WebService快了一些。
3)接着,使用$.getJSON来调用并且JSON加载数据:
和$.ajax相差无几,实际从jQuery代码中可以看出实际上$.getJSON调用的就是$.ajax函数:
和jQuery的$.ajax函数也是基本相差无几。
测试说明:$.ajax,$.getJSON,原生对象返回JSON加载数据的效率基本一样,比WebService的效率好些。
?
4. Html字符串加载数据测试
1)WebService客户端调用返回Html字符串加载数据:
2)jQuery的$.ajax调用返回Html字符串加载数据:
?比WebService也快了一些。
3)原生Ajax调用返回Html字符串加载数据:
和jQuery的$.ajax函数也是基本相差无几。
?
测试说明:$.ajax,$.getJSON,原生对象返回返回Html字符串加载数据的效率基本一样,比WebService的效率好些;并且通过3和4的比较,说明通过在后台拼接Html字符串,比在前台来拼接的过程来得更高效。
?
5. 在我的实例中,大家也许注意到了有“原生Html赋值”和“jQuery Dom赋值”的单选按钮,这是什么呢?很简单,前者就是形如document.getElementById(‘…’),后者就是我们项目中使用的$('#…’).html(‘…’)这样的形式。这两种创建DOM元素上有什么差别吗?用测试说话。
我任意挑选几张对比截图:
? ??
??
?
测试说明:使用原生对象Html赋值比jQuery的Html赋值性能上提升了许多;换句话,就是尽量多使用document.getElementById(‘…’)这样来赋值。
?
6. 最后我们通过cs代码隐藏文件加载数据:
使用后台代码进行页面上的业务逻辑实现是相当高效的。
测试说明:在页面第一次加载的时候,尽量能够在服务端后台代码对服务器控件进行数据绑定,也就是说多使用runat=”server”这样的服务端控件,特别可以充分使用repeater控件的优势来进行数据绑定。
?
总结
再把前面的测试结果列举一下:
1. .ajax,$.getJSON,原生对象返回JSON加载数据的效率基本一样,比WebService的效率好些。
2. $.ajax,$.getJSON,原生对象返回返回Html字符串加载数据的效率基本一样,比WebService的效率好些;
3. 通过测试3和测试4的比较,说明通过在后台拼接Html字符串,比在前台来拼接的过程来得更高效。
4. 使用原生对象Html赋值比jQuery的Html赋值性能上提升了许多;换句话,就是尽量多使用document.getElementById(‘…’)这样来赋值。
5. 在页面第一次加载的时候,尽量能够在服务端后台代码对服务器控件进行数据绑定,也就是说多使用runat=”server”这样的服务端控件,特别可以充分使用repeater控件的优势来进行数据绑定。
?
????? 这是我对于前端页面加载数据时,通过几种方式测试得出来的结果以及结论,如果不妥的地方,希望大家能够提出,欢迎交流,谢谢指教:)?
????? 下一篇,我会介绍下,在当前项目下,如何能够快速优化当前的系统,比如我现在是使用WebService,如何在不改变前端JS代码的情况下,切换到$.ajax或者原生对象中去,有点像“适配器”的概念吧。