F12网络请求监控 -Resource Timing API

Topic：

图片刷新加载解决特效，高清图片，或者后端生成的请求数据。（长连接）

Answer：

img标签绑定onload事件监听图片请求get方法。
$(“#chartImage”).attr(“class”, “loader”);
$(“#chartImage”).attr(“src”, “”);
$(“#chartImage”).attr(“class”, “”);

Snapshot：

点击查询出现加载图标

图片请求完毕，关闭加载图标。显示图片

Refrence：

加载特效：How TO - CSS Loader
https://www.w3schools.com/howto/howto_css_loader.asp

Eval’ing html comment on img load event
https://stackoverflow.com/questions/16186846/evaling-html-comment-on-img-load-event

Resource Timing Level 1
W3C Candidate Recommendation 30 March 2017
https://www.w3.org/TR/resource-timing/

Measuring the speed of resource loading with JavaScript and HTML5
https://blog.trasatti.it/2012/12/10/measuring-the-speed-of-resource-loading-with-javascript-and-html5/

function simplePerf() {
 var pe = performance.getEntries();
 for (var i = 0; i < pe.length; i++) {
  if (window.console) console.log("Name: " + pe[i].name + 
   " Start Time: " + pe[i].startTime + 
   " Duration: " + pe[i].duration + "n");
 }
}

perftime.html
上面实例代码的示例地址，点击展示按钮可以更新拿到最新的请求信息。不是基于回调实现的。
https://github.com/atrasatti/jsperfexamples

boomerang是一个JavaScript库，用于测量真实用户经历的页面加载时间，通常称为RUM（真实用户测量）。它能够将这些数据发送回服务器进行进一步分析。使用boomerang，您可以准确了解用户认为您的网站有多快。
https://github.com/bluesmoon/boomerang

How
to get list of network requests done by HTML
https://stackoverflow.com/questions/20621084/how-to-get-list-of-network-requests-done-by-html

Web Performance Calendar
The speed geek’s favorite time of year
https://calendar.perfplanet.com/2012/an-introduction-to-the-resource-timing-api/

Episodes Example 1
https://stevesouders.com/episodes2/ex1.html

## reader：

This specification defines an interface for web applications to access the complete timing information for resources in a document.
https://w3c.github.io/resource-timing/

请求资源类型。
initiatorType getter steps are to return the initiator type for this.

initiatorType returns one of the following values:

“navigation”, if the request is a [=navigation request=];
“css”, if the request is a result of processing a CSS url() directive such as @import url() or background: url(); [[CSS-VALUES]]
“script”, if the request is a result of loading any script (a classic [^script], a [=module script=], or a {{Worker}}).
“xmlhttprequest”, if the request is a result of processing an {{XMLHttpRequest}};
“fetch”, if the request is the result of processing the {{WindowOrWorkerGlobalScope/fetch()}} method;
“beacon”, if the request is the result of processing the {{Navigator/sendBeacon()}} method; [[BEACON]]
“video”, if the request is the result of processing the [^video] element’s [^video/poster] or [^video/src].
“audio”, if the request is the result of processing the [^audio] element’s [^audio/src].
“track”, if the request is the result of processing the [^track] element’s [^track/src].
“img”, if the request is the result of processing the [^img] element’s [^img/src] or [^img/srcset].
“image”, if the request is the result of processing the image element. [[SVG2]]
“input”, if the request is the result of processing an [^input] element of [^input/type] [^{input/type/image}].
“a”, if the request is the result of processing an [^a] element’s [^a/download] or [^a/ping].
“iframe”, if the request is the result of processing an [^iframe]'s [^iframe/src].
“frame”, if the request is the result of loading a [^frame].
“other”, if none of the above conditions match.