1425978 - netmonitor reflows are slow

Status: RESOLVED DUPLICATE of bug 1487906

(DevTools :: Netmonitor, enhancement, P3)

Description

[Alexandre Poirot [:ochameau]]

Bug 1421926 highlighted that simple changes to CSS have a significative impact on netmonitor performances. After some investigation, it looks like that's because the netmonitor reflows are slow. It is slow for various reasons.
In bug 1421926, it was slow because we were setting table cells width in percentages. Table layout is significantly faster when setting width with fixed size in pixels.

But reflows are still slow and can easily be done faster via other simplifications to the netmonitor layout.
For example, simplifying the <table> DOM hierarchy makes the netmonitor 5% faster:
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=3e211f9bc9f945b884489c0bb4c69a1843300278&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&showOnlyImportant=1&framework=1&selectedTimeRange=172800

We should reflow the whole netmonitor DOM tree and the particular CSS involved in its layout. netmonitor uses a complex DOM hiearchy with complex CSS around tables.

.requests-list-table
  display: table;
  position: relative;
  width: 100%;
  height: 100%;

  .requests-list-contents
    display: table-row-group;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    
    .requests-list-headers-wrapper
      display: flex; // <== this is suspicious to have a flex item in middle
                            of a table layout

      .requests-list-headers
        display: table-header-group;
        height: 24px;
        padding: 0;
        width: 100%;

        #requests-list-*-header-box (one per column)
          display: table-cell;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          max-width: 50px;
          min-width: 50px;
          + styles specific to each column

    .request-list-item (one per request)
      position: relative;
      display: table-row;
      height: 24px;
      
      .request-list-column (one per column)
        display: table-cell;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        max-width: 50px;
        min-width: 50px;
        + styles specific to each column

        + some children nodes depending on each column

Unfortunately, there is no tool that I know which would help knowing which particular CSS or DOM element causes reflow overhead.

Comment 1

[Alexandre Poirot [:ochameau]]

I tried many experiments to simplify DOM and/or CSS, but DAMP reports no significant improvement.

# Force requests-list-headers-wrapper display to block (instead of flex)
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=7ac23cb5bbeb87c19df9e27230084f67efdb7a86&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmon&framework=1&selectedTimeRange=172800
https://hg.mozilla.org/try/rev/ebfc1880f7cf844be4fc4d90ef71ad6f2b198c56
  no change, may be very small change to requestsFinished 0.1-0.5%

# Remove position relative from request-list-item
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=7256c753fe08eef046dd991b0083ad6e00bc7128&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmon&framework=1&selectedTimeRange=172800
https://hg.mozilla.org/try/rev/eb1651f33fec9a8ab8cecfcbf7b3ac5ca55c8e58
  no change, may be small change to close

# Get rid of overflow:hidden on request-list-container
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=3cadb97a344a501092df90c9dea08cb176c9d47b&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmon&framework=1&selectedTimeRange=172800
  no change
  
# Make netmonitor toolbar use display:block (instead of flex)
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=6f2232c87b1dce30e2c4e60d7acd662221c1637f&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmo&framework=1&selectedTimeRange=172800
https://hg.mozilla.org/try/rev/5e91a56bd7a77e2ffdf1a07a222d80f776377132
  no change, may be small change to requestsFinished 1-2%
  
# Remove display:flex from top level DOM elements
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=0374bdd6a3dc765244e70a25dc5a24841d663f53&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmoni&framework=1&selectedTimeRange=172800
https://hg.mozilla.org/try/rev/e8128a8a02248a812b625f37ef2802b89f4effdc
  no change, may be a very small change to requestsFinished 0.3-0.7%

# Simplify headers buttons DOM by using only a text node.
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=7cf9013f7199f97b21b06ea5066074ecfae7ec21&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmon&framework=1&selectedTimeRange=172800
https://hg.mozilla.org/try/rev/ed567340e74f8836ee3680d10bf454a7b72bd7d8
  no change, may be a 0.3-0.7% improvement to requestsFinished

Comment 2

[Alexandre Poirot [:ochameau]]

# Do not use flex in the toolbar
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=cd48b0dd8aa59db1d051e2fcd05ea8e9442c728f&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmo&framework=1&selectedTimeRange=172800
  no change.

# Remove the toplevel splitbox used for detail panels
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=mozilla-central&newProject=try&newRevision=7769b17d686ea13376e4c8604fada74115447d65&originalSignature=edaec66500db21d37602c99daa61ac983f21a6ac&newSignature=edaec66500db21d37602c99daa61ac983f21a6ac&filter=netmon&framework=1&selectedTimeRange=172800
  no change.

Comment 3

[:Harald Kirschner :digitarald]

Reflow is less of an issue, while displaylist remains a hot path: https://perfht.ml/2V28GGB . Closing this, as the resizable header work considerable changed the layout.