In-depth understanding of the role of defer in javascript

In-depth understanding of the role of defer in javascript_javascript skills

WBOY

Release： 2016-05-16 17:09:55

Original

1147 people have browsed it

Many people are already proficient in using Javascript, but they may not know what defer is used for when they see it; many people have also encountered such a problem and need to directly execute js that does not operate DOM objects. The error that the object cannot be found is always reported. As everyone knows, the reason is that the page has not been loaded yet, and the js operation object is still being downloaded. But many people don't know that adding the defer tag can easily solve this problem.

The function of defer in

is to execute the script after the document is loaded, so as to avoid the problem of not finding the object---a bit of a problem

Copy code The code is as follows:

Adding defer means executing it after the page is completely loaded, which is equivalent to window.onload, but is more flexible than window.onload in application!

defer is an "unsung hero" in the power of scripting programs. It tells the browser that the Script segment contains code that does not need to be executed immediately, and, used in conjunction with the SRC attribute, it can also cause these scripts to be downloaded in the background, and the content in the foreground is displayed to the user normally.

--But execute the script after the document is loaded

Please note two points:

1. Do not call the document.write command in a defer-type script segment, because document.write will produce a direct output effect.

2. Moreover, do not include any global variables or functions used by the immediate execution script in the defer script segment.

A common method to optimize performance is to set the "defer" attribute in the <SCRIPT> tag when the script does not need to be run immediately. (The immediate script is not contained in a function block, so it will be executed during the loading process.) After setting the "defer" attribute, IE does not have to wait for the script to load and execute. This way the page will load faster. Generally speaking, this also means that immediate scripts are best placed in a function block and handle the function in the onload handler of the document or body object. This property is useful when there are scripts that rely on user actions - such as clicking a button or moving the mouse to a certain area. But when there are some scripts that need to be executed during or after the page is loaded, the benefits of using the defer attribute are not great. </p> <p>The defer attribute in script is false by default. According to the description in the DHTML Programming Guide, the Defer attribute is written like this: </p> <p>Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.</p> <p>In other words: If you add the defer attribute when writing a script, the browser does not have to process it immediately when downloading the script, but continues to download and parse the page, which will improve download performance. </p> <p>There are many such situations. For example, if you define a lot of JavaScript variables, or write a lot of scripts in the reference file (.inc) that need to be processed, you might as well add the defer attribute to these scripts, which will definitely help improve performance. </p> <p><strong>For example: <br></strong></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51013" class="copybut" id="copybut51013" onclick="doCopy('code51013')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code51013"> <br> <script language="javascript" defer><br>var object = new Object();<br>....<br></script>