75 likes
·
16.2K reads
16 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!
Great article with a super detailed explanation. I have to sign up to send a like to your content. :))
Great article!! I'd like to translate it and share it on another platform, with the original link included. May I have your permission?
Hey Jacob, sorry, missed your comment.
yes, sure, go ahead
Wow! Such a detailed blog. Thanks for writing :))
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?
It might not run "The whole layout", as layout is quite complicated process which has many steps, it worth to make a separate article.
What can happen: the layout of the changes code has done + recalculate all "shifting" in the elements.
The simplest way to see it:
- Open you browser dev tools
- Go to Performance Tab
- Start recording
- Open a website (or make some actions on opened page)
- Stop recording
- Open "Event log"
Scroll to function call which makes Layerise step. Example:
Select it on a timeframe to see the calculations
Thanks for this great article! Can I ask a question? if TaskQueue only has TaskA takes 4ms, TaskA call setTimeout(FuncA, 0), next step is RenderQueue or FuncA?
The correct answer is that behaviour is not determined. (as we should know when render happens the last time).
e.g. if the render happens right before TaskA, then there is a high probability, that FuncA will be executed before.
Didn't read it through yet, but someone gave me the link to #heading-what-are-microtasks and the first affirmation in this paragraph is not correct, you can queue microtasks yourself with the queueMicrotask method, and specs can queue microtasks as they will, for instance HTML does queue a microtask to update the image data of <img>, so that you can set the .crossOrigin or loading attributes after the src one, in the same task, without triggering useless network requests.
i used hashnode on coinbase wallet to connect to Tether wallet now i am getting SSL error can you help how to fix it. THanks