Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix test cases. #1

Merged
merged 3 commits into from
Dec 23, 2014
Merged

Fix test cases. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c502e4
Fix test cases.
jridgewell Dec 23, 2014
173f0ad
Use cloning. Sorry, screwed that up.
jridgewell Dec 23, 2014
4fa5153
Add Test 4.
jridgewell Dec 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ <h1>
<li><button id="test1">Run Test 1</button></li>
<li><button id="test2">Run Test 2</button></li>
<li><button id="test3">Run Test 3</button></li>
<li><button id="test4">Run Test 4</button></li>
</ul>
<div id='test'>
The test will be run against this element.
Expand All @@ -30,5 +31,6 @@ <h1>
<script src='test-one.js'></script>
<script src='test-two.js'></script>
<script src='test-three.js'></script>
<script src='test-four.js'></script>
</body>
</html>
44 changes: 44 additions & 0 deletions test-four.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
//
// Like testTwo, but we detach the top level view.
// This leads to a single DOM op instead
// of `n+1` DOM ops.
//

(function() {
var btn = document.querySelector('#test4');

btn.addEventListener('click', function() {

// Create our list, and append it to the test node
var $list = $('<ul></ul>');
var lis = new Array(10000);
for(var i=0; i<lis.length; i++) {
var $li = $('<li></li>').addClass('l'+i);
lis[i] = $li;
$list.append($li);
}
test.$el.append($list);

// Rather than create a new tree from a template, I'm going ahead and cloning it
var $listClone = $list.clone();

// Kick off the test
test.start('three');

var $span = $('<span>').insertAfter($list);
$list.detach();

// Loop through the children in the cloned tree, replacing
// them with cloned versions of the elements in the existing
// tree. This causes 0 ops
$listClone.children().each(function(index, li) {
$(li).replaceWith(lis[index]);
});

// The only op is the replace
$list.empty().append($listClone);
$span.replaceWith($list);

test.stop();
});
})();
11 changes: 7 additions & 4 deletions test-three.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@

// Create our list, and append it to the test node
var $list = $('<ul></ul>');
for(var i=0; i<10000; i++) {
$list.append($('<li></li>').addClass('l'+i));
var lis = new Array(10000);
for(var i=0; i<lis.length; i++) {
var $li = $('<li></li>').addClass('l'+i);
lis[i] = $li;
$list.append($li);
}
test.$el.append($list);

Expand All @@ -26,11 +29,11 @@
// them with cloned versions of the elements in the existing
Copy link
Owner

Choose a reason for hiding this comment

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

I think we want the clone to deeply clone data and events, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Correct, let me update.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually, it defaults to the value of withDataAndEvents. 😃

Copy link
Owner

Choose a reason for hiding this comment

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

Oh, would ya look at that!

// tree. This causes 0 ops
$listClone.children().each(function(index, li) {
$(li).replaceWith(test.$el.find('.'+li.className).clone(true, true));
$(li).replaceWith(lis[index].clone(true));
});

// The only op is the replace
test.$el.find('ul').replaceWith($listClone);
test.$el.find('ul').empty().append($listClone);

test.stop();
});
Expand Down
13 changes: 9 additions & 4 deletions test-two.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@

// Create our list, and append it to the test node
var $list = $('<ul></ul>');
for(var i=0; i<10000; i++) {
$list.append($('<li></li>').addClass('l'+i));
var lis = new Array(10000);
for(var i=0; i<lis.length; i++) {
var $li = $('<li></li>').addClass('l'+i);
lis[i] = $li;
$list.append($li);
}
test.$el.append($list);

Expand All @@ -23,15 +26,17 @@
// Kick off the test
test.start('two');

$list.contents().detach();
Copy link
Owner

Choose a reason for hiding this comment

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

A very crucial line :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Very. See #render.

Using the "render" and "rendered" events, you can get within ~5ms of the placeholder approach I put in Test 4, all at the Dev's discretion. I didn't want to do this by default, because someone is invariably going to to to globally query while it's detached...

view.on('render', function() {
  this._$span = Backbone.$('<span>').insertAfter(this.$el);
  this.$el.detach();
});
view.on('rendered', function() {
  this._$span.replaceWith(this.$el);
  delete this._$span;
});


// Loop through the children in the cloned tree, replacing
// them with the children in the existing tree. This gives
// us 4 removal ops
$listClone.children().each(function(index, li) {
$(li).replaceWith(test.$el.find('.'+li.className));
$(li).replaceWith(lis[index]);
});

// The 5th op is the replace
test.$el.find('ul').replaceWith($listClone);
test.$el.find('ul').append($listClone.contents());

test.stop();
});
Expand Down