web api - mutationObserver

MutationObserver接口提供了监听对DOM树所做更改的能力。是DOM3 Events规范的一部分。

构造函数

MutationObserver()
创建并返回一个新的MutationObserver，它会在指定DOM发生变化时被调用。

方法

• disconnect()
  阻止MutationObserver实例继续接收通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会被调用
• observe()
  配置MutationObserver在Dom更改匹配给定选项时，通过其回调函数开始接收通知
• takeRecords()
  从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到MutationRecord对象的新Array中

示例

// 需要观察变动的DOM节点
const targetNode = document.getElementById('some-id')

// 观察器的配置，需要监听的属性
const config = {attributes: true, childList: true, subtree: true }

// 当观察到变动时执行的回调函数
const callback = function(mutationList, observer) {
	for (let mutation of mutationList) {
		if (mutation.type === 'childList') {
			console.log('A Children node has been added or removed')
		} else if (mutation.type === 'attributes') {
			console.log('The' + mutation.attributeName + ' attribute was modified. ')
		}
	}
}

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback)

// 观察目标节点变动
observer.observe(targetNode, config)

// 停止观察
observer.disconnect()

---

性能监测对象

PerformanceObserver用于监测性能度量事件，在浏览器的性能时间轴记录下一个新的Performance entries的时候将会被通知

构造函数

PerformanceObserver()

方法

• PerformanceObserver.observe()
  指定监测的entry types集合。当performance entry被记录且是指定的entryTypes之一时，性能观察者对象的回调函数会被调用
• PerformanceObserver.disconnect()
  性能监测回调停止接收

示例

var observer = new PerformanceObserver( (list, obj) => {
	const entries  = list.getEntries()
	for ( let i = 0; i < entries.length; i++) {
		// process 'mark' and 'frame' events
	}
} )
observer.observe({entryTypes: ['mark', 'frame']})


var observer2 = new PerformanceObserver((list, observer) => {
	// process the measure envent
})

observer2.observe({entryTypes: ['measure']})

Performance对象

高精度时间(High Resolution Time简称 hr-time)规范定义了Performance对象，通过Performance对象我们可以获得高精度时间

方法和属性

• 属性：timeOrigin
  timeOrigin返回页面浏览上下文第一次被创建的时间。如果全局对象为WorkerGlobalScope，则timeOrigin为Worker被创建的事件.

  timeOrigin的时间值不受时钟偏差与系统时钟调整的影响
  
  new Date(performance.timeOrigin).toLocaleString()     // "2021/4/6下午2:22:03"
  
  当timeOrigin的值被确定后，无论将系统时间设置到什么时间，performance.timeOrigin值不变
  

• 方法：now()
  方法now被执行后会返回从timeOrigin到现在的高时间精度

  performance.now() =  当前时间  - performance.timeOrigin 
  
  new Date(performance.timeOrigin + performance.now()).toLocaleString()
  // "2021/4/6下午5:10:55"
  

• getEntries()

• getEntriesByType()

  window.performance.getEntriesByType('resource')
  

类型为resource的PerformanceEntry对象在术语上被称为PerformanceResourceTiming对象

• getEntriesByName()

PerformanceResourceTiming对象扩展了PerformanceEntry对象并新增了很多属性用于获取详细的资源计时信息，PerformanceResourceTiming对象的属性如下：

属性名	作用
name	请求资源的绝对地址，即便请求重定向到一个新的地址，此属性也不会改变
entryType	PerformanceResourceTiming对象的entryType属性永远返回字符串“resource”
startTime	用户代理开始排队获取资源的时间。如果HTTP重定向则该属性与redirectStart属性相同，其他情况该属性将与fetchStart相同
duration	该属性将返回 responseEnd 与 startTime之间的时间
initiatorType	发起资源的类型
nextHopProtocol	请求资源的网络协议
workerStart	如果当前上下文是”worker”，则workerStart属性返回开始获取资源的时间，否则返回0
redirectStart	资源开始重定向的时间，如果没有重定向则返回0
redirectEnd	资源重定向结束的时间，如果没有重定向则返回0
fetchStart	开始获取资源的事件，如果资源充电箱了，则时间为最后一个重定向资源的开始获取时间
domainLookupStart	资源开始进行DNS查询的时间（如果无DNS查询，如使用缓存或本地资源则时间等于fetchStart）
domainLookupEnd	资源完成DNS查询时间（如无DNS查询，如使用了缓存或本地资源，则时间等于fetchStart）
connectStart	用户代理开始与服务器建立用来检索资源的连接的时间（TCP建立连接的时间）
connectEnd	用户代理完成与服务器建立的用来检索资源的连接的时间（TCP连接成功的时间）
secureConnectionStart	如资源使用安全传输，那么用户代理会启动握手过程以确保当前连接。该属性代表握手开始时间（如果页面使用HTTPS那么值是安全连接握手之前的时间）
requestStart	开始请求资源的时间
responseStart	用户代理开始接收Response信息的时间（开始接受Response的第一个字节，例如HTTP/2的帧头或HTTP/1.x的Response状态行）
responseEnd	用户代理接收到资源的最后一个字节的时间，或在传输连接关闭之前的时间，使用先到者的时间。或者是由于网络错误而终止网络的时间
transferSize	表示资源的大小（以八位字节为单位），该大小包括响应头字段和响应有效内容主体（Payload Body）
encodedBodySize	表示从HTTP网络或缓存中接收到的有效内容主体（Payload Body）的大小（在删除所有应用内容编码之前）
decodedBodySize	表示从HTTP网络或缓存中接收到的消息主体（Message Body）的大小（在删除所有应用内容编码之后）

资源类型initiatorType

initiatorType属性返回的内容代表资源是从哪里发生的请求行为：属性值

类型	描述
css	请求是从css中的url()指令发出，如 @import url() 或background: url()
xmlhttprequest	通过XMLHttpRequest对象发出的请求
fetch	通过fetch方法发出的请求
beacon	通过beacon方法发出的请求
link	通过link标签发出的请求
script	通过script标签发出的请求
iframe	通过iframe标签发出的请求
other	没有匹配上面条件的请求