Skip to content

Instantly share code, notes, and snippets.

@martynchamberlin
Last active June 26, 2017 15:43
Show Gist options
  • Save martynchamberlin/2ea631680c5a4e652bf5eca6bc24603b to your computer and use it in GitHub Desktop.
Save martynchamberlin/2ea631680c5a4e652bf5eca6bc24603b to your computer and use it in GitHub Desktop.
Does Vue Slow down initial page render?

Take these two DOMs:

<div id="vue">
  <custom-component>
    <div>
      <p>Here's a static output of how the custom component would render></p>
     </div>
  </custom-component>
</div>
<div id="vue">
  <custom-component>
  </custom-component>
</div>

<div id="deleteMeWhenVueNavBoots">
  <p>Here's a static output of how the custom component would render></p>
</div>

The idea is that you want a DOM that looks initially exactly like what it will when Vue boots up. The question is, which of these two DOMs is more performant? Using Chromse's Performance tab, this is what I found:

Average of 3 page loads with Twig outside the Vue component:

  • 12.3ms Loading
  • 4743ms Scripting
  • 18.03ms Rendering
  • 4.133ms Painting
  • 145.93ms Other

Average of 3 page loads with Twig inside the Vue component:

  • 11.363ms Loading
  • 437.33ms Scripting
  • 23.23ms Rendering
  • 3.33ms Painting
  • 178.43ms Other

Seems like it makes zero difference. Vue doesn't parse the DOM in either case. The second DOM has this weakness: you have to have this code inside your CustomComponent:

    mounted() {
      document.getElementById('deleteMeWhenVueNavBoots').remove();
    },

In my testing this perfectly coincides so that there is always only one version of the elment, but it's still a nuissance and feels like a hack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment