CODEWITHSUNDEEP
javascripthtml
saul-z
saul-z

Reputation: 43

Issue of javascript loading

First question:

About Dynamic Script Elements 

var script  = document.createElement ("script");
script.type = "text/javascript";
script.src  = "script.js"; document.getElementsByTagName_r("head")[0].appendChild(script);

The important thing about this technique is that the file is downloaded and executed without blocking other page processes, regardless of where the download is initiated. You can even place this code in the <head> of a document without affecting the rest of the page.

I want to know what is difference between Dynamic Script Elements and this codes

<script type="text/javascript" src="script.js"></script>

Why does Dynamic Script Elements download and execute file without blocking other page processes and the other will?

Second question:

I know that the page download and rendering must stop and wait for the script to complete before proceeding, so I put scripts at the bottom before </body>

Is it necessary to use XMLHttpRequest Script Injection or other libraries like lazyload when I put scripts at the bottom, and why?

Anybody know this? Thanks

Upvotes: 4

Views: 96

Answers (2)

jfriend00
jfriend00

Reputation: 708046

I want to know what is difference between Dynamic Script Elements and this codes

Your code snippet is a dynamic script element. It is added dynamically to the page and is not natively present in the HTML of the page.

Script tags present in the HTML of the page are executed sequentially as the browser encounters them during the parsing of the page. The first script element is executed before any others, then the second and so on. Because there can be script elements embedded anywhere in the HTML of the page and they must execute in sequential order, a script element in the page must load and be executed before the rest of the HTML after it can be parsed and added to the page.

Why does Dynamic Script Elements download and execute file without blocking other page processes and the other will?

I'm not sure what kind of answer you're looking for here. It works this way because this is how the designers of the browser/HTML specs decided it would work. A dynamically added script executes asynchronously, independent of the loading of the page. A script element present in the HTML of the page executes in a predictable order with respect to both other scripts and with respect to the loading of the page elements. This can be very important for some types of scripts (such as document.write() and thus the designers of these specs allow you to have either predictable, sequential order (which by its very nature must block until complete) or asynchronous loading. The defer and async attributes also allow you to change the behavior of even script tags that are present in the HTML of the page. So, this way you can have whichever behavior is most advantageous.

Is it necessary to use XMLHttpRequest Script Injection or other libraries like lazyload when I put scripts at the bottom, and why?

No, it is not necessary to use script injection. Putting a script at the bottom of the page will allow the page elements above it to show to the user without waiting for the script to execute (if that is your goal). There are many other reasons for dynamically loading scripts besides just page load performance. For example, some scripts are loaded only when needed based on what action the page is going to execute.

For a lot more info about the execution order of scripts including the effect of the defer and async attributes in script tags, see this detailed post: load and execute order of scripts

Upvotes: 2

rekire
rekire

Reputation: 47975

The position of the script tags has something historical. In the early easy was often document.write() used to the Dom could change that is why a script block can block the rendering. However there is a attribute which says I don't change the Dom go on.

Script tags at the end of the page are related to the time when the download process is triggered so this can optimize the load process.

That lazyload libs are helpful of you need some other frameworks/libs only under some runtime conditions. It's all about page load times and how fast the page react on user interactions.

Upvotes: 0

Related Questions