bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RegionSelector: Avoid reflows when generating the list

Browse Source 
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.
This commit is contained in:
MatmaRex
2013-06-13 19:07:51 +02:00
committed by Santhosh Thottingal
parent e4b39c3b7c
commit e1d65006dd
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/jquery.uls.regionfilter.js
View File

@@ -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 );
}