Skip to content

Instantly share code, notes, and snippets.

@yitsushi

yitsushi/app.js

Last active August 29, 2015 13:57
Show Gist options
  • Save yitsushi/9508560 to your computer and use it in GitHub Desktop.
Save yitsushi/9508560 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
// Új Benchmark.js instance
var suite = new Benchmark.Suite();
suite
// hozzáadjuk a VanillaJs querySelectorAll-os verziót
.add('Vanilla', function() {
var items = document.querySelectorAll('#container .item');
for (var i = 0; i < items.length; i++) {
items[i].innetHTML = 'Item ' + (i + 1) + " v2";
}
})
// hozzáadjuk a full jQuerty szemléletűt
.add('jQuery', function() {
jQuery('#container .item').each(function(index, item) {
jQuery(item).html('Item ' + (index + 1) + " v2");
});
})
// majd ugye azt, ahol a HTML módosítást nem jQuery végzi
// csak a DOM-ban való keresést
.add('jQuery with Vanilla', function() {
jQuery('#container .item').each(function(index, item) {
item.innetHTML = 'Item ' + (index + 1) + " v2";
});
})
// ezek után megfordítjuk és a keresést a querySelectorAll végzi,
// de a DOM módosítást már a jQuery kényelmes html() metódusa
.add('jQuery with Vanilla v2', function() {
var items = document.querySelectorAll('#container .item');
for (var i = 0; i < items.length; i++) {
jQuery(items[i]).html('Item ' + (i + 1) + " v2");
}
})
// és végül egy VanillaJs, ami kikérdezi ID alapján a szülőelemet,
// majd annak class alapján a nekünk kellő gyerekeit
.add('Vanilla old', function() {
var items = document.getElementById('container').getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].innetHTML = 'Item ' + (i + 1) + " v2";
}
})
// amikor elindul kiírjuk, hogy start, hogy tudjuk mikor indult el
.on('start', function(event) {
console.log("Start...");
})
// ha vége egy tesztnek, akkor írjuk ki az adott eset eredményét, hogy lássuk
.on('cycle', function(event) {
console.log(String(event.target));
})
// ha végeztünk mindennel, akkor pedig írjuk ki a leggyorsabbat
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').pluck('name'));
})
// végül pedig indítsuk el. async true, mert miért ne :)
// Ha false-ra állítod, akkor se lesz más az eredmény.
.run({ 'async': false });
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Benchmark</title>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
<!-- CDN-ről betöltjüj a jQuery legfrissebb verzióját -->
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!-- betöltjük a benchmark.js-t -->
<script src="benchmark.js"></script>
<!-- majd a végén az app.js-t, ami majd a teszteket tartalmazza -->
<script src="app.js"></script>
</body>
</html>
Raw
jquery.js
jQuery('#container .item').each(function(index, item) {
jQuery(item).html('Item ' + (index + 1) + " v2");
});
Raw
jquery_with_vanilla.js
jQuery('#container .item').each(function(index, item) {
item.innetHTML = 'Item ' + (index + 1) + " v2";
});
Raw
jquery_with_vanilla_v2.js
var items = document.querySelectorAll('#container .item');
for (var i = 0; i < items.length; i++) {
jQuery(items[i]).html('Item ' + (i + 1) + " v2");
}
Raw
vanilla.js
var items = document.querySelectorAll('#container .item');
for (var i = 0; i < items.length; i++) {
items[i].innetHTML = 'Item ' + (i + 1) + " v2";
}
Raw
vanilla_old.js
var items = document.getElementById('container').getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].innetHTML = 'Item ' + (i + 1) + " v2";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment