From dec4058ee7f02a79f5de77883903f5fa46a48b5a Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sat, 13 Apr 2013 13:40:00 +0200 Subject: [PATCH 1/2] Code style fixes in the Performance section. * Spaces to tabs. * Always space inside parentheses etc. * More coherent bad/better/best/faster wording/case. * Reflow and sentence-case some comments. --- page/performance/append-outside-loop.md | 18 +++++----- page/performance/cache-loop-length.md | 2 +- .../detach-elements-before-work-with-them.md | 3 +- .../dont-act-on-absent-elements.md | 32 ++++++++---------- page/performance/optimize-selectors.md | 33 +++++++++---------- .../use-stylesheets-for-changing-css.md | 9 ++--- 6 files changed, 47 insertions(+), 50 deletions(-) diff --git a/page/performance/append-outside-loop.md b/page/performance/append-outside-loop.md index 733ef9d9..264553b6 100644 --- a/page/performance/append-outside-loop.md +++ b/page/performance/append-outside-loop.md @@ -12,9 +12,9 @@ DOM, you will want to append them all at once, rather then one at a time. This i ``` $.each( myArray, function( i, item ) { - var newListItem = "
  • " + item + "
    • "; + var newListItem = "
  • " + item + "
    • "; - $("#ballers").append( newListItem ); + $( "#ballers" ).append( newListItem ); }); ``` @@ -28,16 +28,16 @@ var frag = document.createDocumentFragment(); $.each( myArray, function( i, item ) { - var newListItem = document.createElement("li"); - var itemText = document.createTextNode( item ); + var newListItem = document.createElement( "li" ); + var itemText = document.createTextNode( item ); - newListItem.appendChild( itemText ); + newListItem.appendChild( itemText ); - frag.appendChild( newListItem ); + frag.appendChild( newListItem ); }); -$("#ballers")[ 0 ].appendChild( frag ); +$( "#ballers" )[ 0 ].appendChild( frag ); ``` Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string. @@ -47,11 +47,11 @@ var myHtml = ""; $.each( myArray, function( i, item ) { - myHtml += "
  • " + item + "
    • "; + myHtml += "
  • " + item + "
    • "; }); -$("#ballers").html( myHtml ); +$( "#ballers" ).html( myHtml ); ``` There are of course other techniques you could certainly test out; a great way to test the performance of these is through a site called [jsperf](http://jsperf.com). This site allows you to benchmark each technique and visually see how it performs across all the browsers. diff --git a/page/performance/cache-loop-length.md b/page/performance/cache-loop-length.md index ac12c735..ac66c5ab 100644 --- a/page/performance/cache-loop-length.md +++ b/page/performance/cache-loop-length.md @@ -14,7 +14,7 @@ var myLength = myArray.length; for ( var i = 0; i < myLength; i++ ) { - // do stuff + // do stuff } ``` diff --git a/page/performance/detach-elements-before-work-with-them.md b/page/performance/detach-elements-before-work-with-them.md index b198302f..9c3274d1 100644 --- a/page/performance/detach-elements-before-work-with-them.md +++ b/page/performance/detach-elements-before-work-with-them.md @@ -11,11 +11,12 @@ introduced `$.fn.detach` in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. ``` -var $table = $("#myTable"); +var $table = $( "#myTable" ); var $parent = $table.parent(); $table.detach(); // ... add lots and lots of rows to table + $parent.append( $table ); ``` diff --git a/page/performance/dont-act-on-absent-elements.md b/page/performance/dont-act-on-absent-elements.md index 9ca38551..e7c56c5e 100644 --- a/page/performance/dont-act-on-absent-elements.md +++ b/page/performance/dont-act-on-absent-elements.md @@ -6,40 +6,36 @@ attribution: - jQuery Fundamentals --- -jQuery won't tell you if you're trying to run a whole lot of code on an empty -selection — it will proceed as though nothing's wrong. It's up to you to verify -that your selection contains some elements. +jQuery won't tell you if you're trying to run a whole lot of code on an empty selection – it will proceed as though nothing's wrong. It's up to you to verify that your selection contains some elements. ``` -// BAD: this runs three functions -// before it realizes there's nothing -// in the selection -$("#nosuchthing").slideUp(); +// Bad: This runs three functions before it +// realizes there's nothing in the selection +$( "#nosuchthing" ).slideUp(); -// Better -var $mySelection = $("#nosuchthing"); +// Better: +var $mySelection = $( "#nosuchthing" ); if ( $mySelection.length ) { - $mySelection.slideUp(); + $mySelection.slideUp(); } -// BEST: add a doOnce plugin -jQuery.fn.doOnce = function( func ){ +// Best: Add a doOnce plugin. +jQuery.fn.doOnce = function( func ) { - this.length && func.apply( this ); + this.length && func.apply( this ); - return this; + return this; } -$("li.cartitems").doOnce(function() {
 +$( "li.cartitems" ).doOnce(function() {
 - // make it ajax! \o/
 + // make it ajax! \o/
 }); ``` -This guidance is especially applicable for jQuery UI widgets, which have a lot -of overhead even when the selection doesn't contain elements. +This guidance is especially applicable for jQuery UI widgets, which have a lot of overhead even when the selection doesn't contain elements. diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index 29504d5c..4b659f36 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -15,11 +15,11 @@ jQuery to the browser. However, there are still some tips to keep in mind. Beginning your selector with an ID is always best. ``` -// fast -$("#container div.robotarm"); +// Fast: +$( "#container div.robotarm" ); -// super-fast -$("#container").find("div.robotarm"); +// Super-fast: +$( "#container" ).find( "div.robotarm" ); ``` The `$.fn.find` approach is faster because the first selection is handled @@ -33,12 +33,11 @@ Be specific on the right-hand side of your selector, and less specific on the left. ``` -// unoptimized -$("div.data .gonzalez"); - -// optimized -$(".data td.gonzalez"); +// Unoptimized: +$( "div.data .gonzalez" ); +// Optimized: +$( ".data td.gonzalez" ); ``` Use `tag.class` if possible on your right-most selector, and just tag or just @@ -47,10 +46,10 @@ Use `tag.class` if possible on your right-most selector, and just tag or just ## Avoid excessive specificity. ``` -$(".data table.attendees td.gonzalez"); +$( ".data table.attendees td.gonzalez" ); -// better: drop the middle if possible -$(".data td.gonzalez"); +// Better: Drop the middle if possible. +$( ".data td.gonzalez" ); ``` A "flatter" DOM also helps improve selector performance, as the selector engine @@ -62,10 +61,10 @@ Selections that specify or imply that a match could be found anywhere can be very slow. ``` -$(".buttons > *"); // extremely expensive -$(".buttons").children(); // much better +$( ".buttons > *" ); // Extremely expensive. +$( ".buttons" ).children(); // Much better. -$(".gender :radio"); // implied universal selection -$(".gender *:radio"); // same thing, explicit now -$(".gender input:radio"); // much better +$( ".gender :radio" ); // Implied universal selection. +$( ".gender *:radio" ); // Same thing, explicit now. +$( ".gender input:radio" ); // Much better. ``` diff --git a/page/performance/use-stylesheets-for-changing-css.md b/page/performance/use-stylesheets-for-changing-css.md index d6c92e26..534edd6e 100644 --- a/page/performance/use-stylesheets-for-changing-css.md +++ b/page/performance/use-stylesheets-for-changing-css.md @@ -10,9 +10,10 @@ If you're changing the CSS of more than 20 elements using `$.fn.css`, consider adding a style tag to the page instead for a nearly 60% increase in speed. ``` -// fine for up to 20 elements, slow after that -$("a.swedberg").css("color", "#asd123"); +// Fine for up to 20 elements, slow after that: +$( "a.swedberg" ).css( "color", "#0769ad" ); -$("") - .appendTo("head"); +// Much faster: +$( "") + .appendTo( "head" ); ``` From dac33549c5bd0a80c49fd0b1a89e8b364ab4089c Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Sat, 13 Apr 2013 13:47:41 +0200 Subject: [PATCH 2/2] Style and typography fixes in the Performance section. * Reflow markdown body text. * Add some inline code markdown. * Em dashes to en dashes. * Proper title case in headings. --- page/performance/append-outside-loop.md | 9 +++----- page/performance/cache-loop-length.md | 3 +-- .../detach-elements-before-work-with-them.md | 4 +--- page/performance/optimize-selectors.md | 23 ++++++------------- .../use-stylesheets-for-changing-css.md | 3 +-- 5 files changed, 13 insertions(+), 29 deletions(-) diff --git a/page/performance/append-outside-loop.md b/page/performance/append-outside-loop.md index 264553b6..180823b4 100644 --- a/page/performance/append-outside-loop.md +++ b/page/performance/append-outside-loop.md @@ -6,8 +6,7 @@ attribution: - jQuery Fundamentals --- -Touching the DOM comes at a cost; if you're appending a lot of elements to the -DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop. +Touching the DOM comes at a cost; if you're appending a lot of elements to the DOM, you will want to append them all at once, rather then one at a time. This is common problem when appending elements within a loop. ``` $.each( myArray, function( i, item ) { @@ -19,9 +18,7 @@ $.each( myArray, function( i, item ) { }); ``` -One common technique is to leverage a document fragment. During each iteration -of the loop, you append the element to the fragment rather than the DOM -element. After the loop, just append the fragment to the DOM element. +One common technique is to leverage a document fragment. During each iteration of the loop, you append the element to the fragment rather than the DOM element. After the loop, just append the fragment to the DOM element. ``` var frag = document.createDocumentFragment(); @@ -40,7 +37,7 @@ $.each( myArray, function( i, item ) { $( "#ballers" )[ 0 ].appendChild( frag ); ``` -Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the html of the DOM element to that string. +Another technique, which is quite simple, is to build up a string during each iteration of the loop. After the loop, just set the HTML of the DOM element to that string. ``` var myHtml = ""; diff --git a/page/performance/cache-loop-length.md b/page/performance/cache-loop-length.md index ac66c5ab..c9000ff9 100644 --- a/page/performance/cache-loop-length.md +++ b/page/performance/cache-loop-length.md @@ -6,8 +6,7 @@ attribution: - jQuery Fundamentals --- -In a for loop, don't access the length property of an array every time; cache -it beforehand. +In a for loop, don't access the length property of an array every time; cache it beforehand. ``` var myLength = myArray.length; diff --git a/page/performance/detach-elements-before-work-with-them.md b/page/performance/detach-elements-before-work-with-them.md index 9c3274d1..93ec9b99 100644 --- a/page/performance/detach-elements-before-work-with-them.md +++ b/page/performance/detach-elements-before-work-with-them.md @@ -6,9 +6,7 @@ attribution: - jQuery Fundamentals --- -The DOM is slow; you want to avoid manipulating it as much as possible. jQuery -introduced `$.fn.detach` in version 1.4 to help address this issue, allowing you -to remove an element from the DOM while you work with it. +The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced `$.fn.detach` in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. ``` var $table = $( "#myTable" ); diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index 4b659f36..168aae43 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -6,9 +6,7 @@ attribution: - jQuery Fundamentals --- -Selector optimization is less important than it used to be, as more browsers -implement document.querySelectorAll() and the burden of selection shifts from -jQuery to the browser. However, there are still some tips to keep in mind. +Selector optimization is less important than it used to be, as more browsers implement `document.querySelectorAll()` and the burden of selection shifts from jQuery to the browser. However, there are still some tips to keep in mind. ## ID-Based Selectors @@ -22,15 +20,11 @@ $( "#container div.robotarm" ); $( "#container" ).find( "div.robotarm" ); ``` -The `$.fn.find` approach is faster because the first selection is handled -without going through the Sizzle selector engine — ID-only selections are -handled using `document.getElementById()`, which is extremely fast because it is -native to the browser. +The `$.fn.find` approach is faster because the first selection is handled without going through the Sizzle selector engine – ID-only selections are handled using `document.getElementById()`, which is extremely fast because it is native to the browser. ## Specificity -Be specific on the right-hand side of your selector, and less specific on the -left. +Be specific on the right-hand side of your selector, and less specific on the left. ``` // Unoptimized: @@ -40,10 +34,9 @@ $( "div.data .gonzalez" ); $( ".data td.gonzalez" ); ``` -Use `tag.class` if possible on your right-most selector, and just tag or just -`.class` on the left. +Use `tag.class` if possible on your right-most selector, and just tag or just `.class` on the left. -## Avoid excessive specificity. +## Avoid Excessive Specificity ``` $( ".data table.attendees td.gonzalez" ); @@ -52,13 +45,11 @@ $( ".data table.attendees td.gonzalez" ); $( ".data td.gonzalez" ); ``` -A "flatter" DOM also helps improve selector performance, as the selector engine -has fewer layers to traverse when looking for an element. +A "flatter" DOM also helps improve selector performance, as the selector engine has fewer layers to traverse when looking for an element. ## Avoid the Universal Selector -Selections that specify or imply that a match could be found anywhere can be -very slow. +Selections that specify or imply that a match could be found anywhere can be very slow. ``` $( ".buttons > *" ); // Extremely expensive. diff --git a/page/performance/use-stylesheets-for-changing-css.md b/page/performance/use-stylesheets-for-changing-css.md index 534edd6e..0aab4aaa 100644 --- a/page/performance/use-stylesheets-for-changing-css.md +++ b/page/performance/use-stylesheets-for-changing-css.md @@ -6,8 +6,7 @@ attribution: - jQuery Fundamentals --- -If you're changing the CSS of more than 20 elements using `$.fn.css`, consider -adding a style tag to the page instead for a nearly 60% increase in speed. +If you're changing the CSS of more than 20 elements using `$.fn.css`, consider adding a style tag to the page instead for a nearly 60% increase in speed. ``` // Fine for up to 20 elements, slow after that: