Many Flex-cols with max-height

Benchmark created by Kenneth on November 20, 2015

Preparation HTML

<style>
.flex-column {
  display: flex;
  flex-direction: column;
}
.max-height{
  max-height:100%;
}
</style>
  <!-- Removing even one of these flex-columns has a significant effect -->
  <div class="flex-column">
    <div class="flex-column" >
      <div class="flex-column">
        <div class="flex-column">
          <div class="flex-column">
            <div class="flex-column">
              <div class="flex-column">
                <div class="flex-column">
                  <div class="flex-column">
                    <div class="flex-column max-height"> <!-- it doesn't matter which flex-column has the max-height -->
                      <div class="flex-column">
                        <div class="flex-column">
                          <div class="flex-column">
                            <div class="flex-column">
                              <div class="flex-column">
                                <div class="flex-column">
                                  <div class="flex-column">
                                    <div class="flex-column">
                                      <div class="flex-column" id="replacer">
                                        <!-- Each div here adds more time -->
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Setup

function replaceHTMLVerySlowly() {
        console.time("timer");
        var el=document.getElementById('replacer');
        el.innerHTML = el.innerHTML;
        el.clientHeight;
        console.timeEnd("timer");
      }

Test runner

  replaceHTMLVerySlowly();
 

  replaceHTMLVerySlowly();
 

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Kenneth on November 20, 2015
• Revision 3: published by Paul on November 20, 2015