Skip to content

Instantly share code, notes, and snippets.

@samgiles

samgiles/dom_recycler

Created July 17, 2014 15:42
Show Gist options
  • Save samgiles/d38ad7a3186a47fb4063 to your computer and use it in GitHub Desktop.
Save samgiles/d38ad7a3186a47fb4063 to your computer and use it in GitHub Desktop.
Download ZIP
Old DOM Element recycling test
Raw
dom_recycler
<!DOCTYPE html>
<html>
<head>
<title>DOM Recycler</title>
<style>
/* Styles not relevant to scrolling (just to make the demo look neat and tidy) */
body { font-family: sans-serif; -webkit-text-size-adjust: 100% }
p { margin: 0.7em; color: gray }
.description { color: black }
/* Set the size of the scroller. Visible border to make demo easier to understand */
#scrollable { width: 400px; height: 400px; border: 1px solid #555; overflow: hidden }
</style>
</head>
<body>
<div id='scrollable'>
<p class="description">This example uses a very simple setup: a &lt;div&gt; which is set to a height of 400px, and then an FTScroller invocation on that element. Horizontal scrolling has been disabled for a slight performance improvement as it won't be needed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script type="text/javascript">
(function() {
var domElements = {},
docCreateElement = (function() {
var create = document.createElement;
return function(tagName) {
return create.apply(document, [tagName]);
}
}()),
elementPool = {};
var gc = function(tagName) {
if (domElements.hasOwnProperty(tagName)) {
for(var i = 0; i < domElements[tagName].length; ++i) {
if (!domElements[tagName][i].parentElement && !domElements[tagName][i].hasChildNodes() && !domElements[tagName][i].previousSibling && !domElements[tagName][i].nextSibling) {
elementPool[tagName].push(domElements[tagName][i]);
domElements[tagName].splice(i, 1);
}
}
}
};
var createElement = function(tagName) {
var tag = tagName.toLowerCase();
if (!elementPool[tag]) {
elementPool[tag] = [];
domElements[tag] = [];
}
if (elementPool[tag].length > 0) {
var element = elementPool[tag].shift();
domElements[tag].push(element);
return element;
}
// See if there are any available Elements.
gc(tag);
if (elementPool[tag].length > 0) {
var element = elementPool[tag].shift();
domElements[tag].push(element);
return element;
}
var element = docCreateElement(tag);
domElements[tag].push(element);
return element;
};
document.createElement = createElement;
}());
</script>
<!--Include FT Scroller source (can be included at any point as long as it's loaded before being used)-->
<script type="text/javascript" src="https://raw.github.com/ftlabs/ftscroller/master/src/ftscroller.js"></script>
<!--Set up the scroller, disabling horizontal scrolling-->
<script>
var scroller = new FTScroller(document.getElementById('scrollable'), {
scrollingX: false
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment