質問ajaxでさらに多くの操作を実行できません

Question

ユーザーがログオンしたときにメイン画面に表示されるダッシュボードがあります。

最初は2つのグラフィックス、1つの線と1つのバーがあります。問題は、グラフィカルなクエリが少し重く、ロードに約30秒かかるということです。

私はすでにクエリの最適化を行いましたが、少し改善しました。問題は、グラフが読み込まれるまで待たなければならないため、システムの他のオプションにアクセスしても私を残さないということです。

グラフが読み込まれるまでユーザーが待機するのは難しいですが、ロードされているグラフに関係なく、他のシステムオプションにアクセスできる方法があるかどうかを知りたいと思います。

私が持っているコードは以下の通りです：

/* 
* You get the urls that the user has access to in the dashboard. This is executed * when the user is on the main screen. 
*/ 
    $.getJSON(getBaseUri() + 'dashboard/index', function(data) { 

    var datas = data['return']; 

    if(datas == ""){ 
     $productivities.removeClass('chartID'); 
     $productions.removeClass('chartID'); 
     $combox.addClass('hidden'); 
    } 

    for (var i in datas) { 
     receiveData({ 
     div  : datas[i].div, 
     title  : datas[i].privilege, 
     sign  : datas[i].sign, 
     iconClass : datas[i].class, 
     id  : datas[i].id, 
     label  : datas[i].label, 
     xaxis  : datas[i].xaxis, 
     yaxis  : datas[i].yaxis, 
     background: datas[i].background, 
     url  : datas[i].route, 
     type  : datas[i].type 
     }); 
    } 
    }); 

/* 
    * The function receiveData() receives the parameters of the dashboard that the user has access and brings the data of each url consulted, and according to the type of graph the function is executed. 
    */ 
    function receiveData(param) { 

    $.ajax({ 
     url: param.url, 
     method: 'GET', 
     dataType: 'json', 
     success: function(data){ 
     var datas = data['return']; 

     if(param.type === "LineChart"){ 
      lineChart({ 
      data : datas, 
      div : param.div, 
      title: param.title, 
      url : param.url 
      }); 
      $loaderProduction.addClass("hidden"); 
     } 

     if (param.type === "BarChart") { 
      barCharts({ 
      data  : datas, 
      div  : param.div, 
      title  : param.title, 
      url  : param.url, 
      label  : param.label, 
      xaxis  : param.xaxis, 
      yaxis  : param.yaxis, 
      background: param.background 
      }); 
      $loaderProductivity.addClass('hidden'); 
     } 

     if (param.type === "Indicator") { 
      indicatorsChart({ 
      data : datas, 
      div : param.div, 
      title : param.title, 
      icon : param.sign, 
      class : param.iconClass, 
      idDash: param.id 
      }); 
     } 

     if (param.type === "Sowing") { 
      sowingIndicator({ 
      data : datas, 
      div : param.div, 
      title : param.title, 
      idDash: param.id 
      }); 
     } 
     }, 
     error: function(error){ 
     console.log(error); 
     } 
    }); 
    } 

基本的にこれらは、私はダッシュボードグラフを表示するために使用しています関数です。

私はこのような場合は、私がWebWorkersを使用する必要があると思いますが、私は今、あなたのfor...inループの各反復のためのAJAX呼び出しを作っていることに

Answer 1

を使用する方法を知っているドント。反復回数によっては、オーバーヘッドが大きくなる可能性がありますが、すべてのケースでサーバーへのラウンドトリップ回数を減らすことが最善です。

フロントエンドとバックエンドの両方のロジックを変更して、リクエストごとに1つのデータセットではなく、複数のデータセットを1つのリクエストにまとめてみることができます。

あなたのコードには明らかなボトルネックはありませんので、遅さが続く場合は、バックエンドコードで問題が発生する可能性が最も高いです。もちろん

Answer 2

あなたはいくつかのオプションしまっ：

• は、単一ページのアプリケーションを通過、すなわち、ユーザが他のアプリケーションのオプションをナビゲートするとき、実行は同じページに常に残っている、という方法であなたのアプリを作ります。あなたのアプリケーションが既に構造化されている場合は、特に重い場合があります。 Angular（またはAngularJs）は他のフロントエンドフレームワークと同じように自動化されています。

• iframeで読み込み中のjsを古くて汚れても実行できますが、動作します。 、メインページにとにかく

を通知メッセージを送信が終了したら、あなたは1