Тема: Селектори (JS)JQ vs JS
Характеристики
AMD FX-8320 Eight-Core Processor 3.50 GHz (4 GHz Turbo)
RAM 8,00 GB
JQuery - 3.1.1
Browser
Google Chrome
Version 56.0.2924.87 (64-bit)
<!DOCTYPE html>
<html>
<head>
<title>Selector</title>
<!--Begin debugging-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<!--End debugging-->
<style type="text/css">
* {
color: Black;
background-color: White;
font-size: 16px;
}
</style>
</head>
<body>
<p>Набір елементів для тестування селекторів JQuery
(Вибрані елементи виділяться червоним кольором і зеленим фоном)</p>
<!--Begin-->
<div>
<p>text</p>
<div id="divID">
-text (id="divID")
<p>-text</p>
<p>-text</p>
<div class="divClass">
--text (class="divClass")
<p>--text</p>
<p>---<span>text</span></p>
<p name="pName1">--text</p>
<p name="pName2">--text</p>
<a href="#">--a</a><br>
<a href="#" target='_blank'>--a (target='_blank')</a>
<form>
<br><input type="text" name="inputName1"/>
<br><input type="password" name="inputName2"/>
</form>
</div>
</div>
</div>
<!--End-->
<p>Виберіть селекторі</p>
<form>
<button type="button" id="run">Очистити</button>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
/*Повернути до налаштувань за замовчуванням використовуючи (JS з) бібліотеку JQ*/
function clearStyleSheetJQ() {
/*Clear*/
var ob = $("*");
ob.css('color', 'Black');
ob.css('background-color', 'White');
}
/*Повернути до налаштувань за замовчуванням використовуючи JS без бібліотеки JQ*/
function clearStyleSheetJS() {
/*Clear*/
var ob = document.getElementsByTagName("*"),
len = ob.length;
for (var i = 0; i < len; i++) {
ob.item(i).style.color = 'Black';
ob.item(i).style.backgroundColor = 'White';
}
}
/*Зазтосувати налаштування використовуючи (JS з бібліотеки) JQ*/
function setStyleSheetJQ(ob) {
/*Set*/
ob.css('color', 'Red');
ob.css('background-color', 'DarkGreen');
}
/*Повернути до налаштувань за замовчуванням використовуючи JS без бібліотеки JQ*/
function setStyleSheetJS(ob) {
/*Set*/
ob.style.color = 'Red';
ob.style.backgroundColor = 'DarkGreen';
}
/*Тест 1 - вибрати всі елементи JQ*/
function jqTest1(num) {
for (var i = 0; i < num; i++) {
clearStyleSheetJQ();
setStyleSheetJQ($("*"));
}
}
/*Тест 1 - вибрати всі елементи JS*/
function jsTest1(num) {
var ob, len;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
ob = document.getElementsByTagName("*");
len = ob.length;
for(var k = 0; k < len; k++)
{
setStyleSheetJS(ob.item(k));
}
}
}
/*Тест 2 - вибрати всі елементи де клас є divClass JQ*/
function jqTest2(num) {
for (var i = 0; i < num; i++) {
clearStyleSheetJQ();
setStyleSheetJQ($(".divClass"));
}
}
/*Тест 2 - вибрати всі елементи де клас є divClass JS*/
function jsTest2(num) {
var ob, len;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
ob = document.getElementsByClassName("divClass");
len = ob.length;
for(var k = 0; k < len; k++)
{
setStyleSheetJS(ob.item(k));
}
}
}
/*Тест 3 - вибір всіх елеметрів "p" з елементу де є клас divClass JQ*/
function jqTest3(num) {
for (var i = 0; i < num; i++) {
clearStyleSheetJQ();
setStyleSheetJQ($(".divClass p"));
}
}
/*А тут я вирішив зробити декілька варіантів для JS щоб з'ясувати який швидший*/
/*Звичайний вибір (використовуючи вкладені цикли)*/
function jsTest3_1(num) {
var ob, ob2 = new Array(),
len, len2;
for (var i = 0; i < num; i++) {
ob = document.getElementsByClassName("divClass");
len = ob.length;
for (var k = 0; k < len; k++) {
len2 = ob.item(k).getElementsByTagName("p").length;
for (var l = 0; l < len2; l++) {
ob2.push(ob.item(k).getElementsByTagName("p").item(l));
}
}
}
len = ob2.length;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
setStyleSheetJS(ob2[i]);
}
}
/*Вибір елемента за допомогою querySelector (так як в CSS і JQuery)*/
function jsTest3_2(num) {
var ob = document.querySelectorAll(".divClass p"),
len = ob.length;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
for (var k = 0; k < len; k++) {
setStyleSheetJS(ob[k]);
}
}
}
/*Спроба обійтись без вкладених циклів*/
function jsTest3_3(num) {
var ob = document.querySelectorAll(".divClass p");
for (var i = 0; i < num; i++)
{
clearStyleSheetJS();
ob.forEach(function(currentItem){
setStyleSheetJS(currentItem);
})
}
}
/*Ну і останній тест - знаходження по імені,
взагалі такого поняття як пошук по імені в JS немає
цей пошук називається пошук по атрибутах,
для JS замість імені є ідентифікатори і функція роботи з
ідентифікатором getElementById()
*/
function jqTest4(num) {
for (var i = 0; i < num; i++) {
clearStyleSheetJQ();
setStyleSheetJQ($("[name=pName1]"));
}
}
function jsTest4(num) {
var ob = document.querySelectorAll("[name=pName1]"),
len = ob.length;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
for (var k = 0; k < len; k++) {
setStyleSheetJS(ob[k]);
}
}
}
function jqTest5(num) {
for (var i = 0; i < num; i++) {
clearStyleSheetJQ();
setStyleSheetJQ($("[name]"));
}
}
function jsTest5(num) {
var ob = document.querySelectorAll("[name]"),
len = ob.length;
for (var i = 0; i < num; i++) {
clearStyleSheetJS();
for (var k = 0; k < len; k++) {
setStyleSheetJS(ob[k]);
}
}
}
$( "#run" ).on( "click", function() {
var num = 10000;
console.time('jsTest1');
jsTest1(num);
console.timeEnd('jsTest1');
console.time('jsTest2');
jsTest2(num);
console.timeEnd('jsTest2');
console.time('jsTest3_1');
jsTest3_1(num);
console.timeEnd('jsTest3_1');
console.time('jsTest3_2');
jsTest3_2(num);
console.timeEnd('jsTest3_2');
console.time('jsTest3_3');
jsTest3_3(num);
console.timeEnd('jsTest3_3');
console.time('jsTest4');
jsTest4(num);
console.timeEnd('jsTest4');
console.time('jsTest5');
jsTest5(num);
console.timeEnd('jsTest5');
console.time('jqTest1');
jqTest1(num);
console.timeEnd('jqTest1');
console.time('jqTest2');
jqTest2(num);
console.timeEnd('jqTest2');
console.time('jqTest3');
jqTest3(num);
console.timeEnd('jqTest3');
console.time('jqTest4');
jqTest4(num);
console.timeEnd('jqTest4');
console.time('jqTest5');
jqTest5(num);
console.timeEnd('jqTest5');
});
</script>
</body>
</html>Результати
Результати тесту
jsTest1: 1705.000ms
jsTest2: 600.000ms
jsTest3_1: 612.000ms
jsTest3_2: 692.000ms
jsTest3_3: 837.000ms
jsTest4: 595.000ms
jsTest5: 685.000ms
jqTest1: 5136.000ms
jqTest2: 2283.000ms
jqTest3: 2597.000ms
jqTest4: 2312.000ms
jqTest5: 2579.000ms
жартую... жартую... не жартую