Optimizing JavaScript and jQuery from HTML and CSS when developing a site

Good day, Habrazhiteli. I want to share some experience (tips) when working with JavaScript + jQuery (in fact, instead of jQuery you can substitute any other JS framework). The article will be interesting for newcomers to JS and jQuery, but you shouldn’t even pass by experienced dinosaurs , you can easily find useful information in it. Basically, in the article I cite not unambiguous cases, but I found the place for “hundred thousand times repetition” to be appropriate.

Initialization

All the time I meet downloading JS files in a tag . - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .

almost no effect on the “beginning” of the scripts. In most cases, use jQuery( document ).ready( function () { ... } , which in turn still runs the scripts only after loading the HTML. This is how to buy gasoline before you bought the car.
')

Inline JavaScript in HTML code

It's horrible!

• Firstly, it is ugly, awkwardly and from the start it looks like a crutch.
• Secondly, inlayn scripting is poorly controlled through JS controllers (here I include both code editing and callback() functionality).
• Finally, these scripts cannot be automatically minified and compressed (gzip), which will affect the performance of the production server.

Selectors

The topic is as old as the world, the first result in a search engine to issue an optimization request will issue an article about selectors. And yet, from time to time, it is simply slaughtered. As they say, repetition is the mother of learning.

Selectors greatly affect the performance of the page. For example, from my recent practice, just because of one colleague selector in a ton of scripts, the site literally hung for 8-10 seconds. To select an jQuery( 'input[name="some-specific-name"]' ) form, jQuery( 'input[name="some-specific-name"]' ) and this is on a page with ~ 10 forms and ~ 300 fields ... Replacing this selector with an ID - and, voila, the response time sign fell up to 60-90 ms.

I'll be brief: always use ID in the selector. If this is not possible, use the ID of the parent element, and only then another (class, tag or attribute).

 jQuery( '#element-id' ); //   jQuery( '#parent-element-id .needed-class-name' ); //   jQuery( '#parent-element-id a' ); //     

Use .filter() to filter elements, instead of .each()
To select the first, last, or specific elements use .first() , .last() , .eq( index )

Animation

I think it would be appropriate to mention here the queues of animations and the simultaneous animation of several elements - since this is a priority optimization, but I won’t go into copy- and- paste , because the search engine will give all the necessary information on these items (I will give references in the footer).

Margin ( margin - CSS property) - this is the first enemy of animations.

Somehow I had to develop a project with wild animation and a peculiar UI (Block site, where each block can be enlarged or approximate. Ie, the approximation replaces the link, and the reduced view is something like full-screen navigation. Plus blur elements in a reduced form, plus touch events on transitions, keyboard navigation, slides, carousels, smooth appearance of pop-up windows, etc.). In short, well, just everything moves at the same time.

The smooth movement of huge and at the same time rattling thumbnails is not always easy. And if such images are 13, and everything needs to be animated at the same time (blur effect)? This is a complete brain dislocation. Here, in fact, the most malicious enemy was found - margin . Since the elements were arranged in a ladder (with different indents), it was necessary to use either the margin , or padding , or left . With a method of typing and multiple searches, in my case, rejection of the margin raised the FPS from ~ 20 to ~ 35 (Opera, Firefox, IE 7.8. Chrome and so showed 100).

As an unambiguous rule, I will not make it, just as a piece of advice, to which one can pay attention.

Thank you for your time and attention, that's all.

Basement

Learn more about jQuery Queues [ENG]
Learn more about jQuery animation of multiple elements [ENG]