Что быстрее?изменение свойства CSS или добавление класса в JQuery

Question

У меня около 100 элементов в лайке, и я пытаюсь создать анимацию с помощью jquery.

<div class="box" id="a1"></div>

Мне нужно добавить специальные стили для каждого из элементов на основе функции.

какая из них отображается быстрее в браузере:

добавление свойства css

$(this).css({'background-color':'#000'})

или добавление класса

$(this).addClass("style1")

Обновлено Еще несколько вещей, которые я хотел бы добавить:

• Сейчас у него 100 элементов, и я добавляю их с помощью jquery.
• Чтобы создать случайность, мне нужно создать около 25 стилей - я делаю это с помощью javascript
• если я тоже добавлю к этому размер таблицы стилей, чтобы получить точные тесты.

Answer 1

какая из них отображается быстрее в браузере:

Зависит от браузера.вам следует сделать несколько тестов, если вам это интересно.

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

Answer 2

Согласно jsPerf , addClass заметно быстрее примерно на 50%.

Вот данные jsPerf для Chrome, но в моих тестах они были примерно такими же при использовании Firefox:

$('#a1').css({ 'background-color': '#000' }) 82,043 ± 0,21% на 48% медленнее

$('#a1').addClass("style1") 158,876 ± 0,83% быстрее

Answer 3

Добавление класса к родительскому элементу всех этих 100 элементов будет быстрее и определение этого класса в файле или странице css.

.style1 .box{
   //define style here
}

Таким образом, вам просто нужно манипулировать классом только одного элемента, и это определенно быстрее, чем модифицировать стиль каждого из 100 элементов с помощью метода css.

Как быстро? Все зависит от количества строк кода, выполняемых в каждой из операций, что опять-таки зависит от браузера к браузеру.

Если вы пойдете с моим подходом, это определенно будет быстрее.

Answer 4

Вы даже можете рассмотреть возможность использования тега стиля.

Это может стать очень быстрым.Например, если вам нужно изменить много элементов, скажем, 100 элементов, так как вы пишете свой CSS только один раз, DOM будет изменен только один раз.

HTML:

<style type="text/css" id="specialStyle"></style>
<div class="oneHundredElements" id="box1"/>
<div class="oneHundredElements" id="box2"/>
...
<div class="oneHundredElements" id="box100"/>

СЦЕНАРИЙ:

<script>
    var css = '.oneHundredElements {background-color:#000;}';
    $('#specialStyle').html(css);
</script>

http://jsperf.com/foox/4