37 likes
·
3.3K reads
6 comments
Great content. Welcome to Hashnode! :)
Thank you for this great article!
The only question about this part: "So, if you have transform: translateZ(0) in your codebase to move the render on a GPU, it doesn't work in such a way. It's a misconception."
Could you please share the source you've get the info?
In lots of articles is told that this 'hack' really improves optimizations.
translateZ(0) doesn't move your render to GPU. The whole "composite" layer can be executed on GPU by modern browsers.
The reason, why translateZ(0) is usually recommended to resolve some rendering issues, is because it "moves" your elements to a separate layer in browser. You can see the layers model in your browser by opening "Layers" tab:
Even though this method solves some rendering issues, many Layers might cause performance issues in your app.
If you want to learn more here is an article (rus) about that: habr.com/en/companies/odnoklassniki/articl…
Nik Thank you very much for the explanation and the article!
Updated images in the article. By accident got them removed before publishing the article 🙈
Thanks for this comprehensive article! Can I ask a question? If we mutate and read the DOM separately twice like your example, does it pause the task and run the layout step before give the result back?