All geek questions in one place

When should i use async vs defer when loading scripts?

So, I recently found out that the js installation at the bottom of the DOM is deprecated and that I have to put them in again <head>with the attributes “async” and “defer”.

Great. But I'm a bit confused about what I should use based on priority.

So, I have a:

  • JQuery
  • jquery plugins that do not immediately affect the appearance of the page
  • jquery plugins that directly affect the appearance of the page.
  • my personal scripts that have a direct impact on the look of the page and also depend on jquery

What should async do, and what should delay?

If I understand everything correctly, those that do not have an immediate effect on the appearance of the site should postpone, and everything else - asynchronously. Right? Or I get these mixed.

+4
source share
1 answer

It is pretty simple. You should use [async]for scripts that can be executed in any order, and [defer]for scripts that should be executed after parsing HTML.

, script, , script - script, [async], [defer], jQuery, [async], , , jQuery .

jQuery, [async] . [defer], , DOM. , , , , , .

$(document).ready();, [defer] , (, ).

+3

Source: https://habr.com/ru/post/1678818/

More articles:


All Articles