2

OK 状況は次のとおりです。

セールスマンの顧客に関する統計表を含む Web アプリがあり、各行には、過去 12 か月の売上データの一般的な傾向を示すスパークライン グラフがあります。各ページには特定のセールスマンの顧客リストが表示され、そのうちのいくつかには膨大な数の顧客 = 膨大な数の行 = 膨大な数のスパークライン (たとえば、特に 125 あり、読み込みに 15 秒かかるもの) がある場合があります。

このため、jQuery スパークラインは使用できませんでした。IE で多数のスパークラインを使用してページにアクセスするユーザーの CPU を完全に固定していました。

そこで、 Google Chart APIの使用に移りましたが、2 つの問題を除いて、はるかにうまく機能しました。1) 安全なサイトにあり、Google Chart API の URL は HTTP 経由でのみ提供されます (小さなラッパー スクリプトを使用してダウンロードすることで解決されます)。グラフを動的に保存し、安全なサーバーから再提供します); 2) 125 個のスパークラインを含むページでは、リクエストの数が原因でまだ非常に低速でした (利用可能な接続数を最大化するために 0 ～ 9 のサーバー プレフィックスが使用されている場合でも)。

したがって、これを超える私の次のステップは、「画像のダウンロード/グラブ/再提供」メソッド呼び出しのそれぞれを非同期にすることでした-そしてそれはうまくいきました!

...しかし、デバッグモードで実行されている開発ボックスでのみ。

ライブサイトにプッシュしたときは高速でしたが、一部の画像がアンロードされたままになり、もちろん受け入れられません.

だから、ここに私が何人かのホットショットが知っていることを望んでいたものがあります:

1) デバッグ中に非同期メソッド呼び出しが機能するのに、実際のサイトでは機能しないのはなぜですか?

2) ある種のスパークラインを大量に取得して、安全なサーバーにすばやくロードする簡単な方法はありますか?

2a.) ASP.NET Chart Library を使用した経験のある人はいますか? これは私が調査する必要があるものですか？

2b.) 同僚が、1x1 の CSS 背景画像を使用し、高さを変えて独自のスパークライン ルーチンを作成することを提案しました。問題は次のとおりです。a) 変更したい場合に備えて完全に拡張できません。b）それは地獄のようにハッキーに見えます（マークアップのスパークラインごとに約数十億のDIVを残します）。c) 1 ページに 100 ～ 200 個のスプライトが含まれている場合に十分な速度になるかどうかはわかりません。1x1 スプライト アプローチの実現可能性についてどう思いますか?

前もって感謝します。

4

2 に答える 2

2

まず第一に、非同期はより速いという意味ではありません。あなたの場合、物事がさらに遅くならない限り、違いはありません。

何が起こっているのかを単純化して、よりよく理解できるようにします。125 ～ 200 枚の画像を読み込むページがあります。これらの画像は動的に生成されたグラフです。それは何が起こっているのかを要約していますか？もしそうなら：

クライアントに十分な帯域幅があり、サーバーが要求を処理でき、サーバーに十分な大きさのパイプがある場合、これらの多くの画像をロードしても問題はありません。では、遅延はどこにあるのでしょうか。グーグルですか？または、サーバーの速度が低下していますか?

ブラウザから直接 Google にアクセスする場合と比べてどれくらい遅くなりますか? ブラウザから Google に直接アクセスする場合の応答時間は許容範囲内ですか? そうでない場合は、すべての画像が自動的に読み込まれないように、UI で別の戦略を使用する必要があります。または、各顧客がタブに表示されているか、ページに分割されているため、少量のデータのみが表示されるため、一度に画像が要求されます。

使用している Http ソケットは、生成するスレッドの数に関係なく、いつでも 2 つのリクエストを Google に発行するように制限されます。この番号を変更する方法があります (しかし、どうすればよいか頭の中で思い出すことができません)。とにかく、これが速度低下の原因である可能性が最も高いです。

ビジネス層コードから非同期呼び出しを使用する (この場合のように I/O バウンド操作を実行する) と、他の要求を処理するために要求スレッドを解放する利点が得られません。これが機能するには、ページが IIS にこの事実を通知できるため、非同期ページを使用する必要があります。他の非同期作業では、より多くのスレッドを使用するだけです (非同期 CTP - C# 5.0 で使用されている手法を使用していない場合、特にワーカー スレッドではなく I/O スレッドを使用している場合を除く)。

ご覧のとおり、Google から画像を取得する際にサーバー側にエラーがあり、それらのエラーが何であるかを知る必要があります。これには async を使用しないことをお勧めします。

于 2011-01-26T05:13:54.290 に答える
1

私の経験では、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.&nbsp; 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; }
}
于 2011-01-26T01:26:19.130 に答える