Несколько вопросов о быстродействии, как лучше?

Question

[Юра Юриевич]

Добрый день! Очень хочется узнать ответы на некоторые вопросы, но найти его, я, пока так и не смог, может у кого есть время и кто знает- ответят, спасибо.

1)Смотрел курс по JavaScript(вроде толковый), так вот, там говориться, верстать на БЭМ лучше(я согласен) и выборку в JS делать только по классу, например ($('.username') а не $('div.username') / $('.user-panel .username') и т.д) Я согласен, так выгодней в плане того, что, мы может изменить элемент, и тогда все скрипты, которые привязаные ещё чем-то помимо класса - полетят.

Но, меня мучает вопрос, сильно ли это влияет на скорость выборки? к примеру, я делаю поиск на сайте(на JS), так при каждой введенной букве перебирается сотни элементов на сайте, и в каждом ещё по несколько операций, если я буду в условиях выборки указывать [родитель тег.класс] будет же гораздо быстрее(как по мне) ну и тому подобные проекты с частой выборкой.

Вопрос: выходит БЭМ улучшает структуру кода и гибкость вёрстки(можно менять теги не боясь что где-то что-то полетит), но, ухудшает производительность, из-за таких ситуаций с выборками, как я выше описал, очень интересно, спасибо.

2) Как будет лучше записывать?

function add()
{
var field = $('.field');
field.text('hello');
field.css('display', 'block');
}

или

function add()
{
$('.field').text('hello');
$('.field').css('display', 'block');
}

Надеюсь узнать истину, спасибо!

Answer 1

[Денис Инешин]

1.
- Прежде всего думайте о том какой именно элемент вы ищете: div.class - означает найти все дивы с нужным классом, .class - любые элементы с нужным классом. Т.е. если вы используете div.class только по прихоти, вы как бы косячите с архитектурой.
- Помните о том что поиск элементов выполняется справа налево. Т.е. в случае с div.class вначале будут найдены все элементы с нужным классом, а уже потом среди них будут найдены все дивы. Это усложняет поиск, при огромном количестве операций в секунду, это может быть даже заметно (но тут скорее идет речь о сотнях тысяч операций)

2. Первый пример разумеется, вы кэшируете найденный элемент в переменной и jQuery делает поиск только 1 раз.

3. Вы немного неправильно воспринимаете БЭМ. Он очень хорош для огромных команд, когда десятки или даже сотни человек работают над одним проектом. Тут важно чтобы стили не пересекались, чтобы не было вложенных сложных правил которые трудно обойти, чтобы код легко переносился из одной части сайта в другую.

Для разработки простого сайта, когда разработчик один - БЭМ избыточен.

Comments

[dom1n1k]

Даже для простых сайтов БЭМ полезен. Да, там это не столь критично, но всё же с ним лучше, чем без него. Прочувствовано.

[Денис Инешин]

dom1n1k: я же не сказал что бесполезен, избыточен - это другое. Если понимаешь что делаешь, используешь нормальный CSS-препроцессор, то можно легко обойтись.

Answer 2

[dom1n1k]

1) Не влияет практически никак. Наоборот скорее будет чуть-чуть быстрее, поскольку селекторы разбираются справа налево. И движку проще одой функцией найти класс, чем сначала класс, а потом внутри найденного еще и тэги просеивать. В целом это экономия на спичках, обычно проблемы с производительностью сидят не тут.
2) В данном элементарном случае лучше цепочкой:

function add() {
    $('.field')
        .text('hello')
        .css('display', 'block');
}

А вообще, конечно, кэширование найденных узлов полезно.