Question

我有一个仪表板，当用户登录时会显示在主屏幕上。

最初我有两个图形，一个是线条，另一个是条形图形。问题是图形查询有点沉重，加载大约需要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，但我不知道如何使用它

Answer 1

现在，您正在为for...in循环的每次迭代进行AJAX调用。根据迭代次数，这可能意味着巨大的开销，尽管最好在所有情况下减少到服务器的往返次数。

您可以尝试修改前端和后端逻辑，将多个数据集合并为一个请求，而不是每个请求和多个请求合并一个数据集。

除此之外，您的代码中没有明显的瓶颈，因此如果持续时间缓慢，则问题最有可能出现在您的后端代码中。

Answer 2

当然你有一些选择：

浏览单页应用程序，即以用户导航其他应用程序选项时执行始终位于同一页面的方式创建应用程序。它可能很重，特别是如果您的应用程序已经结构化。 Angular（或AngularJs），作为其他前端框架，以自动方式为您完成此任务。
让我们在iframe执行你的加载js，旧的和脏的，但它的工作原理。完成后，在主页面中发送通知消息，

无论如何，你也应该优化你的代码，减少从n（数据中的每个元素一个）到1的调用次数。

查询ajax不允许我做更多的操作

2 个答案: