<Script> element

Use the script tag

  • Six properties script tag: src / type / async / defer / charset / language deprecated
  • Used in two ways: embed JavaScript code / external JS file is introduced in the page

    Embedded JavaScript code to the page

  • Only need to specify the type attribute, the code contained in the script will execute from top to bottom
  • Need to escape encountered string </ script> When using <script> embed code ends, the string <script> tag in
<script>
    function fun(){
        console.log('<\/script>')
    }
</script>

The introduction of external JS files

  • Need to specify the src attribute, you can not use this syntax in an HTML document, HTML does not meet specifications
  • .Js file extension is not necessary, because the browser does not check the JavaScript file extension, but that the use of language such as JSP server such as JS code can also be generated, but the server still need to see an extension to decide which type of mine in response to application , so make sure when no extension server can return the correct mime type
  • Src disposed intermediate script tags do not embed JavaScript code embedded is not executed even
  • src JS files can also point to external domains, but that there are some security risks; if you want code that references the external domains, make sure that trusted domain.

Location tag

  • javascript language is single-threaded mechanism. The so-called single thread is executed in sequence, then after executing a task to the next. JS code can not be executed while rendering the page for browsers. When the browser encounters a <script> tag, the browser must then spend the time to download files outside the chain and then execute, in this process, page rendering and user interaction is completely blocked. So the script will block the rendering of the page, until they are all downloaded and executed after completion, will continue rendering the page.
  • By convention, all <script> elements in <head> of the page (all css and JS files external references are put together), but this time, if the page js too many browser renders the page will appear delayed , black and white make this time period. To avoid this problem, we generally JavaScript references into the back of the page content element <body>, to ensure that the page has completely rendered in the implementation of JS code, the user will feel the speed of page open faster.
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
----HTML----
<script src='01.js'></script>
<script src='02.js'></script>
</body>
</head>
</html>

Lazy loading defer

  • <Script> tag to set the defer attribute indicates that the script will be downloaded instantly, but delayed until the entire page resolution is carried out after the completion of
  • defer external script file attribute may be used (H5 specification, IE4-7 internal script may be provided, not after IE8)
  • H5 provisions set multiple attributes script defer the implementation of the order, and prior to DOMContentLoaded event, but this is not necessarily, it is better to include only a delay script

Asynchronous script async

  • <Script> tag set async attribute indicates the script to download immediately, but do not wait for the page to download and execute scripts, so asynchronous loading other content pages without blocking. Therefore, it is best not to modify the script asynchronous DOM.
  • async attribute values ​​apply to an external script file
  • Setting up multiple async attribute of the script file execution order is uncertain.
  • Asynchronous script will be executed before the load event, but are not sure of the order of events DOMContentLoaded

Guess you like

Origin www.cnblogs.com/qqinhappyhappy/p/11986558.html