Скорость работы: CSS vs JavaScript

#gwt #javascript #css

Что быстрее, и следовательно, что лучше использовать CSS или JavaScript. К примеру,
есть группа элементов, и мне надо выделить один из них, так вот, как это лучше сделать,
добавлением нового класса (и след. нового стиля) или изменить его свойства с помощью
JavaScript? Речь идет не о чистом JavaScript, но для него вопрос тоже актуален, а об
GWT.    

Ответы

Ответ 1

Чистый js:
document.write('
');
var s = (new Date()).getTime();
for(var i = 0; i < 100000; ++i)
    document.body.style.border = '1px red solid';
document.write((new Date()).getTime() - s);

document.write('
');
s = (new Date()).getTime();
for(var i = 0; i < 100000; ++i)
    if(!/(\b|\s)?redBorder(\b|\s)?/i.test(document.body.className))
        document.body.className += ' redBorder';
document.write((new Date()).getTime() - s);

Добавление класса происходит быстрее (у меня - раз в 25-30), тем более, что можно
сначала проверить наличие класса. Если же надо выделить элемент при наведении, то можно
обойтись и css-псевдоклассом :hover.


Ответ 2

Провел второй тест. Результаты в Хроме опустились до 10 к 1. В остальных браузерах
мало что поменялось. Примечание: выполнять добавление обводки надо каждым способом
поодиночке, иначе получаются неправильные результаты.














Ответ 3

Выделение одного элемента из группы - это изменение его свойств относительно базовых
свойств. Это прямая работа CSS по его философии в WEB

Три столпа:


HTML для данных, разметки и каркаса верстки
CSS для задания визуальных свойств и параметров отображения/поведения каркаса
JavaScript для динамики, взаимодействия с окружением и программных задач


В вашем случае:


Выделение элементов это изменение его отображения, эту часть надо делать добавление
класса CSS
Само назначение класса выделения может быть сделано через CSS (:hover на самом элементе
или на родителе, если это возможно), либо через JavaScript по более сложным условиям
(клик по-другому элементу, перемотка ползунка, ввод суммы на форме и так далее)


По поводу быстродействия - вы можете провести 1000 и 1 тест для каждого варианта.
Но это лишнее. Старайтесь делать задачу "правильно" с точки зрения философии разработки
или принятой методологии. Оптимизация - это дело разработчиков браузеров и интерпретаторов.
Кстати, оптимизировать они будут только те варианты поведения разработчиков, которые
приняты опять же в большинстве случаев

Главное, не парсите CSS-файл с помощью JS и не назначайте каждое свойство CSS каждому
элементу DOM. Да, утрирую. Но ведь это возможно сделать. Но вы же не будете замерять
время работы этого ужаса? Потому что так не принято делать