Today I was looking at the size of a .js file for a site I've been working on, and it was mostly 'stock standard' JS, meaning everything was spelled out in the standard format:
document.getElementById('Id_Name_Here').style.backgroundColor='colorHere'
document.getElementById('Id_Name_Here').innerHTML='Stuff Here'
The file is fairly good sized (19.4k uncompressed), and I wanted to shorten it, but needed all the functions... I was using jQuery for some of the animations and effects it creates, but most of the code was standard JS, so today I spent most of the afternoon converting it to jQuery format and saved a 1.6K on the file size, mainly with the change in formatting.
Everything still does the same thing and it does it the same way, but the code is so much shorter it's not even funny... Prior to converting to jQuery it was 19.4k after the conversion it is 17.8k.
jQuery Format:
$('#Id_Name_Here').css('background-color','colorHere')
$('#Id_Name_Here').html('Stuff Here')
Another thing I did with the animation and often used stylings is set variables for them... On a small file without too much animation or repetition it might not make too much difference, but on larger files with a bunch of interaction it definitely helps to save characters anywhere you can. I changed 'slow' to 'var s' for the animation and one of the biggest savings I got with a single change was from background-color or backgroundColor to bcg
var s='slow'
$('#Id_Name_Here').slideDown(s)
Is the same as:
$('#Id_Name_Here').slideDown('slow')
And
var bgc='background-color'
$('#Id_Name_Here').css(bgc,'colorHere')
Is the same as:
$('#Id_Name_Here').css('background-color','colorHere')
Anyway, I usually do things like 'condensing' with PHP and HTML, but haven't really ever 'condensed' JS to the extreme I did today, and I was really surprised at how many characters I cut out of the code that were totally unnecessary to do exactly the same thing mostly by simply changing the format of the code to jQuery, and I figured I'd post about it for a minute.
