On 07/09/10 17:44, Roan Kattouw wrote:
2010/9/7 Dmitriy Sintsov questpc@rambler.ru:
Do browsers support streamed and combined (archive-like) gz-encoded content? Then probably minifying will not be neccessary.
Minification makes a shocking difference: remember that it's not just whitespace being stripped, it's comments as well. For example, in /trunk/extensions/UsabilityInitiative/js we have:
plugins.combined.js: 259281 bytes plugins.combined.min.js: 142565 bytes plugins.combined.js.gz: 65569 bytes plugins.combined.min.js.gz: 32740 bytes
So not only is the minified JS roughly half the size in both the compressed and the uncompressed cases, it actually /compresses better/ (3.95x vs. 4.35x).
Note that the advantage of minification is somewhat inflated due to the nature of the source. There seems to be a "because we can" element to it: because the developers are so impressed by the concept of minification, they write excessively verbose and excessively many comments. For example:
// create the span wrapper for the matched text var spannode = document.createElement( 'span' ); spannode.className = 'highlight'; // shave off the characters preceding the matched text var middlebit = node.splitText( pos ); // shave off any unmatched text off the end middlebit.splitText( pat.length ); // clone for appending to our span var middleclone = middlebit.cloneNode( true ); // append the matched text node to the span spannode.appendChild( middleclone ); // replace the matched node, with our span-wrapped clone of the matched node middlebit.parentNode.replaceChild( spannode, middlebit );
Or a doc comment:
/** * This plugin provides a generic way to add suggestions to a text box. * * Usage: * * Set options: * $('#textbox').suggestions( { option1: value1, option2: value2 } ); * $('#textbox').suggestions( option, value ); * Get option: * value = $('#textbox').suggestions( option ); * Initialize: * $('#textbox').suggestions(); * * Options: * * fetch(query): Callback that should fetch suggestions and set the suggestions property. Executed in the context of the * textbox * Type: Function * cancel: Callback function to call when any pending asynchronous suggestions fetches should be canceled. * Executed in the context of the textbox * Type: Function * special: Set of callbacks for rendering and selecting * Type: Object of Functions 'render' and 'select' * result: Set of callbacks for rendering and selecting * Type: Object of Functions 'render' and 'select' * $region: jQuery selection of element to place the suggestions below and match width of * Type: jQuery Object, Default: $(this) * suggestions: Suggestions to display * Type: Array of strings * maxRows: Maximum number of suggestions to display at one time * Type: Number, Range: 1 - 100, Default: 7 * delay: Number of ms to wait for the user to stop typing * Type: Number, Range: 0 - 1200, Default: 120 * submitOnClick: Whether to submit the form containing the textbox when a suggestion is clicked * Type: Boolean, Default: false * maxExpandFactor: Maximum suggestions box width relative to the textbox width. If set to e.g. 2, the suggestions box * will never be grown beyond 2 times the width of the textbox. * Type: Number, Range: 1 - infinity, Default: 3 * positionFromLeft: Whether to position the suggestion box with the left attribute or the right * Type: Boolean, Default: true * highlightInput: Whether to hightlight matched portions of the input or not * Type: Boolean, Default: false */
I think it's ironic that this style arises in JavaScript, given that it's a high-level language and relatively easy to understand, and that you could make a technical case in favour of terseness. C has an equally effective minification technique known as compilation, and its practitioners tend to be terse to a fault. For instance, many Linux kernel modules have no comments at all, except for the license header.
-- Tim Starling