question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent layout trashing in event (un)rendering

See original GitHub issue

This is technically also an issue in FullCalendar, but it’s more noticeably in the scheduler due to the larger number of elements (it is mentioned in this issue)

When the number of events increase, the time it takes to (un)render these events also greatly increases. One of the big factors in this is the recalculation of the layout (This is called layout trashing) as can be seen in this image. (removeEvents called on 2238 events takes 1107ms and takes 344ms of layout recalculations)

screen shot 2018-01-15 at 09 46 04

One way to possibly prevent this is to use something like fastdom, which batches dom reads and writes as is explained here.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
arshawcommented, Jul 16, 2020

@MartijnWelker, this is most likely much better in v5, though I have not verified

0reactions
arshawcommented, Jan 31, 2018

we could potential hardcode the inline/relative concepts, or make them settings that the caller can “hardcode”

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoid large, complex layouts and layout thrashing - web.dev
Avoid forced synchronous layouts and layout thrashing; read style values then make style changes.
Read more >
Layout Thrashing and Forced Reflows - Web Performance Tips
You will want to avoid Layout Thrashing in all cases. There are a few well known general strategies for preventing it! Batching Reads...
Read more >
Minimising Layout and Layout thrashing for 60 FPS
In this article, we will be looking at a few ways by which Layout / reflow events might occur, why they are bad,...
Read more >
How To Detect And Prevent Layout Reflow - INTEGU
When trying to detect or look for the source of a reflow, we have two choices within the Chrome DevTools utilities: “Performance” and...
Read more >
Ludicrously Fast Page Loads - A Guide for Full-Stack Devs
The rendering events you see later on occur once the CSS is ... Layout thrashing is usually going to be caused by Javascript...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found