Dig into the role of defer in javascript

Many people have perfected Javascript, but seeing defer doesn't always tell you what he does; Many people have encountered the problem that js that needs to directly execute other and manipulate DOM objects always fails to find the object. The reason is that everyone knows that the page has not been loaded yet, and the js operation object is still in download. What many people don't realize is that adding the defer tag can easily solve this problem.

< Script SRC = ".. / CGI - bin/delscript. Js "defer> < / script>

The defer action in "defer" is to execute the script after the document has been loaded, thus avoiding the problem of missing the object -- a bit of a problem

<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>

Plus defer is equal to waiting until the page is fully loaded, which is equivalent to window.onload, but more flexible than window.onload!

Defer is an unsung hero of scripting's power. It tells the browser that the Script segment contains code that does not need to be executed immediately, and, when used in conjunction with the SRC attribute, it also enables the scripts to be downloaded in the background while the foreground content is displayed to the user.

-- but don't execute the script until the document is loaded

Please note two points:

1. Do not call the document.write command in the script section of defer type, because document.write produces direct output.

2. Also, do not include any global variables or functions in the defer script section to use for immediate script execution.

A common way to optimize performance is when a script does not need to be run immediately. SCRIPT> Set the "defer" property in the tag. The immediate script is not included in a function block and is therefore executed during the load. After setting the "defer" property, IE does not have to wait for the script to load and execute. This will make the page load faster. In general, this also means that the immediate script is best placed in the function block and handles the function in the onload handle of the document or body object. This is useful when there are scripts that rely on user actions to execute -- such as clicking a button, or moving the mouse over an area. But when there are scripts that need to be executed during or after the page loads, the benefit of using the defer property is not so great.

The defer property in script is false by default. As described in the DHTML programming book, 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 Home.

That is: if you add the defer attribute when you write the script, the browser doesn't have to process the script immediately when it is downloaded, but instead continues to download and parse the page, which improves the performance of the download.

There are many such cases. If you have a lot of javascript variables defined, or a lot of scripts written in a reference file (.inc) that need to be processed, adding the defer attribute to those scripts will definitely help.

Examples are as follows:

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

Since the defer attribute defaults to false, here it is

< Script language = "javascript" defer>

Explicitly declare the defer property to be equivalent

< Script language = "javascript" defer = true>

Once the defer property has been declared, you need to determine whether any other variables refer to the variables in the defer script block, otherwise this will result in script errors.