javascript - 怎麼優化多個ajax請求

Question

前端頁面有五、六個ajax請求，一打開那個頁面好卡，怎麼解決？

#程式碼

//fetch异步请求函数
      function status(response){
          if(response.status>=200 && response.status<300){
              return Promise.resolve(response);
          }
          else{
              return Promise.reject(new Error(response.statusText));
          }
      }
      function json(response){
          return response.json();
      }

      function ctrlset(){
          fetch("/cmdopen")
              .then(status)
              .then(json)
              .then(function (data) {
                  console.log('ok');
              })

      }
      //请求数据函数
      function getData(){
        fetch("/numsum")
            .then(status)
            .then(json)
            .then(function (data) {
                var num = document.getElementById("numbersum");
                num.innerHTML = data;
            })
        //请求风扇是否打开
        fetch("/feng")
          .then(status)
          .then(json)
          .then(function(data){
{#            var p = document.getElementById('fengshan');#}
            var feng1 = document.getElementById('feng1');
            var feng0 = document.getElementById('feng0');
            if (data[data.length-1] == 1) {
              feng1.style.display = "block";
              feng0.style.display = "none";
            }else{
              feng1.style.display = "none";
              feng0.style.display = "block";
            }
          })

         //请求宠物是否在屋内
        fetch("/indoor")
          .then(status)
          .then(json)
          .then(function(data){

            var p = document.getElementById('indoor');
            var image1 = document.getElementById('image1');
            var image0 = document.getElementById('image0');

              if(data[data.length-1] == 1){
                 image0.style.display = "none";
                 image1.style.display = "block";
              }else{
                 image1.style.display = "none";
                 image0.style.display = "block";
              }
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

              //请求时间
        fetch("/time")
          .then(status)
          .then(json)
          .then(function(data){
              // 折线图湿度
              myChart.setOption({
                      xAxis:{
                  data:data
                }
              });
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

        //请求温度数据
        fetch("/tem")
          .then(status)
          .then(json)
          .then(function(data){
              //折线图温度
              myChart.setOption({

                     series: [{
                         // 根据名字对应到相应的系列
                         name: 'TEM',
                         data: data
                     }]
              });
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

        //请求湿度数据
      fetch("/hum")
        .then(status)
        .then(json)
        .then(function(data){
            // 折线图湿度
            myChart.setOption({
                   series: [{
                       // 根据名字对应到相应的系列
                       name: 'HUM',
                       data: data
                   }]
            });
        })
        .catch(function(err){
            console.log("Fetch错误:"+err);
        });
      }

    //定时更新数据
    setInterval('getData()',10);

Answer 1

setInterval('getData()',10);

你十毫秒抓一次數據能不卡麼。數據還沒回來又發了2個出去了 無窮延續

Answer 2

先確定頁面卡頓的問題。

頁面卡通常都是DOM渲染的問題，F12查查就懂了，不要把鍋子都甩給ajax，比如說你ajax一個html過來，再渲染，那肯定很卡。

Answer 3

跟ajax數量可能有關係，但應該不是主要原因，因為畢竟ajax是異步的，慢還是獲取數據量比較大的原因吧，如果是一下子獲取數據量比較大的情況的話，建議你們分批次加載，不要一下子取所有資料；

如果是ajax太多的情況，那麼可以適當的分段加載，比如原先6個ajax，分成兩段，第一段的三個ajax加載好了，再加載下一段

Answer 4

頁面初始化的時候 如果程式碼不可避免 則加loadding解決

Answer 5

使用Promise做延遲處理.

Answer 6

請題主發頁面代碼，最好附帶 Chrome 的 Timing 截圖。