Skip to content

Instantly share code, notes, and snippets.

@slavafomin

slavafomin/redirect.html

Created January 18, 2019 16:12
Show Gist options
  • Save slavafomin/d13fc9ca6b4e2df277e68c6cd3aa1ce9 to your computer and use it in GitHub Desktop.
Save slavafomin/d13fc9ca6b4e2df277e68c6cd3aa1ce9 to your computer and use it in GitHub Desktop.
Download ZIP
HTTP Cache Test
Raw
redirect.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cache Test Redirect</title>
</head>
<body>
<script type="application/javascript">
(() => location.href = '/test.html')();
</script>
</body>
</html>
Raw
test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cache Test</title>
<style>
#resources-container {
display: flex;
flex-wrap: wrap;
}
img {
width: 100px;
height: 100px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<button type="button" id="load-resource-button">Load Resource</button>
<button type="button" id="fetch-resource-button">Fetch Resource</button>
<label>
<input type="checkbox" id="disable-cache-checkbox">
Disable Cache
</label>
</div>
<p>
<a href="/redirect.html">Redirect Me</a>
</p>
<hr>
<div id="resources-container"></div>
<script type="application/javascript">
(() => {
const IMAGE_URL = '/image.jpg';
const container = document.getElementById('resources-container');
const loadButton = document.getElementById('load-resource-button');
const fetchButton = document.getElementById('fetch-resource-button');
const disableCacheCheckbox = document.getElementById('disable-cache-checkbox');
loadButton.addEventListener('click', () => {
const t0 = performance.now();
const image = document.createElement('img');
image.src = '/image.jpg';
image.addEventListener('load', () => {
const t1 = performance.now();
console.log('Image loaded in: ' + (t1 - t0) + ' ms.');
});
container.append(image);
});
fetchButton.addEventListener('click', () => {
const t0 = performance.now();
const cacheDisabled = disableCacheCheckbox.checked;
const fetchConfig = {
cache: (cacheDisabled ? 'no-store' : 'default')
};
fetch(IMAGE_URL, fetchConfig).then(response => {
if (!response.ok) {
throw new Error(`Failed to load the resource`);
}
response.blob().then(blob => {
const image = document.createElement('img');
image.src = URL.createObjectURL(blob);
image.addEventListener('load', () => {
const t1 = performance.now();
console.log('Image loaded in: ' + (t1 - t0) + ' ms.');
});
container.append(image);
});
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment