当脚本开始时有几个Jquery Selectors时，如何优化页面的加载？

Question

I have several jquery selector at the beginning of my javascript.

jQuery('.enter').show();
jQuery('.btnsecond').show();
jQuery('#id div.my-class').hide();
jQuery('.classes p:last').hide();

this jquery code run at any reload of the page...

I think its cause a process to select the correct DOM, which solution could be to simplify, or optimize this process of loading ? Maybe locate the dom diferently, using Css.

Thanks.

Answer 1

jQuery('.enter, .btnsecond').show();
jQuery('#id div.my-class, .classes p:last').hide();

Answer 2

Since you have no programming logic applied in these javascript/jQuery statements, the fastest way to apply those initial conditions would be to just set them with CSS rules in a stylesheet, not with javascript. This way they will be applied immediately before the page even displays, rather than set via javascript which has to wait until the DOM is loaded before it can run.

.enter, .btnsecond {display: block;}
#id div.my-class, .classes p:last {display: none;}

Answer 3

To add to mgraphs code you can specify the context in your selector. Meaning you specify the containing element of your items so that it only searches that container for your elements. This reduces dom traversing.

$exampleContainerDiv = $("#ContainerDivForSelectorsBelowExample");
jQuery('.enter, .btnsecond', $exampleContainerDiv).show();
jQuery('#id div.my-class, .classes p:last', $exampleContainerDiv).hide();