Created
May 2, 2016 00:38
-
-
Save korczis/7a04cdb5d043eef76c671180d4bd37a6 to your computer and use it in GitHub Desktop.
Example of Deferred Calculation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
</head> | |
<body> | |
<h1>Deferred Calculation</h1> | |
<div id="results" style="background-color: #FF00FF"></div> | |
<script type="text/javascript"> | |
var input = []; | |
for (var i = 0; i < 1e5; i++) { | |
input.push(i); | |
} | |
function appendResult(name, res, time) { | |
console.log(name, res, time); | |
$("#results").append("<div>" + name + " - " + res + " - " + time + "</div>"); | |
} | |
function process(input, func, done) { | |
var iterationsPerTick = 1000; | |
var worker = function (input, start, num, func) { | |
// console.log("Worker iteration", start, num); | |
for (var i = start; i < (start + num); i++) { | |
func(input[i]); | |
} | |
var rest = input.length - (start + num); | |
if (rest > 0) { | |
requestAnimationFrame(function () { | |
worker(input, start + num, Math.min(iterationsPerTick), func); | |
}); | |
} else { | |
if (done) { | |
done(); | |
} | |
} | |
} | |
requestAnimationFrame(function () { | |
worker(input, 0, Math.min(input.length, iterationsPerTick), func); | |
}); | |
} | |
function step(i) { | |
var res = 0; | |
for (var i = 0; i < 1e5; i++) { | |
res += i; | |
} | |
return res; | |
} | |
function runImmediately() { | |
var start = performance.now(); | |
var res = 0; | |
for (var i = 0; i < input.length; i++) { | |
res += step(i); | |
} | |
var diff = performance.now() - start; | |
appendResult('runImmediately', res, diff); | |
} | |
function runDeferred() { | |
var start = performance.now(); | |
var res = 0; | |
process(input, | |
function (item) { | |
res += step(item); | |
}, | |
function () { | |
var diff = performance.now() - start; | |
appendResult('runDeferred', res, diff); | |
} | |
); | |
} | |
runImmediately(); | |
runDeferred(); | |
</script> | |
<div> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin risus quis lacus imperdiet, sit amet | |
tincidunt mauris sagittis. Nulla laoreet justo vel ligula porttitor ornare. Sed magna augue, finibus a tempus et, | |
feugiat id nunc. Nulla vel tellus orci. Morbi gravida aliquam magna, a eleifend elit pretium a. Quisque felis enim, | |
eleifend in varius et, scelerisque efficitur nisl. Pellentesque nec lacinia justo. Class aptent taciti sociosqu ad | |
litora torquent per conubia nostra, per inceptos himenaeos. | |
</p> | |
<p> | |
Vestibulum at mollis lectus. Suspendisse libero felis, tincidunt vitae orci ac, gravida eleifend lacus. Nulla luctus | |
quam ante, sed elementum felis eleifend et. Morbi egestas sem id pharetra facilisis. Sed eleifend metus eget quam | |
mollis, non imperdiet felis sollicitudin. Nullam sollicitudin elit ut tellus dictum iaculis. Curabitur turpis justo, | |
feugiat eu mauris nec, placerat ornare urna. Aliquam erat volutpat. Phasellus pulvinar, mi a consectetur porttitor, | |
mauris augue elementum risus, sed ultrices sapien felis in ex. Maecenas ornare augue id finibus tempor. In ornare, | |
velit sed hendrerit tincidunt, ante nisl consequat est, eget porttitor nisl nisi in lectus. Quisque bibendum massa | |
at tempor sagittis. | |
</p> | |
<p> | |
Donec pulvinar ultricies magna in cursus. Duis ac ante tempus, laoreet arcu et, finibus felis. Donec ut nulla eros. | |
Donec porta, sem id cursus bibendum, tellus enim feugiat leo, a pharetra enim turpis et lacus. Nunc tincidunt, ipsum | |
in mattis feugiat, ipsum libero gravida mi, at tincidunt massa libero ac libero. Quisque sodales turpis in nisi | |
porttitor, eget iaculis quam luctus. Cras dui metus, semper a vulputate sed, vehicula non lectus. Phasellus dictum | |
ligula et dui eleifend blandit. Phasellus imperdiet metus metus, et iaculis libero congue vitae. Phasellus finibus | |
bibendum magna eget hendrerit. Pellentesque tristique, justo at volutpat molestie, nulla eros rutrum leo, vitae | |
mattis odio quam in ligula. In sodales urna ut leo commodo, nec facilisis sem finibus. Fusce eleifend fringilla | |
vehicula. Quisque id fermentum diam. Praesent pellentesque imperdiet elit id bibendum. Quisque tempor, enim quis | |
egestas facilisis, velit urna facilisis nisl, ac sodales elit ligula nec libero. | |
</p> | |
<p> | |
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam scelerisque justo at justo ullamcorper laoreet. | |
Nam mollis enim tristique, suscipit neque id, tempor turpis. Phasellus in sapien et enim aliquam pretium vitae non | |
arcu. Maecenas maximus semper arcu a gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, | |
per inceptos himenaeos. Ut sagittis augue ac pretium aliquet. Donec a arcu pharetra odio ultrices dapibus eu quis | |
neque. Maecenas id lectus quis quam commodo pretium suscipit sit amet libero. Pellentesque consectetur id leo in | |
rhoncus. Sed quis consequat massa. Maecenas eget sagittis lacus. Nullam feugiat nibh at ante pellentesque | |
pellentesque vitae ac odio. Donec nisl ante, dapibus nec lorem eget, pretium consectetur dui. | |
</p> | |
<p> | |
Mauris et ligula est. Duis accumsan suscipit vestibulum. Donec euismod ullamcorper neque ut sagittis. Donec porta | |
viverra dui, eget sagittis purus malesuada non. Sed porta est eu felis placerat, vel finibus ligula iaculis. Quisque | |
viverra ullamcorper augue finibus accumsan. Fusce nulla felis, pharetra a risus sit amet, accumsan pretium felis. | |
Mauris mollis, ipsum ut feugiat tristique, nisi sem vulputate velit, et varius tortor odio luctus lorem. Nulla | |
euismod mauris sed dolor blandit aliquet. | |
</p> | |
<p> | |
In pellentesque suscipit lectus, eget bibendum leo volutpat quis. Maecenas purus metus, feugiat et arcu vel, mollis | |
commodo nunc. Sed consectetur tellus quis nunc imperdiet interdum. Quisque ac ligula egestas, facilisis augue sed, | |
tempor odio. In viverra et nunc id luctus. Donec pulvinar purus id nulla efficitur aliquam. Nam arcu leo, ultrices a | |
metus id, bibendum condimentum enim. Phasellus malesuada eros dapibus ipsum egestas dignissim. Ut pharetra turpis | |
velit, ut semper metus ultrices at. Proin id turpis convallis, tristique felis mattis, cursus dui. Aliquam erat | |
volutpat. Curabitur dignissim, turpis eget malesuada gravida, sem erat molestie nibh, et rutrum diam metus vitae | |
tellus. Donec posuere eu elit id interdum. Sed ac orci commodo, commodo massa at, scelerisque diam. | |
</p> | |
<p> | |
Morbi sed libero sed ipsum malesuada dictum vel ut purus. Quisque gravida molestie finibus. Nunc mattis justo ante. | |
Donec scelerisque sapien eget euismod fermentum. Vivamus auctor, felis in varius tristique, massa elit lobortis | |
odio, quis efficitur metus dui sed dui. Vivamus gravida interdum ante eu molestie. Donec pharetra felis quis | |
convallis malesuada. Sed tempus turpis nisi, a elementum sem consectetur vel. Fusce aliquet arcu vitae augue | |
laoreet, sit amet ornare lorem volutpat. Etiam ornare gravida quam, ut lobortis libero pretium a. Phasellus eget | |
nisl non arcu faucibus semper sit amet ut risus. Nullam quam dolor, consectetur a sagittis vel, posuere ac nulla. | |
Sed sollicitudin quis diam posuere tempor. Nunc quis risus vestibulum tortor eleifend volutpat. Proin lobortis nibh | |
sit amet massa eleifend, eu egestas metus porttitor. | |
</p> | |
<p> | |
Mauris laoreet in arcu a facilisis. Proin et lacinia lectus, at fringilla nisl. Fusce non pellentesque sapien, in | |
porttitor justo. Nam a justo mauris. In in urna blandit, suscipit nibh vel, sodales tellus. Ut congue nibh eget | |
ipsum tincidunt placerat. Praesent condimentum tortor vel dictum lobortis. In gravida varius dolor, in dapibus elit | |
ornare quis. Maecenas a odio vel neque ullamcorper tincidunt. Fusce auctor at dui condimentum mollis. In vestibulum | |
turpis dui, et malesuada nulla pulvinar sit amet. Vestibulum pharetra sagittis lacus et pharetra. Ut pharetra ex at | |
convallis iaculis. Aliquam tellus tellus, hendrerit ac hendrerit at, tincidunt eu massa. | |
</p> | |
<p> | |
Curabitur in porttitor turpis, vel ullamcorper lorem. In vel sem vitae erat molestie hendrerit. Proin ipsum nisi, | |
bibendum non sem id, pharetra ornare magna. Cras dictum, sem a ullamcorper euismod, mi dui faucibus lacus, et | |
finibus enim risus sit amet mauris. Sed eu condimentum tellus, sed ornare massa. Donec scelerisque eget dolor quis | |
mollis. Aliquam ut placerat quam. Nullam interdum facilisis nisi id vehicula. Nunc et erat vitae lacus tincidunt | |
posuere sed sit amet est. Ut tincidunt vestibulum libero, quis vestibulum dui finibus eu. | |
</p> | |
<p> | |
Praesent ac arcu quis lectus laoreet dictum. Pellentesque iaculis erat in consequat lacinia. Fusce felis leo, tempus | |
eget scelerisque vel, convallis non eros. Maecenas eu pharetra sapien. Morbi blandit accumsan mi, et hendrerit | |
ligula dictum at. Nunc elementum eleifend leo, quis blandit ex varius quis. Integer nec lacinia velit. Morbi gravida | |
velit non congue iaculis. Donec condimentum elementum viverra. Phasellus nulla erat, mattis vitae felis sagittis, | |
semper ornare quam. | |
</p> | |
<p> | |
Cras congue eleifend mauris, id vehicula quam ultricies sit amet. Proin condimentum sem nec nulla commodo, a posuere | |
elit efficitur. In eget ex cursus, varius dui quis, eleifend leo. Vivamus ante lacus, porttitor id placerat sit | |
amet, sagittis at lorem. Curabitur et erat in sem congue ultrices nec in lacus. Nullam malesuada purus at tortor | |
molestie auctor. Donec fermentum vestibulum ante a eleifend. In pellentesque suscipit massa eget feugiat. Nulla | |
iaculis nisi vitae turpis tristique rhoncus. | |
</p> | |
<p> | |
Sed ullamcorper, massa blandit fermentum fringilla, justo purus posuere quam, et feugiat urna libero eu diam. Cras | |
volutpat sed mauris in mollis. Curabitur risus magna, consequat ut commodo vitae, fermentum nec felis. Vivamus | |
blandit nisi scelerisque luctus tempus. Curabitur a posuere magna, eu mattis orci. Donec ut molestie est. Sed at | |
quam ut turpis efficitur imperdiet at eu dui. Donec non sapien commodo, ullamcorper purus pulvinar, sodales nunc. | |
Integer ultricies hendrerit magna in luctus. Nullam tincidunt odio eleifend ipsum gravida finibus at vitae sapien. | |
Duis scelerisque elit in turpis viverra dignissim. Suspendisse facilisis vitae risus sed egestas. | |
</p> | |
<p> | |
Pellentesque ut rutrum libero, a hendrerit augue. In hac habitasse platea dictumst. Proin ultricies sed sapien ut | |
pretium. Etiam venenatis aliquam risus, nec egestas nibh. Nunc fermentum urna ut lorem vestibulum scelerisque. | |
Curabitur blandit ipsum at velit convallis, sed pulvinar mauris imperdiet. Phasellus id quam hendrerit, gravida | |
nulla ac, gravida libero. Nam auctor eu elit a maximus. | |
</p> | |
<p> | |
Pellentesque sit amet ligula imperdiet, tempor urna vitae, porta neque. Nulla condimentum est in neque posuere, | |
aliquam sodales sem mattis. Nulla consectetur a erat quis volutpat. Maecenas vitae gravida sem. Cras sed augue a | |
justo placerat accumsan. Cras ullamcorper tellus et condimentum semper. Nunc hendrerit lorem sit amet justo | |
convallis vehicula. In tincidunt, mi a consectetur euismod, risus massa aliquam ipsum, eget euismod mauris mauris a | |
eros. Pellentesque non ullamcorper ligula. | |
</p> | |
<p> | |
Etiam malesuada lacus quis risus auctor, eu facilisis leo posuere. Nulla faucibus massa eu mi euismod tincidunt. | |
Aliquam non pharetra neque. Aliquam mollis nisl orci, quis fermentum nisi consequat nec. Pellentesque habitant morbi | |
tristique senectus et netus et malesuada fames ac turpis egestas. Proin pretium justo in dui laoreet vulputate. | |
Aenean sem ante, aliquam eu arcu vitae, bibendum lobortis est. Sed non magna nec velit commodo malesuada ut nec dui. | |
</p> | |
<p> | |
Morbi porta metus vel rhoncus vehicula. Vestibulum mattis auctor neque. Fusce imperdiet metus tellus, id | |
pellentesque est commodo eget. Curabitur eu rutrum nisl, ut gravida nulla. Proin aliquet, mi at pharetra elementum, | |
sapien arcu condimentum arcu, nec condimentum enim nisi et nibh. Integer rutrum nisi id turpis ultrices facilisis. | |
Proin lobortis velit eget neque venenatis fringilla. | |
</p> | |
<p> | |
Aliquam sit amet porttitor elit. Curabitur at sapien est. Aenean risus mi, vestibulum nec ante ac, pellentesque | |
pretium nunc. Integer nec mauris lobortis, elementum augue at, finibus enim. Sed dolor sapien, scelerisque in diam | |
in, porta cursus erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse quis velit id dui | |
ornare accumsan. Duis efficitur, odio sed gravida pharetra, mi arcu maximus urna, sit amet egestas dui libero a | |
lacus. Nullam rutrum nunc orci, at vestibulum nisi scelerisque vitae. | |
</p> | |
<p> | |
Nulla nec neque vitae elit lobortis fringilla ac nec metus. Curabitur ante sem, molestie ut mi id, condimentum | |
fringilla lorem. Donec vel arcu ut ipsum faucibus faucibus non in eros. Fusce sed luctus odio, consectetur interdum | |
tortor. Donec ac pretium mi. In mollis tempus venenatis. Pellentesque convallis purus at ex facilisis iaculis. Donec | |
lacinia mattis leo sit amet volutpat. Praesent condimentum porttitor odio. Etiam porta, ex et pellentesque bibendum, | |
justo odio blandit felis, ut tempus lorem metus vel justo. Sed blandit eleifend sagittis. Integer vitae vehicula | |
elit, et tempor lacus. Duis pulvinar ut metus nec dapibus. Suspendisse hendrerit ipsum at mattis facilisis. | |
</p> | |
<p> | |
Phasellus suscipit, dolor in sollicitudin fermentum, nulla tellus facilisis velit, imperdiet hendrerit leo mi | |
tristique lacus. Quisque et sollicitudin nunc. Curabitur porttitor diam tortor, sit amet sodales tellus molestie | |
pharetra. Nulla facilisi. Mauris dictum, sapien vel aliquam consectetur, arcu lorem dictum augue, ut vestibulum | |
magna lectus quis velit. Pellentesque elit orci, ullamcorper eu quam vel, mattis feugiat orci. Pellentesque | |
facilisis id lacus euismod finibus. Aenean imperdiet velit quis sollicitudin convallis. Cras posuere rhoncus lacus, | |
sed mollis justo. Quisque eleifend turpis leo, eleifend placerat tortor condimentum in. | |
</p> | |
<p> | |
Nulla pretium est a suscipit ullamcorper. Aenean sollicitudin lorem et viverra faucibus. Mauris pretium dapibus | |
mauris, elementum fermentum augue commodo ut. Proin vitae mauris tempor, fermentum tortor id, dignissim tellus. | |
Nullam egestas gravida nibh nec aliquet. Nunc gravida eros id risus mollis, sit amet porttitor nunc eleifend. Proin | |
nec odio a velit dignissim faucibus vel sit amet neque. Cras mauris ante, ornare a magna non, facilisis ullamcorper | |
lacus. Nullam pretium mattis urna a sollicitudin. Sed mollis sapien auctor, malesuada mi nec, molestie justo. | |
</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment