Permalink
Browse files

Reclaiming another 700-800 msecs on the 400 listview item test for WP…

…7.5 (Mango) with a few minor tweaks:

- Added _findFirstElementByTagName() which does basic DOM traversal to find the first of an element with the given nodeName. Use this in place of $.fn.closest() and $.fn.children() calls that filter with ":eq(0)".
- Avoid calling $.fn.add() if you can. The creation of the new collection is costing about 400 msecs.
- Avoid calling $() with markup for a single node, just use document.createElement() and pass it to $().
  • Loading branch information...
1 parent 8ef15e8 commit 87070cc6907ee1feb56969efe451abefea95bde3 @jblas jblas committed Nov 10, 2011
Showing with 40 additions and 10 deletions.
  1. +40 −10 js/jquery.mobile.listview.js
@@ -92,6 +92,42 @@ $.widget( "mobile.listview", $.mobile.widget, {
}
},
+ // This is a generic utility method for finding the first
+ // node with a given nodeName. It uses basic DOM traversal
+ // to be fast and is meant to be a substitute for simple
+ // $.fn.closest() and $.fn.children() calls on a single
+ // element. Note that callers must pass both the lowerCase
+ // and upperCase version of the nodeName they are looking for.
+ // The main reason for this is that this function will be
+ // called many times and we want to avoid having to lowercase
+ // the nodeName from the element every time to ensure we have
+ // a match. Note that this function lives here for now, but may
+ // be moved into $.mobile if other components need a similar method.
+ _findFirstElementByTagName: function( ele, nextProp, lcName, ucName )
+ {
+ var dict = {};
+ dict[ lcName ] = dict[ ucName ] = true;
+ while ( ele ) {
+ if ( dict[ ele.nodeName ] ) {
+ return ele;
+ }
+ ele = ele[ nextProp ];
+ }
+ return null;
+ },
+
+ _addThumbClasses: function( containers )
+ {
+ var i, img, len = containers.length;
+ for ( i = 0; i < len; i++ ) {
+ img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
+ if ( img.length ) {
+ img.addClass( "ui-li-thumb" );
+ $( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ }
+ }
+ },
+
refresh: function( create ) {
this.parentPage = this.element.closest( ".ui-page" );
this._createSubPages();
@@ -157,7 +193,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
})
.find( ".ui-btn-inner" )
.append(
- $( "<span />" ).buttonMarkup({
+ $( document.createElement( "span" ) ).buttonMarkup({
shadow: true,
corners: true,
theme: splittheme,
@@ -188,7 +224,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
.prepend( "<span class='ui-li-dec'>" + (counter++) + ". </span>" );
}
- item.add( item.children( ".ui-btn-inner" ) ).addClass( itemClass );
+ item.addClass( itemClass ).children( ".ui-btn-inner" ).addClass( itemClass );
}
$list.find( "h1, h2, h3, h4, h5, h6" ).addClass( "ui-li-heading" )
@@ -219,14 +255,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
// allows the 400 listview item page to load in about 3 seconds as
// opposed to 30 seconds.
- imgParents = li.add( $list.find( ".ui-link-inherit" ) );
-
- for ( pos = 0; pos < imgParents.length; pos++ ) {
- img = imgParents.eq( pos ).children( "img" ).first();
- if ( img.length ) {
- img.addClass( "ui-li-thumb" ).closest( "li" ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
- }
- }
+ this._addThumbClasses( li );
+ this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
this._refreshCorners( create );
},

0 comments on commit 87070cc

Please sign in to comment.