Combine Javascript

JavaScript
1

Hi there,

I am trying to optimize a website’s performance and one of the suggestions is to combine some of the javascript code.

I’m a newbie to javascript so I wonder if I could get some advice on this…

Here is the current javascript code from the page’s <head>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20068031-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

<script> 
            function switchContent(obj) { 
                obj = (!obj) ? 'today' : obj; 

                var contentDivs = document.getElementsByTagName('div'); 
                for (i=0; i<contentDivs.length; i++) { 
                    if (contentDivs[i].id && contentDivs[i].id.indexOf('today' && 'tomorrow' && 'yesterday') !== -1) { 
                        contentDivs[i].className = 'hide'; 
                    } 
                } 
                document.getElementById(obj).className = ''; 
            } 

            function checkTab() { 
                $('a').each(function() { 
                    $(this).click(function() { 
                        tab = $(this).attr('href').split('#'); 
                        switchContent(tab[1]); 
                        $('.current').attr('class',''); 
                        $(this).attr('class','current'); 
                    }); 
                }); 
            } 

            window.onload = function() { 
                checkTab(); 
            }; 
       
        </script>

Would a JS Guru please help me combine these into 1 script?

Many thanks.

2

To combine just dump all of those scripts into one file and link to it from your head.

So the combined script file would look like this:

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20068031-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
sfHover = function() {
    var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

            function switchContent(obj) { 
                obj = (!obj) ? 'today' : obj; 
 
                var contentDivs = document.getElementsByTagName('div'); 
                for (i=0; i<contentDivs.length; i++) { 
                    if (contentDivs[i].id && contentDivs[i].id.indexOf('today' && 'tomorrow' && 'yesterday') !== -1) { 
                        contentDivs[i].className = 'hide'; 
                    } 
                } 
                document.getElementById(obj).className = ''; 
            } 
 
            function checkTab() { 
                $('a').each(function() { 
                    $(this).click(function() { 
                        tab = $(this).attr('href').split('#'); 
                        switchContent(tab[1]); 
                        $('.current').attr('class',''); 
                        $(this).attr('class','current'); 
                    }); 
                }); 
            } 
 
            window.onload = function() { 
                checkTab(); 
            };

And you’d use something like this to include it:

<script src="/your-scripts-folder/combined.min.js"></script>

I’ve not included jQuery in your combined script file because it should be separate for easier upgrading. But why are you including jQuery twice in your head anyway?

3

Thanks for that :slight_smile:

I didn’t realise JQuery was in there twice… that was unintentional…

I’ll put them all in one file then and see how I get on :slight_smile:

Thanks!

4

You can copy and paste the jQuery source into the the single file as well. There are some libraries out there such as assetic that make combining all assets easy, without maintainability disadvantages that might be worth looking into. The only thing you need to watch out for with third part libraries is image references. If image references reside inside the source, you will need to change those. Though I haven’t run into that issue really besides for CSS aggregation. CSS aggregation unlike JavaScript can become a little tricky due to image references.