加入单元测试和并发控制，解决页面卡顿 #350

winddies · 2018-03-19T04:40:04Z

解决demo页面因更新chunk进度导致的卡顿问题
加入分片上传请求的并发控制
加入单元测试

nighca · 2018-03-19T07:41:34Z

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
    * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
    * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.thread: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
+    * config.md5: md5 校验，为布尔值，默认 `false`；为 `true` 时，会对分片进行 md5 校验，在断点续传时，若分片 md5 值与断点储存的 md5 不一致，则重传文件。


解释一下为什么默认是 false 吧

nighca · 2018-03-19T07:42:41Z

package.json

@@ -1,12 +1,13 @@
 {
  "name": "qiniu-js",
  "jsName": "qiniu",
-  "version": "2.1.3",
+  "version": "2.1.4",


nighca · 2018-03-19T08:03:38Z

src/pool.js

+  insertQueue(task){
+    return new Promise((resolve, reject) => {
+      this.queue.push({
+        ...task,


如果 task 里有个字段 resolve，这里就有问题了吧；这边不用把 task 展开的，直接拿 { task, resolve, reject } 作为一个 item 就好了

nighca · 2018-03-19T08:08:32Z

src/pool.js

+  toDo(){
+    let onDoingNum = this.onDoing.length;
+    let availableNum = this.limit - onDoingNum;
+    this.onDoing.forEach(task => this.queue = this.queue.filter(item => item !== task));


这事儿为什么在这做啊，为什么不是放在 start 里，this.onDoing.push(task); 之后做？不然在这两行代码运行的间隔里，数据处于一个不一致/合法的状态（onDoing 里跟 queue 里都有）

nighca · 2018-03-19T08:10:00Z

src/pool.js

+  constructor(doTask, limit) {
+    this.doTask = doTask;
+    this.queue = [];
+    this.onDoing = [];


为什么是 onDoing，一般 onFoo 这种命名不都是表示这是个处理 foo 事件的 handler 嘛？

nighca · 2018-03-19T09:46:59Z

src/upload.js

          } else {
            this.sendLog(err.reqId, err.code);
          }
        }
-        if (err.code === 599 && ++this.retryCount < this.config.retryCount) {
+
+        if (err.code === 0 && !this.abort){


应对 599？注释说明

nighca · 2018-03-19T09:47:16Z

src/upload.js

-        if (err.code === 599 && ++this.retryCount < this.config.retryCount) {
+
+        if (err.code === 0 && !this.abort){
+          if (--this.config.retryCount >= 0){


维护 this.tryCount

nighca · 2018-03-19T09:51:53Z

src/upload.js

+          }
+        }
+
+        if (err.code === 701 || (err.message && err.message === "md5不一致")) {


701 是啥，注释说明下？

外面不需要接触 md5 的逻辑

nighca · 2018-03-20T02:16:09Z

src/pool.js

+    this.abort = false;
+  }
+
+  insertQueue(task){


insertQueue -> enqueue
start -> run
doTask -> runTask
todo -> check?

nighca · 2018-03-20T02:17:01Z

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
    * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
    * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.thread: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。


Pool 那边改成 limit 了，这边就改成 concurrentRequestLimit 吧

nighca · 2018-03-20T02:17:34Z

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
    * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
    * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.thread: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
+    * config.md5: md5 校验，为布尔值；在断点续传时，开启md5校验会对已上传的也进行md5计算比对，所以会增加上传时间，默认 `false`；为 `true` 时，会对分片进行 md5 校验，在断点续传时，若分片 md5 值与断点储存的 md5 不一致，则重传该分片。


md5 -> checkByMD5?

nighca · 2018-03-20T02:18:12Z

src/upload.js

@@ -42,6 +47,7 @@ export class UploadManager {
    this.progress = null;
    this.xhrList = [];
    this.xhrHandler = xhr => this.xhrList.push(xhr);
+    this.abort = false;


abort -> aborted

nighca · 2018-03-20T04:50:47Z

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
    * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
    * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.currentRequestLimit: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。


不是 current，是 concurrent...

nighca · 2018-03-20T04:55:45Z

src/upload.js

      }
+
+      let needRetry = err.isRequestError && err.code === 0 && !this.aborted;
+      let reachRetryCount = ++this.retryCount <= this.config.retryCount;


这个明显是 have not reached retry count 啊...

nighca · 2018-03-20T05:01:49Z

test/demo1/scripts/uploadWithSDK.js

@@ -42,11 +47,21 @@ function uploadWithSDK(token, putExtra, config, domain) {
          imageDeal(board, res.key, domain);
        }
      };
-
+      


nighca · 2018-03-20T05:22:34Z

src/upload.js

+        removeLocalFileInfo(this.file);
+      },
+      err => {
+        // ctx错误或者过期情况下，或者md5不匹配时，清除本地存储数据


“或者md5不匹配”？

nighca · 2018-03-20T05:31:59Z

README.md

@@ -170,6 +170,8 @@ subscription.unsubscribe() // 上传取消
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为 `false`。
    * config.region: 选择上传域名区域；当为 `null` 或 `undefined` 时，自动分析上传域名区域。
    * config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；**目前仅在上传过程中产生 `599` 内部错误时生效**，**但是未来很可能会扩展为支持更多的情况**。
+    * config.currentRequestLimit: 分片上传的并发请求量，`number`，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
+    * config.checkByMD5: md5 校验，为布尔值；在断点续传时，开启 md5 校验会对已上传的进行 md5 计算比对，防止文件被修改，若分片 md5 值与断点储存的 md5 不一致，则重传该分片，所以会增加上传时间，默认 `false`。


config.checkByMD5: 是否开启 MD5 校验，为布尔值；在断点续传时，开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对，若不一致，则重传该分片，避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间，因此会稍微增加断点续传时的耗时。默认为 false，不开启。

nighca

🚗

zhangheng added 7 commits March 19, 2018 12:36

加入并发控制

a600d89

加入单元测试

dd9f8de

去除setTimeout

6c69eb3

change jest version

6f71925

update

6f60ad2

update

bbc4740

update

fa5601a

nighca reviewed Mar 19, 2018

View reviewed changes

zhangheng added 3 commits March 19, 2018 21:14

update

a5ac611

add eslint-disable

3e673c2

update test

35ee5da

nighca reviewed Mar 20, 2018

View reviewed changes

zhangheng added 2 commits March 20, 2018 12:47

整理代码

70e06f4

update

e8e9227

nighca reviewed Mar 20, 2018

View reviewed changes

update

32f206b

nighca approved these changes Mar 20, 2018

View reviewed changes

nighca merged commit 02638c2 into qiniu:master Mar 20, 2018

加入单元测试和并发控制，解决页面卡顿 #350

加入单元测试和并发控制，解决页面卡顿 #350

Uh oh!

Conversation

winddies commented Mar 19, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nighca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!