StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://code.google.com/closure/compiler/" rel="noreferrer">Google Closure Compiler</a> is a good javascript minifier.</p> <p>There is a good <a href="http://closure-compiler.appspot.com/home" rel="noreferrer">online tool</a> for quick use, or you can download the tool and run it as part of a web site build process.</p> <hr> <p><strong>Edit:</strong> Added a non-exhaustive list of tricks that you can use to minify JavaScript extremely, before using a minifier:</p> <p><strong>Shorten long variable names</strong><br> Use shortened references to built in variables like <code>d=document;w=window</code>.</p> <p><strong>Set Interval</strong><br> The <code>setInterval</code> function can take either a function or a string. Pass in a string to reduce the number of characters used: <code>setInterval('a--;b++',10)</code>. <em>Note</em> that passing in a string forces an eval invokation so it will be slower than passing in a function.</p> <p><strong>Reduce Mathematical Calculations</strong><br> Example <code>a=b+b+b</code> can be reduced to <code>a=3*b</code>.</p> <p><strong>Use Scientific Notation</strong><br> <code>10000</code> can be expressed in scientific notation as <code>1E4</code> saving 2 bytes.</p> <p><strong>Drop leading Zeroes</strong><br> <code>0.2 = .2</code> saves a byte</p> <p><strong>Ternery Operator</strong></p> <pre><code>if (a > b) { result = x; } else { result = y; } </code></pre> <p>can be expressed as <code>result=a>b?x:y</code> </p> <p><strong>Drop Braces</strong><br> Braces are only required for blocks of more than one statement.</p> <p><strong>Operator Precedence</strong><br> Rely on operator precedence rather than adding unneeded brackets which aid code readability.</p> <p><strong>Shorten Variable Assignment</strong><br> Rather than <code>function x(){a=1,b=2;...}()</code> pass values into the function, <code>function x(a,b){...}(1,2)</code></p> <p><strong>Think outside the box</strong><br> Don't automatically reach for standard ways of doing things. Rather than using <code>d.getElementById('p')</code> to get a reference to a DOM element, could you use <code>b.children[4]</code> where <code>d=document;b=body</code>.</p> <hr> <p>Original source for above list of tricks:</p> <p><a href="http://thingsinjars.com/post/293/the-quest-for-extreme-javascript-minification/" rel="noreferrer">http://thingsinjars.com/post/293/the-quest-for-extreme-javascript-minification/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload