Improved scroll performance

Start rendering in Devtools, swipe down a little scroll bar, and stop scrolling.

In the results, note that the frames is always on the 30ftps line, even the wood is very close to the 69ftps line (in fact, the frame is executed too slowly so that the 60ftps line is not shown on the graph)

Open a frame can see after the Scrol event is a function callback, and many separate layout events, each detached layout event has a small red triangle, red small triangle is forced synchronous layout (a forced synchronous Layout ) execution of the tag.

Note

• The forced synchronous layout occurs when the browser runs layout in a script, forcing the recalculation of the style, so it needs to run layout again. This typically occurs inside the loop, as shown in the following code, looping through a series of div and re-setting their width properties to force synchronous layout.

var newwidth = Container.offsetwidth;divs.foreach (function(elem, index, arr) {    = newwidth;})

There are a lot of CSS properties that can cause layout to be triggered, and view the properties that will trigger layout: CSS Triggers.

To view the details of the layout event, you can see that the forced synchronization layout reminder is triggered by the Colorizeandscalestories function in the app.js.

Let's check the function

functioncolorizeandscalestories () {varstoryelements = Document.queryselectorall ('. Story ')); //It does seem awfully broad to  //colors every time!   for(vars = 0; s < storyelements.length; s++) {    varStory =Storyelements[s]; varScore = Story.queryselector ('. Story__score ')); vartitle = Story.queryselector ('. Story__title ')); //Base the scale on the y position of the score.    varHeight =Main.offsetheight; varMainposition =Main.getboundingclientrect (); varScorelocation = Score.getboundingclientrect (). Top-Document.body.getBoundingClientRect (). Top; varScale = Math.min (1, 1-(0.05 * (scoreLocation-170)/height)); varopacity = Math.min (1, 1-(0.5 * (scoreLocation-170)/height)); Score.style.width= (Scale * +) + ' px '; Score.style.height= (Scale * +) + ' px '; Score.style.lineHeight= (Scale * +) + ' px '; //Now the figure out how wide it was and use this to saturate it.Scorelocation =Score.getboundingclientrect (); varSaturation = ((scorelocation.width-38)/2)); Score.style.backgroundColor= ' HSL, ' + saturation + '%, 50% '; Title.style.opacity=opacity; }}

Note that height,width and line-height are computed, and all of these attributes will cause layout to be triggered.

The transparency attribute is also set-but the transparency property does not trigger layout--this line of code applies a new style, so it triggers the recalculation of the style and layout.

The above two techniques used in the main loop of a function will cause forced synchronization of layout problems.

Although we can replace JS with CSS style modification, we'd better get rid of these effects altogether: the simplest is-sometimes the best code is to delete the code.

Let's get rid of all the code above and look at it again, you can see the 60ftps, the performance is much better.

Additional layout and mandatory sync layout reminders are not present, and the speed of the frame execution is great!

Improved scroll performance