【项目分析】WebService，jQuery，原生对象几种前端加载数据的性能比较(1)

最新推荐文章于 2024-09-14 17:34:00 发布

mxzjzjdream

最新推荐文章于 2024-09-14 17:34:00 发布

阅读量95

点赞数

分类专栏：技术文章文章标签： WebService jQuery Ajax json HTML ViewUI

本文链接：https://blog.csdn.net/mxzhangjun/article/details/83935922

版权

技术文章专栏收录该内容

12 篇文章 0 订阅

订阅专栏

背景

最近的项目遇到了一些性能瓶颈，本篇文章先不谈数据库方面的问题，仅拿前端加载一定量的数据来进行阐述，觉得目前方式比较耗时。前段时间也在做些系统优化，效果并不明显。现在是怀疑出在前端的一些ajax调用以及jQuery本身存在的一些性能问题上；于是，先试着做出些原型，进行各种形式下前端加载数据时的性能对比。

详细分析

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加载数据：

代码

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( " <div>UserId:{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计时器，很简单，具体可以参考：http://www.cnblogs.com/liping13599168/archive/2009/08/15/1546673.html）

通过代码，我们可以看到它调用了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加载数据：

代码

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( " <div>UserId:{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 " ]);

    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);
}

也是3000条用户数据，运行加载结果为：

比WebService快了一些。

3）接着，使用$.getJSON来调用并且JSON加载数据：

代码

function bindDatajQueryGetJson() {
     var watch = new Stopwatch();
    watch.start();
    $.getJSON( " JsonHandler.ashx " , function (data) {
         var builder = new Sys.StringBuilder();
         for ( var i = 0 , length = data.length; i < length; i ++ ) {
            builder.append(String.format( " <div>UserId:{0}, UserName:{1}, Email:{2}</div> " , data[i].UserId, data[i].UserName, data[i].Email));
        }
        $( " #msg5 " ).html(builder.toString());

        watch.stop();
        $( " #time5 " ).html( " 用时： " + watch.ms + " 毫秒. " );
    });
}

同样通过JsonHandler.ashx的页面处理程序执行返回数据，运行加载结果为：

和$.ajax相差无几，实际从jQuery代码中可以看出实际上$.getJSON调用的就是$.ajax函数：

代码

get: function (url, data, callback, type)
{
     // shift arguments if data argument was ommited
     if (jQuery.isFunction(data))
    {
        callback = data;
        data = null ;
    }

     return jQuery.ajax({
        type: " GET " ,
        url: url,
        data: data,
        success: callback,
        dataType: type
    });
},

getJSON: function (url, data, callback)
{
     return jQuery.get(url, data, callback, " json " );
},

4）接着，使用xmlHttp.js的原生对象调用并且JSON加载数据：

代码

function bindDataPrototypeAjaxJson() {
     var watch = new Stopwatch();
    watch.start();
    Request.sendGET( " JsonHandler.ashx " , false , function (data) {

         var jsonData = JSON.parse(data, null );
         var builder = new Sys.StringBuilder();
         for ( var i = 0 , length = jsonData.length; i < length; i ++ ) {
            builder.append(String.format( " <div>UserId:{0}, UserName:{1}, Email:{2}</div> " , jsonData[i].UserId, jsonData[i].UserName, jsonData[i].Email));
        }
         $( " #msg11 " ).html(builder.toString());
        watch.stop();
        $( " #time11 " ).html( " 用时： " + watch.ms + " 毫秒. " );
    });
}

其中var jsonData = JSON.parse(data, null); 用到了一个json2.js 的开源JSON解析组件，将data的字符串转换为一个JSON对象。运行结果为：

和jQuery的$.ajax函数也是基本相差无几。

测试说明：$.ajax，$.getJSON，原生对象返回JSON加载数据的效率基本一样，比WebService的效率好些。

4. Html字符串加载数据测试

1）WebService客户端调用返回Html字符串加载数据：

代码

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

代码

[WebMethod]
public string GetUserListHtml() {
    List < UserInfo > list = GetUsers();

    StringBuilder builder = new StringBuilder();
     for ( int i = 0 , length = list.Count; i < length; i ++ )
    {
        builder.AppendFormat( " <div>UserId:{0}, UserName:{1}, Email:{2}</div> " , list[i].UserId, list[i].UserName, list[i].Email);
    }
     return builder.ToString();
}

将前端页面对于Html字符串拼接的工作放在WebService中（或者相关后台代码）中去执行，最后通过jQuery的Dom元素html(‘…’)方法赋值。运行加载结果为：

2）jQuery的$.ajax调用返回Html字符串加载数据：

代码

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

代码

public void ProcessRequest (HttpContext context) {
         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();
         for ( int i = 0 , length = list.Count; i < length; i ++ )
        {
            builder.AppendFormat( " <div>UserId:{0}, UserName:{1}, Email:{2}</div> " , list[i].UserId, list[i].UserName, list[i].Email);
        }
        context.Response.Write(builder.ToString());
}

运行加载结果为：

比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代码隐藏文件加载数据：

代码

protected void Page_Load( object sender, EventArgs e)
{
    Stopwatch watch = new Stopwatch();
    watch.Start();
     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();
     for ( int i = 0 , length = list.Count; i < length; i ++ )
    {
        builder.AppendFormat( " <div>UserId:{0}, UserName:{1}, Email:{2}</div> " , list[i].UserId, list[i].UserName, list[i].Email);
    }
    msg7.InnerHtml = builder.ToString();
    time7.Text = " 用时： " + watch.ElapsedMilliseconds + " 毫秒. " ;
}

public int GetDataCount()
{
     return Convert.ToInt32(ConfigurationManager.AppSettings[ " DataCount " ]);
}

运行结果为：