Skip to content

Commit

Permalink
improve performance #1
Browse files Browse the repository at this point in the history
  • Loading branch information
@brunjo
brunjo committed Mar 7, 2014
1 parent 5387556 commit d090f18
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 30 deletions.
66 changes: 66 additions & 0 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,72 @@ <h1><a href="https://github.com/brunjo/rowGrid.js">rowGrid.js Example</a></h1>
<div class="item">
<img src="http://lorempixel.com/220/200?22" width="220" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/200?1" width="220" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/180/200?2" width="180" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200?3" width="250" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/200/200?4" width="200" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/240/200?5" width="240" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/210/200?6" width="210" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/200/200?7" width="200" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/190/200?8" width="190" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/260/200?9" width="260" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/200?10" width="220" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/200/200?11" width="200" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/170/200?12" width="170" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/280/200?13" width="280" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/200?14" width="220" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/210/240?15" width="240" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/180?16" width="180" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/200?17" width="200" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/210/200?18" width="210" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/200/200?19" width="200" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/190/200?20" width="190" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/260/200?21" width="260" height="200" />
</div>
<div class="item">
<img src="http://lorempixel.com/220/200?22" width="220" height="200" />
</div>
</div>
</body>
</html>
56 changes: 30 additions & 26 deletions jquery.row-grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,39 +44,44 @@
var rowWidth = 0,
rowElems = [],
items = items || $container.children(options.itemSelector),
itemsSize = items.length - 1;
itemsSize = items.length;

$container.children('.' + options.lastRowClass).removeClass(options.lastRowClass);

items
.removeAttr('style')
.removeClass(options.firstItemClass);
for(var index = 0; index < itemsSize; ++index) {
items[index].removeAttribute('style');
if (items[index].classList) {
items[index].classList.remove(options.firstItemClass);
}
else {
// IE <10
items[index].className = items[index].className.replace(new RegExp('(^|\\b)' + options.firstItemClass + '(\\b|$)', 'gi'), ' ');
}
}

// read
var containerWidth = $container.width() - ($container[0].offsetWidth - $container[0].clientWidth); // width minus scrollbar width
var containerWidth = $container[0].clientWidth;
var itemAttrs = [];
items.each(function(index, elem) {
elem = $(elem);
itemAttrs[index] = {
outerWidth: elem.outerWidth(),
height: elem.height()
for(var i = 0; i < itemsSize; ++i) {
itemAttrs[i] = {
outerWidth: items[i].offsetWidth,
height: items[i].offsetHeight
};
});
}

// write
items.each(function(index, elem) {
elem = $(elem);
for(var index = 0; index < itemsSize; ++index) {
rowWidth += itemAttrs[index].outerWidth;
rowElems.push(elem);
rowElems.push(items[index]);

// check if it is the last element
if(index === itemsSize) {
if(index === itemsSize - 1) {
for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) {
// if first element in row
if(rowElemIndex === 0) {
rowElems[rowElemIndex].addClass(options.lastRowClass);
rowElems[rowElemIndex].className += ' ' + options.lastRowClass;
}
rowElems[rowElemIndex].css('margin-right', (rowElemIndex < rowElems.length - 1)?options.minMargin : 0);
rowElems[rowElemIndex].style['margin-right'] = (rowElemIndex < rowElems.length - 1)?options.minMargin : 0;
}
}

Expand All @@ -93,10 +98,10 @@
var rowMargin = options.maxMargin - diff / (nrOfElems - 1);
diff = 0;
}
var $rowElem,
var rowElem,
widthDiff = 0;
for(var rowElemIndex = 0; rowElemIndex<rowElems.length; rowElemIndex++) {
$rowElem = rowElems[rowElemIndex];
rowElem = rowElems[rowElemIndex];
var rowElemWidth = itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].outerWidth;
var newWidth = rowElemWidth - (rowElemWidth / rowWidth) * diff;
var newHeight = Math.round(itemAttrs[index+parseInt(rowElemIndex)-rowElems.length+1].height * (newWidth / rowElemWidth));
Expand All @@ -107,18 +112,17 @@
widthDiff += 1 - newWidth % 1;
newWidth = Math.ceil(newWidth);
}
$rowElem.css({
width: newWidth,
height: newHeight,
"margin-right": (rowElemIndex < rowElems.length - 1)?rowMargin : 0
});
rowElem.style.cssText =
'width: ' + newWidth + 'px;' +
'height: ' + newHeight + 'px;' +
'margin-right: ' + ((rowElemIndex < rowElems.length - 1)?rowMargin : 0) + 'px';
if(rowElemIndex === 0) {
$rowElem.addClass(options.firstItemClass);
rowElem.className += ' ' + options.firstItemClass;
}
}
rowElems = [],
rowWidth = 0;
}
});
}
}
})(jQuery);
8 changes: 4 additions & 4 deletions jquery.row-grid.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 comments on commit d090f18

@yairEO
Copy link

@yairEO yairEO commented on d090f18 Mar 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you forgot to change the $container.children('.' + options.lastRowClass).removeClass(options.lastRowClass); line. you do not need to find all the children again, right after you have them 3 lines before in items variable. just use the .filter to get the ones you need from the items objects.

also, performance is still somewhat lagging when there are many items..this is due to too many DOM changes being made. I would recommend doing all the DOM changes on a copy of all the items, then inject them again.

you are also doing the exact SAME loop three times. combine everything into one loop. also, it's considered a bad habit to write var around your code. use the var word to initialize variables only on the top of each scope, and then use these variables where ever you wish.

@brunjo
Copy link
Owner Author

@brunjo brunjo commented on d090f18 Mar 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, there are still many things to do. I will improve it from time to time.
But I can not combine the three loops into one because I would write and read every time I pass the loop. This would force the browser to layout hundreds of times (read, write, relayout, read, write, relayout,…). Therefore I first remove all styles, then I get all things I need (height, width, etc.) and finally I set the new styles to the elements. This approach only forces two relayouts.

And again: Thanks for your help!

Please sign in to comment.