WebService，jQuery，原生对象几种前端加载数据的性能比较(1)

详细分析1. 首先创建一系列的实体类代码/// summary/// 用户信息/// /summarypublic class UserInfo{public int UserId { get; set; }public string UserName { get; set; }public string Email { get; set; }public Class Class { get; set; }public ListUserRight UserRightList { get; set; }}/// summary/// 班级信息/// /summarypublic class Class{public int ClassId { get; set; }public string ClassName { get; set; }}/// summary/// 用户权限信息/// /summarypublic class UserRight{public int RightId { get; set; }public string RightName { get; set; }}其中包括用户信息类、班级信息类、用户权限类。2. 在Web.config配置一个appsettings节点appSettingsadd keyDataCount value3000//appSettings表示一次加载的数据量用户信息数为3000。并且将compilation节点的dubug属性设置为false。3. JSON加载数据测试1首先先测试 WebService客户端调用并且最后返回JSON加载数据代码function bindDataWebServiceJson() {var watch new Stopwatch();watch.start();JsonService.GetUserList(function(data) {var builder new Sys.StringBuilder();for (var i 0, length data.length; i length; i) {builder.append(String.format(divUserId:{0}, UserName:{1}, Email:{2}/div, data[i].UserId, data[i].UserName, data[i].Email));}$(#msg2).html(builder.toString());watch.stop();$(#time2).html(用时 watch.ms 毫秒.);});}注这里引入了一个Stopwatch计时器很简单具体可以参考JS版Stopwatch计时器 - Leepy - 博客园通过代码我们可以看到它调用了JsonService.asmx中Web服务的GetUserList方法代码[WebMethod]public ListUserInfo GetUserList(){int count Convert.ToInt32(ConfigurationManager.AppSettings[DataCount]);ListUserInfo list new ListUserInfo();for (int i 0; i count; i){list.Add(new UserInfo { UserId i, UserName leepy i, Email sunleepy i gmail.com });}return list;}返回了一个3000条记录的UserInfo实体列表而前端页面通过对列表返回客户端时的Json对象进行Html字符串拼接最后通过jQuery的Dom元素html(‘…’)方法赋值。运行加载结果为目前我的项目大多数就是采用这样的模式。2接着如果使用jQuery的$.ajax调用并且最后JSON加载数据代码function bindDatajQueryAjaxJson() {var watch new Stopwatch();watch.start();$.ajax({url: JsonHandler.ashx,dataType: json,cache: false,success: function(data) {var builder new Sys.StringBuilder();for (var i 0, length data.length; i length; i) {builder.append(String.format(divUserId:{0}, UserName:{1}, Email:{2}/div, data[i].UserId, data[i].UserName, data[i].Email));}$(#msg4).html(builder.toString());watch.stop();$(#time4).html(用时 watch.ms 毫秒.);}});}通过JsonHandler.ashx的页面处理程序执行返回数据代码public void ProcessRequest (HttpContext context) {context.Response.ContentType application/x-javascript;int count Convert.ToInt32(ConfigurationManager.AppSettings[DataCount]);ListUserInfo list new ListUserInfo();for (int i 0; i count; i){list.Add(new UserInfo { UserId i, UserName leepy i, Email sunleepy i gmail.com });}StringBuilder builder new StringBuilder();string data [;for (int i 0, length list.Count; i length; i){data { string.Format(UserId:{0},UserName:{1}, Email:{2}, list[i].UserId, list[i].UserName, list[i].Email) },;}data data.TrimEnd(,) ];context.Response.Write(data);}也是3000条用户数据运行加载结果为比WebService快了一些。3接着使用$.getJSON来调用并且JSON加载数据