A few questions about performance, which is better?

Question

JavaScript

Good afternoon! I really want to know the answers to some questions, but I haven’t been able to find it yet, maybe someone has time and who knows, they will answer, thanks.

1) I watched a course on JavaScript (seemingly sensible), and so, they say, it’s better to make up on BEM (I agree) and make selection in JS only by class, for example ($('.username') and not $('div. username') / $('.user-panel .username') etc) I agree, it's more beneficial in terms of the fact that we can change the element, and then all the scripts that are tied to something else besides the class - will fly.

But, I'm tormented by the question, does this greatly affect the sampling rate? for example, I'm doing a search on the site (in JS), so with each letter entered, hundreds of elements on the site are sorted out, and in each there are several more operations,[parent tag.class] will be much faster (as for me) and similar projects with frequent sampling.

Question: it turns out that BEM improves the code structure and layout flexibility (you can change tags without fear that something will fly somewhere), but it worsens performance, because of such situations with selections, as I described above, very interesting, thanks.

2) What is the best way to record?

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

or

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

I hope to know the truth, thank you!

Answer 1

1.
- First of all, think about what kind of element you are looking for: div.class - means to find all divs with the desired class, .class - any elements with the desired class. Those. if you're only using div.class on a whim, you're kind of messing with the architecture.
- Remember that the search for elements is performed from right to left. Those. in the case of div.class, all elements with the required class will be found first, and only then all divs will be found among them. This complicates the search, with a huge number of operations per second, it can even be noticeable (but here we are talking about hundreds of thousands of operations)
2. The first example, of course, you cache the found element in a variable and jQuery does the search only 1 time.
3. You misunderstand BEM a little. It is very good for huge teams when dozens or even hundreds of people work on the same project. It is important here that the styles do not overlap, that there are no nested complex rules that are difficult to bypass, so that the code is easily transferred from one part of the site to another.
For the development of a simple site, when there is only one developer, BEM is redundant.