In my profile, here's how the ~1s long layout-heavy section breaks down:
1) The first 392ms is inside of many calls to a JS function called "didInsertElement", which calls into a function called "calculateTargetWidth", which causes a layout flush. So, this is the canonical painful "modify the dom and then immediately flush layout" thrashing behavior. This section of the profile includes ~46 layout flushes, which are each between 4ms and 11ms long. Each reflow's "First invalidated" tooltip seems to show it's from new content being appended ("ContentAppended" is in the stack).
2) Then we have a fairly long (40ms) restyle.
3) After that, we spend 404ms in many calls to a function called "_getEllipsisWidth" which also flushes layout. (I'm guessing the "ellipsis" here is a "..." menu-icon in the top right of each job-tile, which is `<li-icon ... type="ellipsis-horizontal-icon">` in their DOM. This triggers another ~46 layout flushes, which are each between 4ms and 15ms long. Most of these reflows' "First invalidated" tooltips seem to show they're from a node removal ("ContentRemoved" and "Node.removeChild" in the backtrace)
Bug 1519497 Comment 4 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
In my profile, here's how the ~1s long layout-heavy section breaks down:
1) The first 392ms is inside of many calls to a JS function called "didInsertElement", which calls into a function called "calculateTargetWidth", which causes a layout flush. So, this is the canonical painful "modify the dom and then immediately flush layout" thrashing behavior. This section of the profile includes ~46 layout flushes, which are each between 4ms and 11ms long. Each reflow's "First invalidated" tooltip seems to show it's from new content being appended ("ContentAppended" is in the stack).
2) Then we have a fairly long (40ms) restyle.
3) After that, we spend 404ms in many calls to a function called "_getEllipsisWidth" which also flushes layout. (I'm guessing the "ellipsis" here is a "..." menu-icon in the top right of each job-tile, which is `<li-icon ... type="ellipsis-horizontal-icon">` in their DOM. This triggers another ~46 layout flushes, which are each between 4ms and 15ms long. Most of these reflows' "First invalidated" tooltips seem to show that layout was dirty in part due to a node removal ("ContentRemoved" and "Node.removeChild" in the backtrace)