当前位置：首页 > news >正文

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

news 2026/7/6 4:27:23

详细分析

1. 首先，创建一系列的实体类：

代码

/// <summary>
/// 用户信息
/// </summary>
public class UserInfo
{
public int UserId { get; set; }

public string UserName { get; set; }

public string Email { get; set; }

public Class Class { get; set; }

public List<UserRight> UserRightList { get; set; }
}

/// <summary>
/// 班级信息
/// </summary>
public class Class
{
public int ClassId { get; set; }

public string ClassName { get; set; }
}

/// <summary>
/// 用户权限信息
/// </summary>
public class UserRight
{
public int RightId { get; set; }

public string RightName { get; set; }
}

其中包括用户信息类、班级信息类、用户权限类。

2. 在Web.config配置一个appsettings节点

表示一次加载的数据量（用户信息数）为3000。

并且将compilation节点的dubug属性设置为false。

3. JSON加载数据测试

1）首先先测试 WebService客户端调用并且最后返回JSON加载数据：

代码

（注：这里引入了一个Stopwatch计时器，很简单，具体可以参考：JS版Stopwatch计时器 - Leepy - 博客园）

通过代码，我们可以看到它调用了JsonService.asmx中Web服务的GetUserList方法：

代码

[WebMethod]
public List<UserInfo> GetUserList()
{
int count = Convert.ToInt32(ConfigurationManager.AppSettings["DataCount"]);
List<UserInfo> list = new List<UserInfo>();
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加载数据：

代码

通过JsonHandler.ashx的页面处理程序执行返回数据：

代码

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/x-javascript";
int count = Convert.ToInt32(ConfigurationManager.AppSettings["DataCount"]);

List<UserInfo> list = new List<UserInfo>();
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);
}