What is defer in javascript

defer tells the browser that the Script segment contains code that does not need to be executed immediately, and is 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; the syntax "< ;script defer>js code".

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Many people are already proficient in using Javascript, but when they see defer, they may not know what it is used for; many people have also encountered such a problem and need to directly execute and manipulate the DOM. The object's js always reports an error that the object cannot be found. 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

<script src="../CGI-bin/delscript.js" defer></script>

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

<button id="myButton" onclick="alert(&#39;ok&#39;)">test</button>
<script>
myButton.click();
</script>

<script>
myButton.click();
</script>
<button id="myButton" onclick="alert(&#39;ok&#39;)">test</button>

<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>

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

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 direct output effects.

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

A common way 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 some scripts that need to be executed based 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. </script>

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:

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.

That is to say: if you add the defer attribute when writing the script, then the browser does not have to process it immediately when downloading the script, but continues to process the page. Download and parse, which will improve download performance.

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.

For example:

<script language="javascript" defer>
var object = new Object();
....
</script>

Because the defer attribute defaults to false, then here

<script language="javascript" defer>

after explicitly declaring the defer attribute is equivalent to

<script language="javascript" defer=true>

After declaring the defer attribute, you need to determine whether other variables refer to the variables in the defer script block, otherwise a script error will occur.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What is defer in javascript. For more information, please follow other related articles on the PHP Chinese website!