D
D
DoubleWish2017-09-11 16:24:10
JavaScript
DoubleWish, 2017-09-11 16:24:10

Where is the best place to place a conditional appearance modification (CSS + JS)?

The question is which style rendering is beneficial for the browser and for loading/storyboard speed more.
Now:
when we scrolled 100px, we hang a class on the body (scrolled) and want to change the appearance of .header
and write styles, as a result, after compilation:
.scrolled .header {...}
.scrolled .header .search__input{...}
and so on if there are changes to other objects in the header.
And if you make changes to individual elements, will performance improve?
(at the same time, if there are 20 elements, then 20 accesses through js)
.header--scrolled {...}
.search__input--scrolled {...}
And then how to work with the rest of the elements, like .overlay. Contact will not be very convenient.
Another question is about media queries. Does overriding block sizes from media queries slow performance down?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Denis, 2019-05-24
@Kadonomaro

Show the part of the code where the error occurs. In the browser console there is an indication of where the

I
Ilya Gerasimov, 2017-09-11
@ZeroPT

(subjectively)
1) It will not change
2) We go from the device, media conditions are picked up and everything is rendered as it should be, but if of course we rotate the screen width forcing the browser to update the state, then I think it reduces.
Of course, I didn’t measure it, it’s just my subjective, it’s better to devote time to optimizing graphics and heaps of asynchronous http requests, there are a lot of these on sites and loads well

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question