A deep understanding of the role of defer in JavaScript _javascript skills

Source: Internet
Author: User

A lot of people have the use of JavaScript, but see defer may not know what he is used to do; many people have encountered such problems, need to directly execute and manipulate the DOM object JS is always reported to find the object error, The reason we all know is that the page has not finished loading, JS operation object is still in the download. But many people do not know, add defer tag can easily solve this problem.

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

The defer effect is that the document is loaded and then executes the script, which avoids the problem of not finding the object---a problem

Copy Code code as follows:

<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 equals in the page completely in after the execution, the equivalent of window.onload, but the application is more flexible than window.onload!

Defer is one of the "unsung heroes" of the Scripting power. It tells the browser that the script section contains code that does not need to be executed immediately, and that it is used in conjunction with the SRC attribute to enable the scripts to be downloaded in the background, and the contents of the foreground are displayed to the user normally.

--but the document is loaded and the script is executed.

Please note two points:

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

2. Also, do not include any global variables or functions that are to be used for immediate execution of scripts in the defer script segment.

A common way to optimize performance is to set the "defer" property in the <SCRIPT> tab when the script does not need to run immediately. (The script is not included in a function block immediately, so it is executed during the load process.) When you set 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 a function block and processed in the onload handle of document or body object. It is useful to use this property when there are scripts that need to rely on user action----such as clicking a button, or moving the mouse over a range----. However, when some scripts need to be executed during page loading or after the load is completed, the benefits of using the defer property are not too great.

The defer property in the script is false by default. According to the description in the DHTML programming book, this is true for the defer property:

Using the attribute at design time can improve the download performance of a page because the browser does not need to par SE and execute the script and can continue downloading and parsing the page instead.

In other words: If you are writing a script to add the defer attribute, then the browser does not have to process it immediately when downloading the script, but continues to download and parse the page, which will improve the performance of the download.

There are many kinds of situations like this. For example, if you define a lot of JavaScript variables, or if you write a lot of scripts in a reference file (. inc) that you need to deal with, you might want to add the defer attribute to these scripts to help improve performance.

Examples are as follows:

Copy Code code as follows:

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

Because the defer property defaults to False, then here

<script language= "JavaScript" defer>

Explicitly declaring an defer property is equivalent to

<script language= "JavaScript" defer=true>

Once you have declared the Defer property, you need to decide if there are other variables that refer to the variables in the defer script block, otherwise it can cause a script error to occur.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.