![]() One that has window scroll event that logs scrollY and the other that doesn't have js files. I ran two tests by using the Performance Tab. The page is very simple, has 2000 words, so that there's a scrollbar to test. 150 and it doesn't fire Layout calculation. I tested scrollY inside window scroll event on Chrome Version. ![]() Important: do not write to the DOM in regular and do not read from the DOM in animation frame. So to be safe, make sure you only read from the DOM in regular and only write to the DOM in animation frame. If you change something in the DOM before paint and ask the DOM about some measurement after paint it does not need to calculate, because it already knows. If you change something in the DOM and then ask the DOM about some measurement, it will calculate it for you. All code is not in requestAnimationFrame() will execute in regular. With javascript we can execute code in 2 places: regular and animation frame. This means that if something has changed since the last calculation, they will calculate again to be sure.Ī cycle in the browser consists of a few different sections (they go in circles, so me starting with one does not have any meaning) _ paint _ regular _ animation frame _ paint _. Outbrain is forcing layout repeatedly, probably in a The basic idea is that all of those methods will ensure they give the correct values. Read your metrics at the begininng of the frame (very very start of rAF, scroll handler, etc), when the numbers are still identical to the last time layout was done. Batch your writes & reads to the DOM (via FastDOM or a virtual DOM implementation).You may be surprised to see how often your app code and library code hits this. Use DevTools Performance Panel to see where this happens.for loops that force layout & change the DOM are the worst, avoid them.What should you do about all this? Well, the More on forced layout section below covers everything in more detail, but the short version is:. ![]() Their costs are very dependent on the content/situation, but typically both operations are similar in cost. So forced layout triggers both operations.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |