更新下载进度条时使用节流

CHANGELOG.md

@@ -45,6 +45,16 @@ PS：这个记忆是非持久的，刷新页面就没了。
 
 现在不会丢失预览进度了。
 
+### 更新下载进度条时使用节流
+
+下载进度的更新每秒钟可能会触发几十次、上百次。之前下载器没有做节流处理（没意识到这个问题，哈哈），现在做了节流处理。
+
+不用节流的话，好处是进度更新很及时，下载进度是平滑增加的，视觉效果上很丝滑。
+
+但是当下载器大量下载文件时，进度更新的总次数会非常多，这会导致内存占用微小且缓慢的上升。
+
+使用节流就是为了避免上面的问题。现在下载器每 200 ms 更新一次进度信息。
+
 ### 每个 Log 区域保存的日志从 100 条增加到 300 条
 
 大量下载时，日志区域太多的话会在页面顶部占据太多空间。这样可以减少日志区域的数量，以减少占据的高度。

dist/js/content.js

@@ -15905,7 +15905,9 @@ class Download {
     }
     // 设置进度条信息
     setProgressBar(name, loaded, total) {
-        _ProgressBar__WEBPACK_IMPORTED_MODULE_5__.progressBar.setProgress(this.progressBarIndex, {
+        // 在下载初始化和下载完成时，立即更新进度条
+        // 在下载途中，使用节流来更新进度条
+        _ProgressBar__WEBPACK_IMPORTED_MODULE_5__.progressBar[loaded === total ? 'setProgress' : 'setProgressThrottle'](this.progressBarIndex, {
             name,
             loaded,
             total,
@@ -16009,7 +16011,11 @@ class Download {
                 xhr = null;
                 return;
             }
-            let file = xhr.response; // 要下载的文件
+            // 要下载的文件
+            let file = xhr.response;
+            // 下载时有些图片可能没有 content-length，无法计算下载进度
+            // 所以在 loadend 之后，把下载进度拉满
+            this.setProgressBar(_fileName, file.size, file.size);
             // 状态码错误，进入重试流程
             if (xhr.status !== 200) {
                 // 正常下载完毕的状态码是 200
@@ -18447,11 +18453,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Tools */ "./src/ts/Tools.ts");
 /* harmony import */ var _Lang__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Lang */ "./src/ts/Lang.ts");
 /* harmony import */ var _EVT__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../EVT */ "./src/ts/EVT.ts");
+/* harmony import */ var _utils_Utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/Utils */ "./src/ts/utils/Utils.ts");
 // 下载进度条
 
 
 
 
+
 // 进度条
 class ProgressBar {
     constructor() {
@@ -18488,6 +18496,8 @@ class ProgressBar {
         this.allProgressBar = [];
         this.KB = 1024;
         this.MB = 1024 * 1024;
+        /**更新子进度条时，使用节流 */
+        this.setProgressThrottle = _utils_Utils__WEBPACK_IMPORTED_MODULE_4__.Utils.throttle(this.setProgress.bind(this), 200);
         this.createElements();
         _Lang__WEBPACK_IMPORTED_MODULE_2__.lang.register(this.wrap);
         this.bindEvents();
@@ -18534,7 +18544,7 @@ class ProgressBar {
         const progress = (downloaded / _store_Store__WEBPACK_IMPORTED_MODULE_0__.store.result.length) * 100;
         this.progressColorEl.style.width = progress + '%';
     }
-    // 设置子进度条的进度
+    /**立即更新子进度条的进度 */
     setProgress(index, data) {
         const bar = this.allProgressBar[index];
         if (!bar) {

src/ts/download/Download.ts

@@ -134,11 +134,16 @@ class Download {
 
   // 设置进度条信息
   private setProgressBar(name: string, loaded: number, total: number) {
-    progressBar.setProgress(this.progressBarIndex, {
-      name,
-      loaded,
-      total,
-    })
+    // 在下载初始化和下载完成时，立即更新进度条
+    // 在下载途中，使用节流来更新进度条
+    progressBar[loaded === total ? 'setProgress' : 'setProgressThrottle'](
+      this.progressBarIndex,
+      {
+        name,
+        loaded,
+        total,
+      }
+    )
   }
 
   // 当重试达到最大次数时
@@ -268,7 +273,13 @@ class Download {
         return
       }
 
-      let file: Blob = xhr.response // 要下载的文件
+      // 要下载的文件
+      let file: Blob = xhr.response
+
+      // 下载时有些图片可能没有 content-length，无法计算下载进度
+      // 所以在 loadend 之后，把下载进度拉满
+      this.setProgressBar(_fileName, file.size, file.size)
+
       // 状态码错误，进入重试流程
       if (xhr.status !== 200) {
         // 正常下载完毕的状态码是 200

src/ts/download/ProgressBar.ts

@@ -3,6 +3,7 @@ import { store } from '../store/Store'
 import { Tools } from '../Tools'
 import { lang } from '../Lang'
 import { EVT } from '../EVT'
+import { Utils } from '../utils/Utils'
 
 interface ProgressBarEl {
   name: HTMLSpanElement
@@ -125,7 +126,7 @@ class ProgressBar {
     this.progressColorEl.style.width = progress + '%'
   }
 
-  // 设置子进度条的进度
+  /**立即更新子进度条的进度 */
   public setProgress(index: number, data: ProgressData) {
     const bar = this.allProgressBar[index]
     if (!bar) {
@@ -156,6 +157,9 @@ class ProgressBar {
     bar.progress.style.width = progress * 100 + '%'
   }
 
+  /**更新子进度条时，使用节流 */
+  public setProgressThrottle = Utils.throttle(this.setProgress.bind(this), 200)
+
   // 让某个子进度条显示警告色
   public errorColor(index: number, show: boolean) {
     const bar = this.allProgressBar[index]