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.

Performance degradation for scalar pane caused by forced reflows in Plottable.js

See original GitHub issue

If I have a few dozen runs visible in the Scalars pane and one or more plots are maximized, Chromium (Version 58.0.3029.110 Built on Ubuntu , running on Ubuntu 14.04 (64-bit)) slows to a crawl within a few minutes after a refresh; developer tools points to plottable.js:14262 (which finds some kind of bounding box, perhaps related to the legend tooltip) as causing a “forced reflow.” Since that executes 20x per frame and can take up to 250ms, I’m consistently seeing a frame rate of ~0.2fps. If I replace

try {
    bbox = element.node().getBBox();
}
catch (err) {
    bbox = {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    };
}
return bbox;

with

return {x: 0, y:0, width:0, height:0};

the only difference I can perceive is that everything is faster (but presumably there’s something broken behind the scenes).

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jekbradburycommented, Jul 7, 2017

I’ll rebuild the docker image I’m using (didn’t realize https://hub.docker.com/r/alband/crayon/ hadn’t been pushed in 5 months) and I imagine that’ll at least make things better. I can’t get over how incredibly responsive you all are…thanks so much for your help!

0reactions
wchargincommented, Jul 8, 2017

Great—thanks for confirming! No apology necessary; please come again. 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is a Forced Reflow and How to Solve it? - Yonatan Kra
Force reflow (or Layout Reflow) is a major performance bottleneck. It happens when a measurement of the DOM happens after a DOM mutation....
Read more >
Changelog - Highcharts
Forced disabling of startOnTick and endOnTick when navigator is enabled in Highstock. Closes #1090. Exposing the reflow method on chart objects. Added no-data- ......
Read more >
devtools warning - forced reflow is a likely performance ...
Forced synchronous layouts AKA forced reflows occur when a page sets a CSS property that affects the layout of the element, and then...
Read more >
HTML5 for .NET Developers - doc-developpement-durable.org
object to pass data with drag-and-drop events 193 □. Building the ... ment in JavaScript engine performance over the last few years, across...
Read more >
rate-dependent locomotion and intrusion phenomena in
7.2.1 Dynamic Deformable Structures in Forced Granular Interactions . . 183. 7.2.2 Machine Learning for Robot Locomotion in Frictional Fluids . . ....
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