ASP.NET 页面中的异步 C# 方法调用适用于调试，但不适用于实时站点

Question

好的，情况是这样的：

我有一个 Web 应用程序，其中包含有关我们销售员的客户的统计表，每一行都有一个迷你图，显示过去 12 个月销售数据的总体趋势。每个页面显示特定销售员的客户列表，其中一些可能拥有大量客户 = 大量行 = 大量迷你图（例如，其中一个有 125 个，需要 15 秒才能加载）。

因此，无法使用 jQuery Sparklines - 它们完全固定了访问页面的用户的 CPU用 IE 可以看到很多迷你图。

因此，我转而使用 Google Chart API，它的效果要好得多，但有两个问题：1）它位于一个安全站点上，并且 Google Chart API URL 仅通过 HTTP 提供服务（通过使用一个小型包装脚本动态下载图表并从我们的安全服务器重新提供它来解决）； 2) 在具有 125 个迷你图的页面上，由于请求数量的原因，它仍然非常慢（即使使用 0-9 服务器前缀来最大化可用连接数）。

因此，除此之外，我的下一步是尝试使每个“下载/抓取/重新提供图像”方法调用异步 - 并且它有效！

...但仅限于在调试模式下运行的我的开发盒。

当我将其推送到实时站点时，速度更快，但它留下了一些图像卸载，这当然是不可接受的。

所以这就是我希望一些大佬知道的：

1）为什么我的异步方法调用在调试时可以工作，但在实时站点上却不能工作？

2）有没有更简单的方法可以在安全服务器上快速加载大量某种类型的迷你图，而不会让我想抓狂？

2a.) 有人有使用 ASP.NET 图表库的经验吗？这是我应该调查的事情吗？

2b.) 一位同事建议我使用 1x1 CSS 背景图像并改变高度来制作自己的迷你图例程。问题是：a）如果我们想要进行更改，它是完全不可扩展的； b) 看起来很老套（标记中的每个迷你图留下大约数十亿个 DIV）； c) 我不知道当一页上有 100-200 个精灵时它是否足够快 - 您对 1x1 精灵方法的可行性有何看法？

提前致谢。

Answer 1

首先，异步并不意味着更快，在您的情况下，如果不减慢速度，那也没有什么区别。

我只是要简化正在发生的事情，以便我可以更好地理解它。有一个页面加载 125-200 张图像。这些图像是动态生成的图表。这是否概括了正在发生的事情？如果是这样的话：

如果客户端有足够的带宽并且您的服务器可以处理请求并且您的服务器上有足够大的管道，那么加载这么多图像应该不是问题。那么延迟在哪里呢？是谷歌吗？或者你的服务器速度变慢了吗？

与从浏览器直接访问 Google 相比慢了多少？
从浏览器直接访问 Google 的响应时间是否可以接受？
如果没有，您可能需要在 UI 中使用不同的策略，这样所有图像都不会自动加载。或者每个客户都在一个选项卡中或将内容分成几页，因此一次只请求少量数据和图像。

无论您生成多少个线程，您使用的 Http 套接字都将被限制为在任何时候向 Google 发出 2 个请求。有一种方法可以更改这个数字（但我不记得如何更改）。无论如何，这很可能是导致你的速度变慢的原因。

从业务层代码使用异步调用（在本例中执行一些 I/O 绑定操作）并不能让您获得释放请求线程来服务其他请求的好处。为此，您需要使用异步页面，因为该页面可以将此事实告知 IIS。任何其他异步工作只是使用更多线程（除非您使用异步 CTP - C# 5.0 中使用的技术，并且专门使用 I/O 线程而不是工作线程。

现在根据您所看到的情况，存在错误从 Google 获取图像时的服务器端，您需要知道这些错误是什么，我建议您不要使用异步。

Answer 2

根据我的经验，ASP.Net 图表效果很好。有一个快速入门 http://betterdashboards.wordpress.com/2010/02/21/how-to-create-a-sparkline-chart-in-asp-net/ 让您开始进行渲染所需的配置迷你图。

编辑：添加了在 MVC 中使用 ASP.Net 图表的示例。显然，您希望将其中一些代码移至某种类型的帮助程序类中，但希望这可以清楚地说明要完成这项工作需要做什么。

    @model IEnumerable<CustomerSales>        
@using Chart = System.Web.UI.DataVisualization.Charting.Chart   
@{    
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Sales
        </th>
    </tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @item.Name
        </td>
        <td>
            @{

    var chart = new Chart();
    chart.ChartAreas.Add(new ChartArea());
    chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
    chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
    chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
    chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
    chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
    chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
    chart.ChartAreas[0].AxisX.LineWidth = 0;
    chart.ChartAreas[0].AxisY.LineWidth = 0;

    chart.Series.Add(new Series());
        // Assign the random number to the chart to create 35 points
    for (int x = 0; x < item.Sales.Length; x++)
    {
        chart.Series[0].Points.AddXY(x, item.Sales[x]);
    }

     // Start hiding both sets of axes, labels, gridlines and tick marks
     chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
     chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
     chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
     chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
     chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
     chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
     chart.ChartAreas[0].AxisX.LineWidth = 0;
     chart.ChartAreas[0].AxisY.LineWidth = 0;

     // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart
     chart.Series[0].ChartType = SeriesChartType.Spline;

     // Since the line is the only thing you see on the chart, you might want to
     // increase its width.  Interestingly, you need to set the BorderWidth property
     // in order to accomplish that.
     chart.Series[0].BorderWidth = 2;

     // Re-adjust the size of the chart to reduce unnecessary white space
     chart.Width = 400;
     chart.Height = 100;
     string base64;
     using (MemoryStream ms = new MemoryStream())
     {
         chart.SaveImage(ms);
         var bytes = ms.GetBuffer();
         base64 = Convert.ToBase64String(bytes);
     }
 /**
  * Here's a simpler example that would do a regular chart, 
  * rather than a sparkline. No way to make the gridlines and axes go
  * away with this helper that I'm aware of.

    var chart = new Chart(
        width: 300,
        height: 100
        )
        .AddSeries(chartType: "Spline", yValues: item.Sales);
    var bytes = chart.GetBytes();
    var base64 = Convert.ToBase64String(bytes);    
             */
                }
             <img src="data:image/jpeg;base64,@base64" />
        </td>
    </tr>
}

</table>

这是使用如下所示的模型：

public class CustomerSales
{
    public CustomerSales(string name, params int[] sales)
    {
        Name = name;
        Sales = sales;
    }
    [Required]
    public string Name { get; set; }
    [Required]
    public int[] Sales { get; set; }
}