I have set up a special compositing layer for a div with the following unique styles:
div {
position: absolute;
height: 50px;
width: 50px;
background: #900;
top: 100px;
left: 200px;
will-change: transform;
transform: translateZ(0);
}
After that, I added an animation to it using the Web Animation API:
document.getElementById("box").animate(
[
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)' },
{ transform: 'rotate(360deg) translate3D(-50%, -50%, 0)' }
], {
duration: 500,
iterations: Infinity
}
);
As far as I can tell, this animation is now being managed by the GPU and this layer acts independently from the rest of the page layout, allowing the GPU to apply changes without computational interference.
What I am struggling to comprehend is when I run a CPU-intensive function, the animation completely halts until the function finishes executing:
function mySlowFunction(baseNumber) {
console.time('mySlowFunction');
var result = 0;
for (var i = Math.pow(baseNumber, 10); i >= 0; i--) {
result += Math.atan(i) * Math.tan(i);
};
console.timeEnd('mySlowFunction');
return result;
}
setTimeout(() => mySlowFunction(5), 3000);
Is there a way to prevent this interruption?