title: Why inline JavaScript is bad?
body: <p>It is always recommended to avoid inline Javascript codes by putting all codes in a <code>JS</code> file, which is included in all pages. I wonder, if this does not cause performance problem in heavy pages.</p>
  
  <p>For example, imagine that we have tens of functions like this</p>
  
  <pre><code>function function1(element){
  var el=document.getElementsByClassName(element);
  var size=el.length;
  if(size==0) return;
  for(i=0;i&lt;size;i++){
  // the process
  }
  }
  </code></pre>
  
  <p>on every page, we need to run the functions to know if there are corresponding elements in the HTML or not.</p>
  
  <pre><code>window.onload = function(){
  function1('a');
  ....
  function26('z');
  };
  </code></pre>
  
  <p>but if keeping all functions in an external <code>JS</code> file, and calling functions through inline <code>JavaScript</code>, we can call only the functions, which are required in the present page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  window.onload = function(){
  function6('f');
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><em><strong>Doesn't it beneficial from performance point of view to call functions via inline <code>Javascript</code> (which is of course not best practice) to avoid call of lots of functions, which are not needed in a page?</em></strong></p>
  
  <p>Of course, this is not limited to functions only, as we have lots of <code>addEventListener</code>s for the entire website, which are fired on each and every page, where they are not needed.</p>