I noticed strange behavior of the browser page when it is in an inactive state, for example, while broadcasting a separate browser window via Google Meet.
Below there are 2 simple html pages, they are displayed for 5 seconds and switch to the adjacent page. During these 5 seconds, the data from
performance.now() is rendered in html. If the browser window is active, then the data is updated, and if the window is minimized, then
performance.now() is not displayed
video demo
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>index.html LOADED</h3>
<h3 id="test"></h3>
<script>
setTimeout(()=>{
console.log("Change location")
location.href = "./index2.html"
}, 5000)
function step(timestamp) {
document.querySelector('#test').textContent = performance.now()
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
</script>
</body>
</html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>index.html2 LOADED</h3>
<h3 id="test"></h3>
<script>
setTimeout(()=>{
console.log("Change location")
location.href = "./index.html"
}, 5000)
function step(timestamp) {
document.querySelector('#test').textContent = performance.now()
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
</script>
</body>
</html>