title: Loading 2000 characters text inside a .js versus loading in the HTML
body: <p>I have a website with the typical footer "About Me", "About this site", ... and when the user clicks any of those, a modal/popup is displayed and its innerHTML set via JavaScript</p>
  
  <pre><code>var aboutMe = "I am Foo and I like ..."; // 500 characters;
  var aboutTheSite = "This site is for ..."; // 500 characters;
  var cookiePolicy = "This site uses cookies ..."; // 500 characters;
  // ...
  // ...
  </code></pre>
  
  <p>The alternative for doing this is to create some tags and append that text</p>
  
  <pre><code>&lt;div id='aboutMeContent'&gt;I am Foo and I like ... &lt;/div&gt;
  &lt;!-- ... .... more --&gt;
  </code></pre>
  
  <p>I didn't do the second option because I like to keep my source code really clean (<a href="http://YouTubeGo.net" rel="nofollow noreferrer">YouTubeGo.net</a>). But I am a bit worried about this worsening the performance of the site. All the JavaScript is minimized in a 30K file, but without <code>aboutMe</code>, <code>aboutThisSite</code>... it would be 20K, though those 10K would be loaded inside the <code>.html</code>.</p>
  
  <hr>
  
  <p>The question:<br>
  <strong>Which of both options is better?<br>
  Or would it still preferable to load it using AJAX and forget about what I am doing?</strong></p>
  
  <p>And a little more technical question (I'm curious):<br>
  Does a browser load faster a JavaScript file with only <code>var foo = "fooBar";</code> and variable declarations than one with really dense code? I know from experience that it doesn't read the contents of an object or a function until it is called or requested.</p>
  
  <p>I care very much about performance time but I can't tell you what was I thinking when I implemented the first option.</p>