Google PageSpeed Insights with Multiple JavaScript Files

Question

I'm optimizing my site based on Google's PageSpeed Insights. It recommends that I "Remove Render-Blocking JavaScript" for several files (names simplified for example's sake):

<script src="js/1.js" type="text/javascript"></script>
<script src="js/2.js" type="text/javascript"></script>
<script src="js/3.js" type="text/javascript"></script>

I'm trying Patrick Sexton's "Defer Loading Javascript" approach which only defers one file (defer.js):

<script type="text/javascript">
  function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

My question is, how can this approach be modified to include multiple files (i.e. 1.js, 2.js, 3.js)?

Answer 1

<script type="text/javascript">
    function downloadJSAtOnload() {
        var links = ["js/1.js", "js/2.js", "js/3.js"],
            headElement = document.getElementsByTagName("head")[0],
            linkElement, i;
        for (i = 0; i < links.length; i++) {
            linkElement = document.createElement("script");
            linkElement.src = links[i];
            headElement.appendChild(linkElement);
        }
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>