Что быстрее, и следовательно, что лучше использовать CSS или JavaScript. К примеру, есть группа элементов, и мне надо выделить один из них, так вот, как это лучше сделать, добавлением нового класса (и след. нового стиля) или изменить его свойства с помощью JavaScript? Речь идет не о чистом JavaScript, но для него вопрос тоже актуален, а об GWT.
Чистый js:
document.write('<br>');
var s = performance.now();
for (var i = 0; i < 100000; ++i)
document.body.style.border = '1px red solid';
document.write(performance.now() - s);
document.write('<br>');
s = performance.now();
for (var i = 0; i < 100000; ++i)
document.body.classList.add('redBorder');
document.body.classList.remove('redBorder');
document.write(performance.now() - s);.redBorder {
border: 1px red solid;
}Добавление класса происходит быстрее (у меня - раз в 25-30), тем более, что можно сначала проверить наличие класса. Если же надо выделить элемент при наведении, то можно обойтись и css-псевдоклассом :hover.
Провел второй тест. Результаты в Хроме опустились до 10 к 1. В остальных браузерах мало что поменялось. Примечание: выполнять добавление обводки надо каждым способом поодиночке, иначе получаются неправильные результаты.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.redBorder{border:1px red solid}
</style>
</head>
<body>
<script>
for(var i = 0; i < 5000; ++i)
document.body.appendChild(document.createElement('span'));
var sp = document.getElementsByTagName('span');
var str = '';
//*
str += '\n';
var s = (new Date()).getTime();
for(var i = 0; i < sp.length; ++i)
sp[i].style.border = '1px red solid';
str += (new Date()).getTime() - s;
/**/
/*
str += '\n';
s = (new Date()).getTime();
for(var i = 0; i < sp.length; ++i)
sp[i].className += ' redBorder';
str += (new Date()).getTime() - s;
/**/
document.write(str);
</script>
</body>
</html>