Is it useful to use requestanimationframe when javascript updates a class?
up vote
1
down vote
favorite
Context
I learnt that when I want to keep fluidity on my UI, instead of:
document.querySelector('#div').style.width = '100px';
I can use:
requestAnimationFrame(function()
document.querySelector('#div').style.width = '100px';
);
Question
Is it useful to do the same thing for a class change? I mean is this:
requestAnimationFrame(function()
document.querySelector('#div').classList.add('big');
);
useful to keep a good UI fluidity?
Note
I have also learned, with the video of Jake about the Javascript event loop, that CSS is applied on a different thread than Javascript, hence my question because since it is Javascript sending the class change, does it is counted as part of the JS event loop or the CSS event loop?
javascript css requestanimationframe
asked Nov 9 at 17:59
Anwar
2,1801340
add a comment |
up vote
1
down vote
favorite
Context
I learnt that when I want to keep fluidity on my UI, instead of:
document.querySelector('#div').style.width = '100px';
I can use:
requestAnimationFrame(function()
document.querySelector('#div').style.width = '100px';
);
Question
Is it useful to do the same thing for a class change? I mean is this:
requestAnimationFrame(function()
document.querySelector('#div').classList.add('big');
);
useful to keep a good UI fluidity?
Note
I have also learned, with the video of Jake about the Javascript event loop, that CSS is applied on a different thread than Javascript, hence my question because since it is Javascript sending the class change, does it is counted as part of the JS event loop or the CSS event loop?
javascript css requestanimationframe
asked Nov 9 at 17:59
Anwar
2,1801340
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
Context
I learnt that when I want to keep fluidity on my UI, instead of:
document.querySelector('#div').style.width = '100px';
I can use:
requestAnimationFrame(function()
document.querySelector('#div').style.width = '100px';
);
Question
Is it useful to do the same thing for a class change? I mean is this:
requestAnimationFrame(function()
document.querySelector('#div').classList.add('big');
);
useful to keep a good UI fluidity?
Note
I have also learned, with the video of Jake about the Javascript event loop, that CSS is applied on a different thread than Javascript, hence my question because since it is Javascript sending the class change, does it is counted as part of the JS event loop or the CSS event loop?
javascript css requestanimationframe
asked Nov 9 at 17:59
Anwar
2,1801340
Context
I learnt that when I want to keep fluidity on my UI, instead of:
document.querySelector('#div').style.width = '100px';
I can use:
requestAnimationFrame(function()
document.querySelector('#div').style.width = '100px';
);
Question
Is it useful to do the same thing for a class change? I mean is this:
requestAnimationFrame(function()
document.querySelector('#div').classList.add('big');
);
useful to keep a good UI fluidity?
Note
I have also learned, with the video of Jake about the Javascript event loop, that CSS is applied on a different thread than Javascript, hence my question because since it is Javascript sending the class change, does it is counted as part of the JS event loop or the CSS event loop?
javascript css requestanimationframe
javascript css requestanimationframe
asked Nov 9 at 17:59
Anwar
2,1801340
asked Nov 9 at 17:59
Anwar
2,1801340
edited 16 hours ago
asked Nov 9 at 17:59
Anwar
2,1801340
asked Nov 9 at 17:59
Anwar
2,1801340
asked Nov 9 at 17:59
Anwar
2,1801340
2,1801340
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago
add a comment |
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I would say that you shouldn't do this unless you know why you want it.
Your "fluidity" introduced by RAF is actually caused by moving the change from "do it now" to "do it when you're drawing next".
Image credit, as well as a good resource for learning more.
answered yesterday
Graham P Heath
4,00922039
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I would say that you shouldn't do this unless you know why you want it.
Your "fluidity" introduced by RAF is actually caused by moving the change from "do it now" to "do it when you're drawing next".
Image credit, as well as a good resource for learning more.
answered yesterday
Graham P Heath
4,00922039
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
add a comment |
up vote
0
down vote
I would say that you shouldn't do this unless you know why you want it.
Your "fluidity" introduced by RAF is actually caused by moving the change from "do it now" to "do it when you're drawing next".
Image credit, as well as a good resource for learning more.
answered yesterday
Graham P Heath
4,00922039
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
add a comment |
up vote
0
down vote
up vote
0
down vote
I would say that you shouldn't do this unless you know why you want it.
Your "fluidity" introduced by RAF is actually caused by moving the change from "do it now" to "do it when you're drawing next".
Image credit, as well as a good resource for learning more.
answered yesterday
Graham P Heath
4,00922039
I would say that you shouldn't do this unless you know why you want it.
Your "fluidity" introduced by RAF is actually caused by moving the change from "do it now" to "do it when you're drawing next".
Image credit, as well as a good resource for learning more.
answered yesterday
Graham P Heath
4,00922039
answered yesterday
Graham P Heath
4,00922039
answered yesterday
Graham P Heath
4,00922039
answered yesterday
Graham P Heath
4,00922039
4,00922039
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
add a comment |
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
I edited my question to clarify my question. So do you confirm asking the browser to wait for applying a class is not necessary?
– Anwar
16 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
It depends on how often you're doing it and if it happens during repaints or not.
– Graham P Heath
8 hours ago
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231064%2fis-it-useful-to-use-requestanimationframe-when-javascript-updates-a-class%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Where did you learnt that? Sounds like some info has been missed somewhere. FWIW, doing it in a rAF callback or not will be about the same, what really matters is that you don't cause a reflow with your script after you change the CSSOM, so that this reflow is done only once per frame at most. Now, where rAF can be useful, is when you do this change in reaction to an event that can fire several times per frame. rAF can then be used as a mean to control a debounce function, making sure that a single callback will get called per frame.
– Kaiido
14 hours ago
For the record, I simplified my issue, I am actually on an SVG engine that apply transformations over thousands of elements in a raw, and without rAF I can clearly see the difference (I go from 15 FPS on my smartphone to nearly 60). What I learned can be found on this video: Jake Archibald: In The Loop - JSConf.Asia 2018.
– Anwar
13 hours ago
so you are in an animation? Please explain better your use case. Once again, rAF will just delay the operation until just before the next screen refresh. There is no reason it would perform any better than at a deterministic moment (dunno from where the main call is made..). But yes, if you are doing an animation then by all means use rAF as the way to drive it. No other method is able to ensure only one call per screen refresh.
– Kaiido
3 hours ago