Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript with defer and async #2782

Open
Dr-Yukon opened this issue May 28, 2019 · 8 comments · May be fixed by #2786
Open

JavaScript with defer and async #2782

Dr-Yukon opened this issue May 28, 2019 · 8 comments · May be fixed by #2786

Comments

@Dr-Yukon
Copy link
Contributor

@Dr-Yukon Dr-Yukon commented May 28, 2019

I think that the /lib/exe/js.php script should be set with the defer attribute, and the jQuery library should be separate and async

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented May 28, 2019

JavaScript is a blocking resource for the parser. This means that JavaScript blocks parsing of the HTML document itself. When the parser comes to the <script> tag (it doesn't matter if it is internal or external), it stops, takes the file (if it is external) and starts it.
Workline https://hsto.org/files/fc6/581/de4/fc6581de40d249e5905cf3fa238286eb.png

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented May 28, 2019

Fortunately, the <script> element has two async and defer attributes that give us the ability to control how external files are loaded and executed. Asynchronous and deferred execution is most important when the <script> element is not at the very end of the document. HTML documents are parsed in order, from opening to closing it. If an external JavaScript file is placed immediately before the closing tag, then using async and defer becomes less relevant, since by that time the parser will already parse most of the document and the JavaScript files will no longer affect it (which requires dividing the tpl_metaheaders() function into two parts or forever placing it at the end of file, with starting meta-tags, yeah).

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented May 28, 2019

Is the script self-contained? For scripts that are independent of other files and/or have no dependencies, the async attribute will be most useful. Since it does not matter to us when the file is executed, asynchronous loading is the most suitable option.
Workline https://hsto.org/files/a07/823/bae/a07823bae90b4612bc5e4933674b34ce.png

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented May 28, 2019

Does the script relies on a fully disassembled DOM? In many cases, the script file contains functions that interact with the DOM. Or perhaps there is a dependency on another file on the page. In such cases, the DOM must be completely parsed before the script is executed. As a rule, such a file is placed at the bottom of the page to make sure that everything has been disassembled for its operation. However, in a situation where, for whatever reason, the file must be placed elsewhere, the defer attribute may be useful.
Workline https://hsto.org/files/378/af7/eff/378af7eff5e34d89b75584d626c48cae.png

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented May 28, 2019

At last, the browser supporting worklines is very fine
https://hsto.org/files/d33/64e/d8f/d3364ed8f1d34517b4d12d44f9eea73b.png

@phy25

This comment has been minimized.

Copy link
Collaborator

@phy25 phy25 commented May 28, 2019

This might be a breaking change if some other plugins does not use either the JS hook or jQuery.ready() correctly. In the meantime, looks good to me.

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented Jun 1, 2019

This might be a breaking change if some other plugins do not use either the JS hook or jQuery.ready() correctly. In the meantime, looks good to me.

That's why jQuery library must be started early (= async), not later (= defer)

@Dr-Yukon

This comment has been minimized.

Copy link
Contributor Author

@Dr-Yukon Dr-Yukon commented Jun 1, 2019

@phy25 phy25 changed the title Performance acceleration JavaScript with defer and async Jun 2, 2019
@Dr-Yukon Dr-Yukon linked a pull request that will close this issue Jun 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.