Don’t attach tooltips to document.body

Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>. Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate …


This content originally appeared on Bram.us and was authored by Bramus!

Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>.

Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate Style” being called at the end of mouseover event call stack which takes a lot of time. noticed the tooltip performance was inversely proportional to number of DOM nodes currently in document.

Don’t attach tooltips to document.body

When going for Pure CSS Tooltips, you won’t run into this problem ?


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-09-13T19:09:43+00:00) Don’t attach tooltips to document.body. Retrieved from https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/

MLA
" » Don’t attach tooltips to document.body." Bramus! | Sciencx - Monday September 13, 2021, https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/
HARVARD
Bramus! | Sciencx Monday September 13, 2021 » Don’t attach tooltips to document.body., viewed ,<https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/>
VANCOUVER
Bramus! | Sciencx - » Don’t attach tooltips to document.body. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/
CHICAGO
" » Don’t attach tooltips to document.body." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/
IEEE
" » Don’t attach tooltips to document.body." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/. [Accessed: ]
rf:citation
» Don’t attach tooltips to document.body | Bramus! | Sciencx | https://www.scien.cx/2021/09/13/dont-attach-tooltips-to-document-body-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.