Using JavaScript in HTML

Where should the 1.JavaScript file be placed on the page?

The JS file is placed in a more appropriate location on the page. In general, there is one simple principle for front-end development: CSS is placed on thepage header and JavaScript is placed at the end of the page. So why on Earth is that so, this is the subject we are studying today. Where should the--javascript file be placed on the page?

First JavaScript, then HTML, the last CSS. So what are the drawbacks of this sort of order? Imagine the browser loading the Web page, loaded into JavaScript, the script is very much, loading the script will take a long time, and this time, because the HTML code has not been loaded, so the current page is displayed as a complete blank, JS script blocked the loading of HTML. When the JavaScript script finally loaded, loaded into the HTML, but then found these elements of the page, there is no style, because this time the CSS has not started to load, until a lot of HTML loaded to start loading style, then during this period, Users see the page from a blank to a completely non-style page, this user experience is certainly not what we want.
So a good habit is to load the CSS first, so that the HTML can avoid the appearance of no style, put JavaScript in the end , you can make the page as soon as possible to the user, reduce the waiting time for the browser. Avoid blocking the rendering of Web pages because of JS scripts.

2.script Label Properties

• Defer is true: The deferred load script begins execution at the completion of the document completion resolution and completes before the Domcontentloaded event.
• Async is true: asynchronously loads the script, executes after downloading, and executes before window's Load event

Using these two properties to load JS asynchronously, but also to understand their problems:

• Use the Defer property, preferably an external script
• Use defer, async scripts to disallow the use of the document.write () method

Using JavaScript in HTML