title: Reduce page display flickering when using many flexbox, image icons, fonts
body: <p>I have a HTML page with many uses of <code>flexbox</code> and a few icons <code>div</code> with CSS <code>background-image</code>.</p>
  <p>When opening the HTML page (even locally, without using networking) in the browser, there is some little flickering (probably less than 100 milliseconds, but still):</p>
  <ul>
  <li><p>some items move a few pixels (because of <code>flexbox</code> centering)</p>
  </li>
  <li><p>some icons take a few milliseconds to load</p>
  </li>
  <li><p>fonts take a few dozens of milliseconds to load, so we can see the content displayed with default font (maybe &lt; 50 ms) and then with the right font (<code>@font-face</code>...)</p>
  </li>
  </ul>
  <p><strong>How to ask the browser to only display/show a HTML element such as a toolbar <code>&lt;div class=&quot;header-toolbar&quot;&gt;</code> only when it's ready to be 100% painted in a definitive way (without further moving/flickering)?</strong></p>