cached-image-gets-single-entry.html (2458B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Resource Timing: test behavior for cached resources</title> 6 <link rel="author" title="Google" href="http://www.google.com/" /> 7 <link rel="help" href="https://www.w3.org/TR/resource-timing-2/"/> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="resources/observe-entry.js"></script> 11 </head> 12 <body> 13 <h1>Description</h1> 14 <p>Test that a reused resource only appears in the buffer once.</p> 15 <script> 16 // Need our own image loading helper because the one in resource-loaders.js 17 // is desgined to always side-step the HTTP cache but this test relies on the 18 // second request being resolved from the cache. 19 const load_image = path => new Promise(resolve => { 20 const img = document.createElement('img'); 21 img.onload = img.onerror = () => resolve(); 22 img.src = path; 23 document.body.append(img); 24 }); 25 26 promise_test(async () => { 27 const blue = "resources/blue.png"; 28 29 // First request. Should appear in the timeline. 30 await load_image(blue + "?cacheable"); 31 32 // Second request. Should not appear in the timeline. 33 await load_image(blue + "?cacheable"); 34 35 // Third request. When this request shows up in the timeline, we know that, if 36 // the second request would generate an entry, that entry would have already 37 // shown up in the timeline. Without this, we'd need to guess at how long to 38 // wait which tends to be flaky. 39 await load_image(blue + "?avoid-cache"); 40 41 const entries = await new Promise(resolve => { 42 const accumulator = []; 43 new PerformanceObserver(entry_list => { 44 entry_list.getEntries().forEach(entry => { 45 if (!entry.name.includes("blue.png")) { 46 // Ignore resources other than blue images. 47 return; 48 } 49 accumulator.push(entry); 50 51 // Once we see the 'canary' resource, we don't need to wait anymore. 52 if (entry.name.endsWith('avoid-cache')) { 53 resolve(accumulator); 54 } 55 }); 56 }).observe({'type': 'resource', 'buffered': true}); 57 }); 58 59 assert_equals(entries.length, 2, "There must be exactly 2 entries in the " + 60 "Performance Timeline"); 61 assert_true(entries[0].name.endsWith("blue.png?cacheable")); 62 assert_true(entries[1].name.endsWith("blue.png?avoid-cache")); 63 }, "When a resource is resolved from cache, there must not be a " + 64 "corresponding entry in the Performance Timeline"); 65 </script> 66 </body> 67 </html>