Skip to content

Instantly share code, notes, and snippets.

@tomfun

tomfun/1.html

Created August 19, 2016 11:30
Show Gist options
  • Save tomfun/ee8fc68db77e9589506284d458c14994 to your computer and use it in GitHub Desktop.
Save tomfun/ee8fc68db77e9589506284d458c14994 to your computer and use it in GitHub Desktop.
Download ZIP
в случае еденичного (не кешируемого) запроса к дом, выигрывает одиночный вызов. такие ситуации на самом деле бывают очень часто, часто нужно сделать что-то единоразово в первую загрузку страницы. в остальном же, разумеется лучше использовать некий el для удобной работы.
Raw
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h1>Test 1</h1>
<div id="result">
</div>
<script>
measure(() => 1, 'nothing_test', 10);
</script>
</body>
</html>
Raw
doubleJQueryCall.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h2>One 'div', inside one 'a', double jQuey call</h2>
<pre>
var a0 = $('.el');
var a = a0.find('a.asdf');
</pre>
<div id="result">
</div>
<div class="el">
<a class="asdf" href="#">#</a>
</div>
<script>
measure(function() {
var a0 = $('.el');
var a = a0.find('a.asdf');
}, 'nothing_test', 10);
</script>
</body>
</html>
Raw
doubleJQueryCall2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h2>One 'div', inside two 'a', double jQuey call</h2>
<pre>
var a0 = $('.el');
var a = a0.find('a.asdf');
</pre>
<div id="result">
</div>
<div class="el">
<a class="asdf" href="#">#</a>
<a class="asdf" href="#">#</a>
</div>
<script>
measure(function() {
var a0 = $('.el');
var a = a0.find('a.asdf');
}, 'nothing_test', 10);
</script>
</body>
</html>
Raw
measure.js
(function () {
'use strict';
function realMeasure(doWork, name, timeReload) {
var keyReloads = name + '_reloads';
var keyTimes = name + '_times';
var r = localStorage.getItem(keyReloads);
if (!r || r >= timeReload) {
localStorage.setItem(keyReloads, 0);
localStorage.setItem(keyTimes, JSON.stringify([]));
r = 0;
}
var tBegin = performance.now();
doWork();
var tEnd = performance.now();
var previousMeasurements = JSON.parse(localStorage.getItem(keyTimes));
previousMeasurements.push(tEnd - tBegin);
localStorage.setItem(keyTimes, JSON.stringify(previousMeasurements));
localStorage.setItem(keyReloads, ++r);
if (r < timeReload) {
window.location.reload();
}
console.log(name);
console.log(previousMeasurements);
var average = previousMeasurements.reduce(function (a, v) {
return a + v;
}, 0) / previousMeasurements.length;
console.log(average);
document.getElementById('result').innerHTML = average + ' ms\n<br/><small>' + previousMeasurements.reduce(function (a, v) {
return a + v + '<br/>';
}, '') + '</small>';
}
function measure(doWork, name, timeReload) {
setTimeout(function () {
realMeasure(doWork, name, timeReload);
}, 800)
}
window.measure = measure;
})();
Raw
singleJQueryCall.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h2>One 'div', inside one 'a', single jQuey call</h2>
<pre>
var a = $('.el a.asdf');
</pre>
<div id="result">
</div>
<div class="el">
<a class="asdf" href="#">#</a>
</div>
<script>
measure(function() {
var a = $('.el a.asdf');
}, 'nothing_test', 10);
</script>
</body>
</html>
Raw
singleJQueryCall2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h2>One 'div', inside two 'a', single jQuey call</h2>
<pre>
var a = $('.el a.asdf');
</pre>
<div id="result">
</div>
<div class="el">
<a class="asdf" href="#">#</a>
<a class="asdf" href="#">#</a>
</div>
<!--<div class="el">-->
<!--<a class="asdf" href="#">#</a>-->
<!--</div>-->
<script>
measure(function() {
var a = $('.el a.asdf');
}, 'nothing_test', 10);
</script>
</body>
</html>
Raw
singleJQueryCall3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Test selectors</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="measure.js"></script>
</head>
<body>
<h1>Speed test</h1>
<h2>Two 'div', inside two 'a' (2x2), single jQuey call</h2>
<h3>Only single call</h3>
<pre>
var a = $('.el a.asdf');
</pre>
<div id="result">
</div>
<div class="el">
<a class="asdf" href="#">#</a>
<a class="asdf" href="#">#</a>
</div>
<div class="el">
<a class="asdf" href="#">#</a>
<a class="asdf" href="#">#</a>
</div>
<script>
measure(function() {
var a = $('.el a.asdf');
}, 'nothing_test', 10);
</script>
</body>
</html>
@tomfun
Copy link
Author

tomfun commented Aug 19, 2016

тестировал в хроме и мозиле, результаты, как я и ожидал, 2 вызова работают НЕ быстрее одиночного вызова.
напротив, 1 вызов в 2 - 2.5 раза быстрее. кроме того, в случае, когда нам нужно несколько элементов (2_2 или 3_1) возможен только один вариант, второй рассматривать не практично.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment