1. 概述

什么是 ProgressEvent接口？

ProgressEvent接口主要是测量底层资源加载的流程进度的事件。

比如HTTP请求，或者图片，视频，音频，样式表的加载和导入其他文件加载等等。

2. ProgressEvent构造函数

ProgressEvent() 构造函数返回一个新的 ProgressEvent对象，表示当前一个漫长处理过程的完成进度。

new ProgressEvent(type)
new ProgressEvent(type, options)

该构造函数有可以传两个参数：

type ：带有事件名称的字符串。它是区分大小写的，浏览器将其设置为 loadstart、progress、abort、error、load、timeout 或 loadend。
options 可选。一个对象，除了 Event() 中定义的属性，它还具有以下属性：
- lengthComputable 可选。一个布尔值，表示底层的进程将要完成的总工作量和已经完成的工作量是否是可计算的。换句话说，它说明进度是否可衡量。它的默认值是 false。
- loaded 可选。一个数值，表示底层的进程已经完成的工作量。可以使用该属性和 ProgressEvent.total 计算完成工作的比例。当使用 HTTP 下载一个资源时，其仅表示内容本身（body）的部分，不包含头和其他开销。它默认值为 0。
- total 可选。一个数值，表示底层的进程正在进行的工作的总工作量。当使用 HTTP 下载一个资源时，其仅表示内容本身（body）的部分，不包含头和其他开销。它默认值为 0。

该构造函数的返回值是一个新的ProgressEvent 对象。

3. `ProgressEvent`对象的属性

lengthComputable

ProgressEvent.lengthComputable 只读属性是一个布尔Boolean 标志，表示ProgressEvent 所关联的资源是否具有可以计算的长度。否则，ProgressEvent.total 属性将是一个无意义的值。

loaded

ProgressEvent.loaded 只读属性是一个整数，表示底层的进程已经执行的工作量。可以使用该属性和 ProgressEvent.total 计算完成工作的比率。当使用 HTTP 下载一个资源，其值以字节（而不是位）为单位，且仅表示内容（body）部分，不包含标头和其他开销。

total

ProgressEvent.total 只读属性是一个无符号 64 位整数值，表明正在处理或者传输的数据的总大小。在 HTTP 传输的情况下，这是消息体的大小（Content-Length）并且不包含标头和其他的开销。

如果事件的 lengthComputable 属性是 false，这个值是没有意义的并且应该被忽略。

4. `ProgressEvent`对象的实例如下

下面的示例为一个新建的 XMLHTTPRequest 添加了一个 ProgressEvent，并使用它来显示请求状态。

var progressBar = document.getElementById("p"),//进度条
    client = new XMLHttpRequest()  //
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {  //监听请求进度
  if(pe.lengthComputable) {  //是否可以计算
    progressBar.max = pe.total
    progressBar.value = pe.loaded
  }
}
client.onloadend = function(pe) {
  progressBar.value = pe.loaded
}
client.send()

以上例子就是测量http请求的进度。

5. 总结

以上就是ProgressEvent接口的简单认识。具体请参考：ProgressEvent - Web API 接口参考 | MDN (mozilla.org)

你知道Web ProgressEvent接口有什么用么？