From e1d65006dddb2bf1e8a64bdac0f61ad1d3c1d089 Mon Sep 17 00:00:00 2001 From: MatmaRex Date: Thu, 13 Jun 2013 19:07:51 +0200 Subject: [PATCH] RegionSelector: Avoid reflows when generating the list Every time an item is added to the list - 387 times for me - we shuffle elements around and add at least one new one. This causes browsers to trigger style recalculation (to figure out which styles apply to elements with such and such classes) and content reflows (how the text and elements are wrapped to fit available width). We can avoid this by simply detaching the parent element from the DOM tree and attaching it back once we're done - this make it only trigger one recalculation and one reflow. In my profiling on Opera on a Thinkpad T60 (with lazy-loading disabled), these two steps took respectively around 600ms and 400ms. Now they're down to around 50ms each. --- src/jquery.uls.regionfilter.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/jquery.uls.regionfilter.js b/src/jquery.uls.regionfilter.js index ab1d6e5..9766ac1 100644 --- a/src/jquery.uls.regionfilter.js +++ b/src/jquery.uls.regionfilter.js @@ -70,7 +70,15 @@ }, show: function () { - var result, languagesByScriptGroup, scriptGroup, languages, i; + var result, languagesByScriptGroup, scriptGroup, languages, i, + $element = this.options.$target && this.options.$target.$element, + $parent = $element && $element.parent(), + $prev = $element && $element.prev(); + + if ( $element && $parent ) { + // Avoid reflows while adding new elements to the list + $element.remove(); + } if ( this.cache ) { // If the result cache is present, render the results from there. @@ -106,6 +114,15 @@ } } + if ( $element && $parent ) { + // Restore the element to where we removed it from + if ( $prev ) { + $prev.after( $element ); + } else { + $parent.append( $element ); + } + } + if ( this.options.success ) { this.options.success( this ); }