Hey Guys,
I would say most websites have a bit of JavaScript in their header section. I setup an experiment to see which of the following exhibits would process faster:
Exhibit A
<script type="text/javascript" src="http://cdn.green-watch.org/javascript/siteJavascript.cfm"></script>Exhibit B
<script type="text/javascript">
// <![CDATA[
var bodyHasLoaded=0; var swfObjectHasLoaded=0; var swfObjectIsLoading=0; var javascriptReady=false; var protoaculousHasLoaded=0; var myDirectory="http://"+document.domain; var myDirectory2="http://cdn.green-watch.org"; function updateBody() { } function addLoadEvent(func) { if(bodyHasLoaded==1) { func(); } else { var oldonload=window.onload; if (typeof window.onload!='function') { window.onload=func; } else { window.onload=function() { if(oldonload) { oldonload(); } func(); }; } } } function firstOnBodyLoadedEvent() { bodyHasLoaded=1; } addLoadEvent(firstOnBodyLoadedEvent); function GetXmlHttpObject(handler) { var objXMLHttp=null; if(window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if(window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); } return objXMLHttp; } function importZapatecMenuJS(onLoadFunction) { var headID=document.getElementsByTagName("head")[0]; var zpmenuNode=document.createElement('script'); zpmenuNode.type='text/javascript'; zpmenuNode.onload=function() { var myMenu=new Zapatec.Menu({theme:"/inc/barblue.css",source:"menu-items"}); var myMenuBar2=document.getElementById("noScriptMenu"); myMenuBar2.style.display="none"; var myMenuBar=document.getElementById("menu"); myMenuBar.style.display="inline"; if(onLoadFunction!='null') { onLoadFunction(); } }; zpmenuNode.onreadystatechange=function() { if(zpmenuNode.readyState=='complete'||zpmenuNode.readyState=='loaded') { var myMenu=new Zapatec.Menu({theme:"/inc/barblue.css",source:"menu-items"}); var myMenuBar2=document.getElementById("noScriptMenu"); myMenuBar2.style.display="none"; var myMenuBar=document.getElementById("menu"); myMenuBar.style.display="inline"; if(onLoadFunction!='null') { onLoadFunction(); } } }; zpmenuNode.src=myDirectory2+'/javascript/zpmenu.cfm'; headID.appendChild(zpmenuNode); } function importZapatecCalendarJS(onLoadFunction) { var headID = document.getElementsByTagName("head")[0]; var zpCalendarNode=document.createElement('script'); zpCalendarNode.type='text/javascript'; zpCalendarNode.onload=function() { if(onLoadFunction!='null') { importZapatecCalendarJS2(onLoadFunction); } }; zpCalendarNode.onreadystatechange=function() { if(zpmenuNode.readyState=='complete'||zpmenuNode.readyState=='loaded') { if(onLoadFunction!='null') { importZapatecCalendarJS2(onLoadFunction); } } }; zpCalendarNode.src=myDirectory2+'/zapatec/zpcal/src/calendar.js'; headID.appendChild(zpCalendarNode); } function importZapatecCalendarJS2(onLoadFunction) { var headID = document.getElementsByTagName("head")[0]; var zpCalendarNode2=document.createElement('script'); zpCalendarNode2.type='text/javascript'; zpCalendarNode2.onload=function() { if(onLoadFunction!='null') { onLoadFunction(); } }; zpCalendarNode2.onreadystatechange=function() { if(zpCalendarNode2.readyState=='complete'||zpCalendarNode2.readyState=='loaded') { if(onLoadFunction!='null') { onLoadFunction(); } } }; zpCalendarNode2.src=myDirectory2+'/zapatec/zpcal/lang/calendar-en.js'; headID.appendChild(zpCalendarNode2); } function importPrototypeJS() { var headID=document.getElementsByTagName("head")[0]; var prototypeNode=document.createElement('script'); prototypeNode.type='text/javascript'; prototypeNode.src=myDirectory2+'/javascript/prototype.cfm'; headID.appendChild(prototypeNode); } function importProtoaculousJS(onLoadFunction) { var headID=document.getElementsByTagName("head")[0]; var protoaculousNode=document.createElement('script'); protoaculousNode.type='text/javascript'; protoaculousNode.onload=function() { protoaculousHasLoaded=1; if(onLoadFunction!='null') { onLoadFunction(); } }; protoaculousNode.onreadystatechange=function() { if(protoaculousNode.readyState=='complete'||protoaculousNode.readyState=='loaded') { protoaculousHasLoaded=1; if(onLoadFunction!='null') { onLoadFunction(); } } }; protoaculousNode.src=myDirectory2 +'/javascript/protoaculous.cfm'; headID.appendChild(protoaculousNode); } function importSwfObjectJS(hookWheelMouse,onLoadFunction) { if(swfObjectIsLoading==1) { return; } else { swfObjectIsLoading=1; } var headID=document.getElementsByTagName("head")[0]; var swfobjectNode=document.createElement('script'); swfobjectNode.type='text/javascript'; swfobjectNode.onload=function() { swfObjectHasLoaded=1; if(onLoadFunction!=null) { onLoadFunction(); } if(hookWheelMouse==1) { hookMouseWheel(); } }; swfobjectNode.onreadystatechange=function() { if(swfobjectNode.readyState=='complete'||swfobjectNode.readyState=='loaded') { swfObjectHasLoaded=1; if(onLoadFunction!=null) { onLoadFunction(); } if(hookWheelMouse==1) { hookMouseWheel(); } } }; swfobjectNode.src=myDirectory2+'/javascript/swfObject.cfm'; headID.appendChild(swfobjectNode); } function hookMouseWheel() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll',onMouseWheel,false); } window.onmousewheel=document.onmousewheel=onMouseWheel; } function isMouseOverSwf(mEvent) { var elem; if(mEvent.srcElement) { elem=mEvent.srcElement.nodeName; } else if(mEvent.target) { elem=mEvent.target.nodeName; } if(elem.toLowerCase()=="object"||elem.toLowerCase()=="embed") { return true; } return false; } function onMouseWheel(event) { var delta=0; if(!event) { event=window.event; } if(event.wheelDelta) { delta=event.wheelDelta/120; if(window.opera) { delta=-delta; } } else if(event.detail) { delta=-event.detail/3; } if(isMouseOverSwf(event)) { return cancelMouseEvent(event); } return true; } function cancelMouseEvent(e) { e=e?e:window.event; if (e.stopPropagation) { e.stopPropagation(); } if(e.preventDefault) { e.preventDefault(); } e.cancelBubble=true; e.cancel=true; e.returnValue=false; return false; } function enableCityAutoCompleter(myFunctionName) { var myScript=myDirectory+"/scripts/getCities.cfm"; new Ajax.Autocompleter("CITY_NAME","CITY_HINT",myScript, { minChars:1, frequency:0.3, callback:cityNameCallback, afterUpdateElement:myFunctionName }); } function cityNameCallback(element,entry) { var state=document.getElementById("STATE_ID").value; var country=document.getElementById("COUNTRY_ID").value; var myStr="&COUNTRY_ID="+country+"&STATE_ID="+state; return entry+myStr; } function enableBizNameAutoCompleter(myFunctionName) { var myScript=myDirectory+"/scripts/autocompleters/getBizNames.cfm"; new Ajax.Autocompleter("BUSINESS_NAME","BUSINESS_NAME_HINT",myScript, { minChars:1, frequency:0.3, afterUpdateElement:myFunctionName} ); } function showAdSpace() { if(typeof adMaxModifier=='undefined') { adMaxModifier=0; } if(typeof adPreference=='undefined') { adPreference="BUSINESS"; } if(typeof adKeywords=='undefined') { adKeywords=""; } var rightDiv=document.getElementById('col-r'); var leftDiv=document.getElementById('col-l'); var rightHeight=rightDiv.offsetHeight; var leftHeight=leftDiv.offsetHeight; var maxAds=Math.floor((rightHeight-leftHeight)/127)+adMaxModifier; if(maxAds>0) { xmlLeftAdSpace=GetXmlHttpObject(); if(xmlLeftAdSpace==null) { return; } url=myDirectory+"/ADS/showSideAds.cfm?maxAds="+maxAds+"&adKeywords="+adKeywords;url+="&adPreference="+adPreference+"&sid="+Math.random(); xmlLeftAdSpace.open("GET",url,true); xmlLeftAdSpace.onreadystatechange=function() { var sideAdDiv=document.getElementById('MY_ADSPACE'); if(xmlLeftAdSpace.readyState==4&&xmlLeftAdSpace.responseText!='') { sideAdDiv.innerHTML=xmlLeftAdSpace.responseText;sideAdDiv.style.display="block"; } else if(xmlLeftAdSpace.readyState==4) { sideAdDiv.style.display="none"; } }; xmlLeftAdSpace.send(null); } } function resizeImage(img,containerHeight,containerWidth,centerImage) { img.onload=null; var nimg=new Image(); nimg.onload=function() { if(nimg.height>containerHeight) { var ratioOne=nimg.width/nimg.height; nimg.height=containerHeight; nimg.width=nimg.height*ratioOne; } if(nimg.width>containerWidth) { var ratioTwo=nimg.height/nimg.width; nimg.width=containerWidth; nimg.height=nimg.width*ratioTwo; } img.height=nimg.height; img.width=nimg.width; img.src=nimg.src; if(centerImage==1) { var heightOffset=parseInt((containerHeight-nimg.height)/2); var widthOffset=parseInt((containerWidth-nimg.width)/2); img.style.marginTop=heightOffset+'px'; img.style.marginBottom=heightOffset+'px'; img.style.marginLeft=widthOffset+'px'; img.style.marginRight=widthOffset+'px'; } img.style.display="block"; }; nimg.src=img.src; } function resizeImage2(img,imgURL,containerHeight,containerWidth,centerImage) { img.onload=null; var nimg=new Image(); nimg.onload=function() { if(nimg.height>containerHeight) { var ratioOne=nimg.width/nimg.height; nimg.height=containerHeight; nimg.width=nimg.height*ratioOne; } if(nimg.width>containerWidth) { var ratioTwo=nimg.height/nimg.width; nimg.width=containerWidth; nimg.height=nimg.width*ratioTwo; } img.height=nimg.height; img.width=nimg.width; img.src=nimg.src; if(centerImage==1) { var heightOffset=parseInt((containerHeight-nimg.height)/2); var widthOffset=parseInt((containerWidth-nimg.width)/2); img.style.marginTop=heightOffset+'px'; img.style.marginBottom=heightOffset+'px'; img.style.marginLeft=widthOffset+'px'; img.style.marginRight=widthOffset+'px'; } img.style.display="block"; }; nimg.onerror=function() { img.height=100; img.width=100; img.src='http://images9.green-watch.org/img/png/photoUnavailable.png'; if(centerImage==1) { var heightOffset=parseInt((containerHeight-100)/2); var widthOffset=parseInt((containerWidth-100)/2); img.style.marginTop=heightOffset+'px'; img.style.marginBottom=heightOffset+'px'; img.style.marginLeft=widthOffset+'px'; img.style.marginRight=widthOffset+'px'; } }; nimg.src=imgURL; } function updateSubcatList(scriptParams) { xmlSubcatList=GetXmlHttpObject(); if(xmlSubcatList==null) { return; } url=myDirectory+"/scripts/subcat-list.cfm?search=1&"+scriptParams;xmlSubcatList.open("GET",url,true); xmlSubcatList.onreadystatechange=function() { var availableSubcats=document.getElementById("MY_AVAILABLE_SUBCATS"); if(xmlSubcatList.readyState==4&&xmlSubcatList.responseText!='') { availableSubcats.innerHTML=xmlSubcatList.responseText; availableSubcats.style.display="block"; } else if(xmlSubcatList.readyState==4) { availableSubcats.style.display="none"; } }; xmlSubcatList.send(null); } function updateCountryList(scriptParams) { xmlCountryList=GetXmlHttpObject(); if(xmlCountryList==null) { return; } url=myDirectory+"/scripts/country-list.cfm?search=1&"+scriptParams; xmlCountryList.open("GET",url,true); xmlCountryList.onreadystatechange=function() { var availableCountries=document.getElementById("MY_AVAILABLE_COUNTRIES"); if(xmlCountryList.readyState==4&&xmlCountryList.responseText!='') { availableCountries.innerHTML=xmlCountryList.responseText; availableCountries.style.display="block"; } else if(xmlCountryList.readyState==4) { availableCountries.style.display="none"; } }; xmlCountryList.send(null); } function updateStateList(scriptParams) { xmlStateList=GetXmlHttpObject(); if(xmlStateList==null) { return; } url=myDirectory+"/scripts/state-list.cfm?search=1&"+scriptParams; xmlStateList.open("GET",url,true); xmlStateList.onreadystatechange=function() { var availableRegions=document.getElementById("MY_AVAILABLE_STATES"); if(xmlStateList.readyState==4&&xmlStateList.responseText!='') { availableRegions.innerHTML=xmlStateList.responseText; availableRegions.style.display="block"; } else if(xmlStateList.readyState==4) { availableRegions.style.display="none"; } }; xmlStateList.send(null); } function disableForms() { var inputs=document.getElementsByTagName('input'); for(element in inputs) { if(inputs[element].type=='submit') { inputs[element].disabled=true; } } } document.onfocus=function() { var inputs=document.getElementsByTagName('input'); for(element in inputs) { if(inputs[element].type=='submit') { inputs[element].disabled=false; } } }; function disableElement(element) { var myElement=document.getElementById(element); myElement.disabled=true; } function checkHTML(myElement,myElementError) { xmlCheckHTML=GetXmlHttpObject(); if(xmlCheckHTML==null) { return; } var myElement=document.getElementById(myElement); var myElementError=document.getElementById(myElementError); url=myDirectory+"/scripts/htmlCheck.cfm?myStr="+myElement.value; xmlCheckHTML.open("GET",url,true); xmlCheckHTML.onreadystatechange=function() { if(xmlCheckHTML.readyState==4&&xmlCheckHTML.responseText!='') { myElementError.innerHTML=xmlCheckHTML.responseText; myElementError.style.display="block"; } else if(xmlCheckHTML.readyState==4) { myElementError.style.display="none"; } }; xmlCheckHTML.send(null); } function checkUsername(myElement,myElementError) { xmlCheckUsername=GetXmlHttpObject(); if(xmlCheckUsername==null) { return; } var myElement2=document.getElementById(myElement); var myElementError2=document.getElementById(myElementError); url=myDirectory+"/scripts/checkUsername.cfm?USERNAME="+myElement2.value; xmlCheckUsername.open("GET",url,true); xmlCheckUsername.onreadystatechange=function() { if(xmlCheckUsername.readyState==4&&xmlCheckUsername.responseText!='') { myElementError2.innerHTML=xmlCheckUsername.responseText; myElementError2.style.display="block"; } else if(xmlCheckUsername.readyState==4) { myElementError2.style.display="none"; checkHTML(myElement,myElementError); } }; xmlCheckUsername.send(null); } function checkBizName(newBizName,newBizNameError,curBizName) { xmlCheckBizName=GetXmlHttpObject(); if(xmlCheckBizName==null) { return; } var newBizName2=document.getElementById(newBizName); var newBizNameError2=document.getElementById(newBizNameError); url=myDirectory+"/scripts/checkBizName.cfm?BUSINESS_NAME="+newBizName2.value+"&CURRENT_BIZ_NAME="+curBizName;url=url+"&sid="+Math.random(); xmlCheckBizName.open("GET",url,true); xmlCheckBizName.onreadystatechange=function() { if(xmlCheckBizName.readyState==4&&xmlCheckBizName.responseText!='') { newBizNameError2.innerHTML=xmlCheckBizName.responseText; newBizNameError2.style.display="block"; } else if (xmlCheckBizName.readyState==4) { newBizNameError2.style.display="none"; checkHTML(newBizName,newBizNameError); } }; xmlCheckBizName.send(null); } function checkNumeric(myElement,myElementError) { xmlCheckNumeric=GetXmlHttpObject(); if(xmlCheckNumeric==null) { return; } var myElement2=document.getElementById(myElement); var myElementError2=document.getElementById(myElementError); url=myDirectory+"/scripts/numericCheck.cfm?myStr="+myElement2.value; xmlCheckNumeric.open("GET",url,true); xmlCheckNumeric.onreadystatechange=function() { if(xmlCheckNumeric.readyState==4&&xmlCheckNumeric.responseText!='') { myElementError2.innerHTML=xmlCheckNumeric.responseText; myElementError2.style.display="block"; } else if(xmlCheckNumeric.readyState==4) { myElementError2.style.display="none"; } }; xmlCheckNumeric.send(null); } function checkWebsite(myElement,myElementError) { xmlCheckWebsite=GetXmlHttpObject(); if(xmlCheckWebsite==null) { return; } var websiteURL=document.getElementById(myElement); var websiteError=document.getElementById(myElementError); url=myDirectory+"/scripts/checkWebsite.cfm?WEBSITE_URL="+websiteURL.value; xmlCheckWebsite.open("GET",url,true); xmlCheckWebsite.onreadystatechange=function() { if(xmlCheckWebsite.readyState==4&&xmlCheckWebsite.responseText!='') { var errorMessage = 'That website URL is not valid. If you type your website '; errorMessage+='URL as plain text, we will take care of the rest. Error: '+xmlCheckWebsite.responseText+''; websiteError.innerHTML=errorMessage; websiteError.style.display="block"; } else if(xmlCheckWebsite.readyState==4) { websiteError.style.display = "none"; } }; xmlCheckWebsite.send(null); } function checkCityName(regionElement,cityElement,cityElementError) { xmlCheckCity=GetXmlHttpObject(); if(xmlCheckCity==null) { return; } var cityName=document.getElementById(cityElement); var regionID=document.getElementById(regionElement); var cityNameError=document.getElementById(cityElementError); url=myDirectory+"/scripts/checkCityName.cfm?CITY_NAME="+cityName.value;url=url+"&STATE_ID="+regionID.value; xmlCheckCity.open("GET",url,true); xmlCheckCity.onreadystatechange=function() { if(xmlCheckCity.readyState==4&&xmlCheckCity.responseText!='') { cityNameError.innerHTML=xmlCheckCity.responseText; cityNameError.style.display="block"; } else if(xmlCheckCity.readyState==4) { cityNameError.style.display="none"; } }; xmlCheckCity.send(null); } function charCheck(myLabel,myTxtArea,charCount) { var charsRemainingLabel=document.getElementById(myLabel); var myTextArea=document.getElementById(myTxtArea); var charsLeft=charCount-myTextArea.value.length; if(charsLeft < 0) { alert("You can only enter up to "+charCount+" characters for this text field."); myTextArea.value=myTextArea.value.substring(0,charCount); charsRemainingLabel.innerHTML="0 characters remaining"; } else if(charsLeft==1) { charsRemainingLabel.innerHTML=charsLeft+" character remaining"; } else { charsRemainingLabel.innerHTML=charsLeft+" characters remaining"; } }
// ]]>
</script>All resources on the page were exactly the same so the only change was the two code blocks above. The code attached in Exhibit A matches the code block in Exhibit B.
Test Results:
Exhibit A
http://www.webpagetest.org/result/100709_1445/
http://www.webpagetest.org/result/100709_144E/
Exhibit B
http://www.webpagetest.org/result/100709_143X/
http://www.webpagetest.org/result/100709_1443/
The test results showed that the inline JavaScript in Exhibit B resulted in a faster page speed both first view and repeat view.
I figure the difference in execution time would be the time to first byte for the included JavaScript. In Exhibit B, you do not have that look up time.
The blocking of JavaScript is due to the execution of the JavaScript and not necessarily how it is included correct?
If you have to include a script that blocks other downloads, why not include it inline as opposed to fetching it with src?
Some people may argue that code changes are easier to update. However, with dynamic scripting languages such as coldfusion, you can just include a template that will allow JavaScript changes in one location.
How would having the inline JavaScript at the top effect website crawlers such as Google? Would Google look past all the JavaScript?
Any thoughts or comments?
Sincerely,
Travis Walters[hr]
