Does javascript run after HTML element css display:none executed?

Question

I'm building a responsive site. But on the phones, it takes much time for loading to be done. I think it's because of javascript. On slow speed phones, executing javascript maybe a problem. So if I hide some elements ( display: none ) which will be handled by javascript, will all scripts for those elements be executed as normal or any way else?
Maybe this is a bad question but someone please explain how javascript works in this case.

Answer 1

是的，除非您使用:visible选择器，否则jQuery仍会找到DOM中display:none为display:none样式的元素。

Answer 2

JavaScript can still see those elements.

There are a lot of things that can hurt performance on phones, and there are a lot of things that can be done to help make it better (shallow CSS selectors, events delegation, off-DOM manipulation, restructuring JS to be modular, and lazy-loading it onto a page, .png optimization for images, concatenation and compression of JS/CSS, object pools for memory-management)...

A lot of things to squeeze more performance out of phones...

But "display:none" isn't going to stop JS from seeing or using those elements, and if you're doing a lot of query-selector stuff:

$("#my-div .my-span").each("...");

It's going to keep right on doing it.

Answer 3

Display being set to none on an HTML element does not prevent JavaScript from being executed on it. Otherwise it would be troublesome to show and/hide elements with JavaScript.

To speed up your site, there are a number a techniques that can be used. Many are dependent on your situation. It sounds like you may benefit from late loading the JavaScript, ie moving it to the bottom of the body tag. Doing this will allow your page to render prior to loading all of the JavaScript.

Google's PageSpeed may help guide you to other ways of improving your page load time.

https://developers.google.com/speed/docs/insights/about