前端性能優化之控制請求併發數

来源:https://www.cnblogs.com/coder--wang/archive/2022/08/01/16540998.html
-Advertisement-
Play Games

在我們平時開發中,經常會遇到頁面數據初始化時,頻繁調同一個介面的情況。比如echarts項目中,一個頁面可能會有幾十張圖表,如果一個介面返回所有圖表數據的話,會造成用戶過長的等待時間,再者過多圖表同時渲染,也會給頁面增加壓力,造成卡頓的現象。 我們通常會讓每個圖表單獨調一個介面,入參不同,這樣更有利 ...


  在我們平時開發中,經常會遇到頁面數據初始化時,頻繁調同一個介面的情況。比如echarts項目中,一個頁面可能會有幾十張圖表,如果一個介面返回所有圖表數據的話,會造成用戶過長的等待時間,再者過多圖表同時渲染,也會給頁面增加壓力,造成卡頓的現象。

  我們通常會讓每個圖表單獨調一個介面,入參不同,這樣更有利於頁面快速渲染圖表,單個圖表請求到數據,立即渲染,不需要等待其他圖表。可理想很豐滿,現實很骨感,當伺服器配置過低,或者後端代碼性能較弱,會難以處理這些併發請求,介面調用越多,等待處理的時間可能就越長,甚至超過一次性返回所有數據的間。。。為瞭解決這種問題,緩解後端壓力,本篇將介紹前端來控制請求的併發數:

  先分析一波,假設我們需要重覆調用30次介面,並聯調用介面,服務端壓力較大,可能會造成響應時間過長。逐漸減少併發數,假設併發數為5的時候,伺服器處理速度最快,幾乎不受併發影響。

  針對這種情況,我們可以封裝介面請求方法,控制每次介面請求的併發數,將30次分解成:併發數為5,分6次請求。這樣的話,伺服器每次處理5次請求,資源釋放出來繼續處理下一批請求,從而解決併發擁堵問題~

初步構思:

class TaskQueue {
  constructor(max) {
    this.max = max;
    this.taskList = [];
  }

  addTask(task) {
    this.taskList.push(task);
  }
}

function createTask(i) {
  return () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (i == 4 || i == 15) {
          reject("出錯啦~");
        } else {
          resolve("成功呀~" + i);
        }
      }, 2000);
    });
  };
}

const taskQueue = new TaskQueue(5);

for (let i = 0; i < 30; i++) {
  const task = createTask(i);
  taskQueue.addTask(task);
}
for迴圈調用函數createTask()返回30個promise的非同步任務,任務隊列TaskQueue類返回一個實例,控制這30個非同步任務的併發,構造器中傳入併發數5。
接下來用TaskQueue實現控制併發:
class TaskQueue {
  constructor(max) {
    this.max = max; // 併發數
    this.min = 0;
    this.taskList = []; // 全部任務
    Promise.resolve().then(() => this.run()) // 等同步代碼(addTask)全部執行完成,再執行run
  }

  // 增加任務
  addTask(task) {
    this.taskList.push(task);
  }

  // 執行任務
  async run() {
    if (!this.taskList.length) return;
    const AsyncTasks = [];
    this.min = Math.min(this.max, this.taskList.length) // 當傳入的併發數大於任務數,取任務數, 反之取併發數
    // 根據併發數分組
    for(let i = 0; i < this.min; i++) {
       AsyncTasks.push(this.taskList.shift());
    }
    await this.handleTask(AsyncTasks); // 通過下麵遞歸,這裡將會有6個非同步任務串聯執行

    this.run(); // 遞歸
  }

  async handleTask(tasks) {
    // 返回promise處理非同步任務組
    return new Promise(resolve => {
      // 遍歷任務組,5個非同步任務並聯執行
      tasks.forEach(async (task, index) => {
        await task().then(res => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        }).finally(() => {
          index + 1 === this.min && console.log('===============================');
          index + 1 === this.min && resolve() // 最後一個任務resolve(),promise完成
        })
      })
    })
  }
}

function createTask(i) {
  return () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (i == 4 || i == 15) {  // 測試捕捉錯誤
          reject("出錯啦~");
        } else {
          resolve("成功呀~" + i);
        }
      }, 2000);
    });
  };
}

const taskQueue = new TaskQueue(5);

for (let i = 0; i < 30; i++) {
  const task = createTask(i);
  taskQueue.addTask(task);
}

試試效果:

 

 nice,至此,30次非同步任務,分6次完成,每次處理5個,大家可以在此基礎上拓展請求介面,並增加一些處理邏輯,歡迎留言探討~

 

腳踏實地行,海闊天空飛~

 

搜索

複製


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql主從 1.主從原理 1.1 主從介紹 所謂mysql主從就是建立兩個完全一樣的資料庫,其中一個為主要使用的資料庫,另一個為次要的資料庫,一般在企業中,存放比較重要的數據的資料庫伺服器需要配置主從,這樣可以防止因資料庫伺服器宕機導致數據丟失,還能保證業務量太多、數據太多和訪問人數太多時服務的 ...
  • mysql 簡潔式安裝步驟 1. 設置全局變數 解壓mysql壓縮包到指定位置, 然後配置全局變數, 在 path 中添加全局變數, 值為 mysql 根目錄下 bin 目錄路徑, 比如: D:\code_space\environments\mysql-8.0.30\bin 然後保存即可 2. 配 ...
  • 常用命令 啟動redis服務(Windows) 在redis的目錄下執行命令: redis-server 啟動redis客戶端實例(Windows) 在redis的src目錄下執行命令: redis-cli 連接遠程redis伺服器:(Windows) redis-cli -h host -p po ...
  • 一、直播介紹 上期雅澤同學對ChengYing是什麼、有什麼樣的功能特性,如何快速入門做了介紹,本期海洋同學將會為大家分享ChengYing部署Hadoop集群實戰的相關內容,歡迎大家積极參与。 二、直播主題 ChengYing部署Hadoop集群實戰 三、直播時間 時間:2022年8月2日晚 19 ...
  • 我們都理解B+樹和Hash索引的區別有助於我們預測索引在不同的存儲引擎中是怎麼執行查詢的。 B+ TREE 索引特性B數是一種在資料庫索引中流行的樹數據結構。該結構始終保持排序,從而可以快速查找精確匹配。MySQL中使用的是B樹的一種變體,B+樹,這種類型的索引可用於大多數存儲引擎,例如InnoDB ...
  • 綠幕摳圖是影視製作過程中常見的技術手段,常用於視頻中摳除並替換背景,通過後期加工實現視頻剪輯製作的更多可能性。然而,綠幕摳圖技術製作成本費時費力,無法應用於日常生活。 華為視頻編輯服務近期上線目標分割能力,可通過AI智能摳圖精細化分割視頻中的目標物體,並且不局限於特定的物體類別,在主體明確、背景相對 ...
  • DAY01 電腦的介紹 特點: 1.可以進行數值計算,可以進行邏輯計算 2.具有存儲記憶功能 硬體:看得見,摸得著的 顯示器,主機,存儲器 軟體:看得見,摸不著的 系統軟體:操作系統:windows、Linux、UNIX等 應用軟體:各類app C/S架構和B/S架構 1.C/S架構:需要安裝 a ...
  • 字元串 字元串概述(個人理解字元串就是把一串字元連接在一起,而且他的值類型是常量,所以不能改變,返回值只能返回一個新的字元串) 字元串也是一個數據結構(串),將同樣的內容串在一塊。因為在對應的js裡面字元串屬於一個值類型(值類型是常量 常量是不能變)。字元串是不能改變的。結合昨天提到的數據結構裡面串 ...
一周排行
    -Advertisement-
    Play Games
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...