requestAnimationFrame in enable.js not needed
See original GitHub issueIn cornerstone/src/enable.js we have:
https://github.com/cornerstonejs/cornerstone/blob/master/src/enable.js#L77-#L94
function draw (timestamp) {
if (enabledElement.canvas === undefined) {
return;
}
const eventDetails = {
enabledElement,
timestamp
};
triggerEvent(enabledElement.element, EVENTS.PRE_RENDER, eventDetails);
if (enabledElement.needsRedraw && hasImageOrLayers(enabledElement)) {
drawImageSync(enabledElement, enabledElement.invalid);
}
requestAnimationFrame(draw);
}
That is draw
keeps being called 60 time a sec
The mechanism of setting needsRedraw
to true and waiting for the draw callback to catch it is very inefficient and unnecessary. since needsRedraw
is only set to true in two places (invalidate.js and drawImage.js) it would be much more efficient to add a drawAsyncImage like this:
function hasImageOrLayers(enabledElement) {
return enabledElement.image !== undefined || enabledElement.layers.length > 0;
}
export function drawImageAsync(enabledElement) {
const eventDetails = {
enabledElement,
timestamp: performance.now()
};
triggerEvent(enabledElement.element, 'cornerstoneprerender', eventDetails);
window.setTimeout(() => {
if (enabledElement.needsRedraw && hasImageOrLayers(enabledElement)) {
drawImageSync(enabledElement, enabledElement.invalid);
}
}, 1000 / 60);
}
and simply call it in these two places which will execute it only once and only when needed. needsRedraw
is not needed anymore and can be removed.
I have this change working here without issues and stopped various slowdowns/freezes issues I had.
Please let me know your thoughts.
Thanks!
Issue Analytics
- State:
- Created 5 years ago
- Comments:20 (15 by maintainers)
Top Results From Across the Web
Window.requestAnimationFrame() - Web APIs | MDN
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a ...
Read more >"requestAnimationFrame" method is not working
Use something like this: var ascent = 20; var limit = 5000; var start = null; function fly(timestamp) { if (start === null)...
Read more >Stop Using setInterval. Use requestAnimationFrame
This is bad. setInterval has tons of issues when used in this way which cause huge performance problems on top of ruining your...
Read more >Understanding JavaScript's requestAnimationFrame() method ...
requestAnimationFrame () is a JavaScript method for creating smoother, less resource intensive JavaScript animations.
Read more >Using requestAnimationFrame - CSS-Tricks
There used to be just one way to do a timed loop in JavaScript: setInterval() . If you needed to repeat something pretty...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We have a fix and have been working with it for over a year. I can submit a PR if it helps you but I doubt it will get merged, it seems the cornerstone team is reluctant to change this even though as you say it can totally cripple cornerstone.
@IbrahimCSAE since the PR is not merged you will have to patch your code manually using my PR here https://github.com/cornerstonejs/cornerstone/pull/374