@nicholas
I have to take issue with your statement:
“Always keep in mind that anything that appears after a dot in JavaScript (object.property) cannot be minified any further.”
Maybe the minifier can’t spot it, but as a general statement, it ain’t so.
One common example is where what’s after the dot is actually an object to which a var can be assigned:
var x=shadow.style;
x.overflow=‘hidden’;
x.position=‘absolute’;
x.top=’-5000px’;
x.height=‘1px’;
Further, if what’s after the dot is a property these too can be minified if they appear more than once – using bracketed notation. Even methods can be minified this way.
(Whether it’s worth the effort is another matter – but it can be done.)
Let’s say you had two or three elements to which you are applying a particular property:
var a=‘minWidth’;
objx.style[a]=‘200px’;
objy.style[a]=‘400px’;
objz.style[a]=‘250px’;
Or, to keep in step with the previous example:
var a=‘minWidth’, b=‘style’;
objx[a]=‘200px’;
objy[a]=‘400px’;
objz[a]=‘250px’;
With methods you can do things like this:
var t = ‘toLowerCase’;
if stringx[t]()==stringy[t]() return true;
or
var d = document, r=d.getElementById, obj_a=r(‘element-a’),obj_b=r(‘element-b’), obj_c=r(‘element-c’);
[ In other words, getElementById() is aliased as r() ]
Lastly: it can’t be stressed enough that the greatest amount of optimization can be had by simply combining scripts into a single file for a single HTTP request. I do a lot of view sourcing and I constantly see multiple script elements that can slow download – especially on the first page view before caching kicks in – that anybody, no matter what their level of knowledge, can easily avoid.
Once combined, if minified, even better.
11 Reader Comments
Back to the ArticleRichard Fink
@nicholas
I have to take issue with your statement:
“Always keep in mind that anything that appears after a dot in JavaScript (object.property) cannot be minified any further.”
Maybe the minifier can’t spot it, but as a general statement, it ain’t so.
One common example is where what’s after the dot is actually an object to which a var can be assigned:
Real world example this…
shadow.style.overflow=‘hidden’;
shadow.style.position=‘absolute’;
shadow.style.top=’-5000px’;
shadow.style.height=‘1px’;
Can be this…
var x=shadow.style;
x.overflow=‘hidden’;
x.position=‘absolute’;
x.top=’-5000px’;
x.height=‘1px’;
Further, if what’s after the dot is a property these too can be minified if they appear more than once – using bracketed notation. Even methods can be minified this way.
(Whether it’s worth the effort is another matter – but it can be done.)
Let’s say you had two or three elements to which you are applying a particular property:
objx.style.minWidth=‘200px’;
objy.style.minWidth=‘400px’;
objz.style.minWidth=‘250px’;
Could become this:
var a=‘minWidth’;
objx.style[a]=‘200px’;
objy.style[a]=‘400px’;
objz.style[a]=‘250px’;
Or, to keep in step with the previous example:
var a=‘minWidth’, b=‘style’;
objx[a]=‘200px’;
objy[a]=‘400px’;
objz[a]=‘250px’;
With methods you can do things like this:
var t = ‘toLowerCase’;
if stringx[t]()==stringy[t]() return true;
or
var d = document, r=d.getElementById, obj_a=r(‘element-a’),obj_b=r(‘element-b’), obj_c=r(‘element-c’);
[ In other words, getElementById() is aliased as r() ]
Lastly: it can’t be stressed enough that the greatest amount of optimization can be had by simply combining scripts into a single file for a single HTTP request. I do a lot of view sourcing and I constantly see multiple script elements that can slow download – especially on the first page view before caching kicks in – that anybody, no matter what their level of knowledge, can easily avoid.
Once combined, if minified, even better.