-
-
Save kfly8/6327648 to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <img id="hoge" /> | |
| <script> | |
| var img = new Image(); | |
| var src = "https://1.gravatar.com/avatar/918b601dbd1297d58105508fb880b598?d=https%3A%2F%2Fidenticons.github.com%2Fe553551532c5b2c4074cc6c188f1d49< | |
| //var src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/< | |
| var hoge = document.getElementById("hoge"); | |
| console.log('before onload'); | |
| console.log(window.performance.getEntries()); | |
| img.onload = function() { | |
| console.log('img onload'); | |
| console.log(window.performance.getEntries()); | |
| hoge.src = img.src; // DataUriの時は、ここでもDevTools > Networkに表示されるが、画像パスの時は表示されない | |
| } | |
| hoge.onload = function() { | |
| console.log('hoge onload'); | |
| console.log(window.performance.getEntries()); | |
| alert('hoge loaded'); // DataUriでも画像パスを指定したときでも、これは呼ばれる | |
| } | |
| img.src = src; | |
| </script> | |
| </body> | |
| </html> |
case path
before onload hoge.html:14
[] hoge.html:15
img onload hoge.html:17
[] hoge.html:18
hoge onload hoge.html:22
[PerformanceResourceTiming]
0: PerformanceResourceTiming
connectEnd: 0
connectStart: 0
domainLookupEnd: 0
domainLookupStart: 0
duration: 811.4429999841377
entryType: "resource"
fetchStart: 133.7570000323467
initiatorType: "img"
name: "https://1.gravatar.com/avatar/918b601dbd1297d58105508fb880b598?d=https%3A%2F%2Fidenticons.github.com%2Fe553551532c5b2c4074cc6c188f1d495.png&s=420"
redirectEnd: 0
redirectStart: 0
requestStart: 0
responseEnd: 945.2000000164844
responseStart: 0
secureConnectionStart: 0
startTime: 133.7570000323467
__proto__: PerformanceResourceTiming
length: 1
__proto__: Array[0]
hoge.html:23
case DataURI
before onload hoge.html:14
[] hoge.html:15
img onload hoge.html:17
[] hoge.html:18
hoge onload hoge.html:22
[] hoge.html:23
DevToolsのNetworkのInitator列を見ると、どこからリクエストされたかがわかる。
( https://developers.google.com/chrome-developer-tools/docs/network#network_panel_overview )
それを見ると、まず、DataURIでも画像パスでも初回のリクエストが、
https://gist.github.com/kfly8/6327648#file-gistfile1-html-L26
で、されている。
次に、DataURIの場合は、
https://gist.github.com/kfly8/6327648#file-gistfile1-html-L19
でリクエストされているが、画像パスの場合はリクエストされていない
https://gist.github.com/kfly8/6327648#comment-893382
より、画像パスの場合は、二回目のリクエストの場合、
resource timing objectを生成していないのではないかと思われる。（多分、最適化のため？）
だから、二回目のアクセスがDataURIで表示されてないことが不可思議だと思ったけど、
むしろ、二回目以降、画像パス指定の場合は、Networkに表示されないことの方が不可思議
http://www.w3.org/TR/resource-timing/#resources-included
The rest of this section is non-normative.
Examples:
If the same canonical URL is used as the src attribute of two HTML IMG elements, the fetch of the resource initiated by the first HTML IMG element should be included in the PerformanceResourceTiming interface. The user agent might not re-request the URL from the networking layer for the second HTML IMG element, instead using an in-memory browser cache. In this case, there is only a single request sent to the networking layer for retrieval, so the fetch of the resource by the first IMG element would be the only occurrence in the PerformanceResourceTiming interface.
標準の挙動じゃないってところに、ばっちり、
「同じUserAgentで同じパスだったら、２回目のHTML要素では、再びリクエストすることはない。」ってあった。
https://developers.google.com/chrome-developer-tools/docs/network
によれば、window.performance.getEntries() のresource timing objectsをDevToolsは表している。