Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2018, 21:19
Новичок на форуме
Отправить личное сообщение для somejs Посмотреть профиль Найти все сообщения от somejs
 
Регистрация: 18.05.2018
Сообщений: 9

Переменная в классе или датасете
Приветствую всех. Как-то так вышло, что еще давно пришла в голову идея передавать переменные из html в js через имя или класс. Уже как давно используется dataset. Но, вот, провел эксперимент:
Создал обычный селект (эта часть кода не входит в эксперимент):
var select = document.createElement("select");
select.classList.add("a-b-c");
select.id = "s";
select.dataset.info = "{'a':'a','b':'b','c':'c'}";
document.body.appendChild(select);

А вот тут уже пошел эксперимент - извлекаю переменные при помощи резки:

var result = document.getElementById('s').className.toString(). split("-");
console.log(result);

и при помощи датасета:

var resultx = document.getElementById('s').dataset.info;
console.log(resultx);

Результат получился такой:
(3) ["a", "b", "c"]
name time = 3.6999999974796083

{'a':'a','b':'b','c':'c'}
dataset time = 15.700000003562309

Во сколько раз быстрее даже со split получается извлечь переменные из класса. Но загрузил код в бенчмарк (http://jsben.ch) и получил такую, вот, картинку (в приложении). Дык, как это работает, что быстрее, стоит ли извращаться или спокойно использовать датасеты? Интересны адекватные объяснения.
https://scontent.fiev2-1.fna.fbcdn.n...&oe=5 B9A109A
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 21:30
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

document.getElementById('s').className.toString(). split("-");

класснейм уже стринг
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2018, 22:26
Новичок на форуме
Отправить личное сообщение для somejs Посмотреть профиль Найти все сообщения от somejs
 
Регистрация: 18.05.2018
Сообщений: 9

Лишнее настрочил, согласен. Но на скорость не повлияло все равно.
http://jsben.ch/C7q0c
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2018, 22:30
Новичок на форуме
Отправить личное сообщение для somejs Посмотреть профиль Найти все сообщения от somejs
 
Регистрация: 18.05.2018
Сообщений: 9

Проделал несколько раз и получается такая картина, что датасет первый раз исполняется медленнее, но затем набирает скорости и исполняется быстрее. А бывает так, что датасет сразу выдает хорошие результаты. Однако у меня на локалхосте датасет все равно проигрывает.
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2018, 22:49
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

somejs,
Раз ваш датасет быстрей и без доп заморочек используйте его.
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2018, 22:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

когда гоняют бенчмарки для того чтобы увидеть конкретную разницу методов, все общие методы и вообще весть код который к ним не относится из теста выносят нафик, оставляя только то, без чего тестировать не удастся.
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2018, 22:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

http://jsben.ch/bxpw5
Ответить с цитированием
  #8 (permalink)  
Старый 18.05.2018, 23:17
Новичок на форуме
Отправить личное сообщение для somejs Посмотреть профиль Найти все сообщения от somejs
 
Регистрация: 18.05.2018
Сообщений: 9

j0hnik,
Благодарю за правку теста. Вынес также у себя на локалхосте. Результат такой:
name time = 0.09999999747378752

dataset time = 15.900000005785841

Что-то не шуточно проигрывает датасет, когда бенчмарк говорит об обратном.

Вот, сохраните в хтмл и запустите. В идеале, методы делал на две страницы, а тут слил для удобства сбросить.

<html>

<body>
<p id="p1"></p>
<p id="p2"></p>
<script type="text/javascript">
var select = document.createElement("select"); 
select.classList.add("a-b-c"); 
select.id = "s"; 
select.dataset.info = "{'a':'a','b':'b','c':'c'}"; 
document.body.appendChild(select); 
var el = document.getElementById('s');

var time = performance.now();

// some code 
el.className.split("-");

time = performance.now() - time;
document.getElementById('p1').innerHTML="name time = "+time;


var timex = performance.now();

// some code 
el.dataset.info;

timex = performance.now() - time;
document.getElementById('p2').innerHTML="dataset time = "+timex;
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2018, 23:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от somejs
Вот, сохраните в хтмл и запустите.
[HTML run][/HTML]

Ответить с цитированием
  #10 (permalink)  
Старый 18.05.2018, 23:35
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

somejs,
[HTML run][/HTML]
-запускаемый код

переставьте ваши замеры местами и увидите другой результат.

а еще тест от теста разброс огромный

чтобы performance хоть как то адекватно показал скорость нужен цикл и много итераций, их количество зависит от "тяжести" кода.

для того и существуют бенчмарки, чтобы не заворачиваться а закинуть и посмотреть.

https://jsperf.com/ - этот я считаю самым адекватным, в вашем присутствует разброс. больше 1%, (раз замерил 83%, повторно мерию +84%)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Javascript чат-бот FanAizu Общие вопросы Javascript 5 30.01.2014 03:00
подключать jquery-ui.custom.js или jquery-ui.custom.min.js? Faab jQuery 4 11.10.2013 20:53
Игра орел или решка на jquery. В любом случаи выводит вы проиграли! Dimaz jQuery 4 25.12.2009 15:04
Удалить ряд символов перед или после курсора до определенного сивола brd Javascript под браузер 3 30.10.2009 08:20
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 15:25