Magic electronic kitten 2022-01-26 20:22:23 阅读数:747
C Language class is a mess
Catalog
1.3 Asynchronous scripts (async)
2. Embedded code and external files
towards HTML Insert... In the page JavaScript Main methods , Is the use of <script> Elements .
There are two elements ：1. Embedded directly in the page JavaScript Code 2. Include external JavaScript file .
In the use of <script> Element embedding JavaScript Code , Just for <script> Appoint type attribute .
then , Put it like this JavaScript Just put the code directly inside the element ：
e.g.
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script> If not specified script attribute , The default value is text/javascript.
Included in <script> Inside the element JavaScript The code will be interpreted from top to bottom . In the interpreter, right <script> Before all the code inside the element is evaluated , The rest of the page will not be loaded or displayed by the browser .
In the use of <script> The embedded JavaScript In the process of code , When... Appears in the code "</script>" When the string , Due to the rules of parsing embedded code , The browser will think this is the end </script> label . You can escape characters “\” It's written in <\/script> To solve this problem .
If you want to pass <script> Element to contain the external JavaScript file , that src attribute It's necessary . The value of this property is an external JavaScript Link to file .
e.g.
<script type="text/javascript" src="example.js"></script> External file example.js Will be loaded into the current page .
The external file only needs to contain the... That is usually placed at the beginning <script> And closed </script> The ones between JavaScript The code can be .
Analysis and embedded JavaScript code , On the outside JavaScript file （ Includes downloading the file ） when , The processing of the page will also be temporarily stopped .
If it's in XHTML In the document , You can also omit the... That ended in the previous example code </script> label . Outside of introduction JavaScript When you file , If not used .js Extension , Please make sure that the server can return the correct MIME type .
It means best to use
* with src Attribute <script> The element should not be in it <script> and </script> There's an extra... Between the labels JavaScript Code . If it contains embedded code , Will only be downloaded and executed external Script files , The embedded Your code will be ignored .
adopt <script> Elemental src Attributes can also contain... From an external domain JavaScript file . its src Property can be pointing to the current HTML A complete page in a domain other than the domain in which the page is located URL
e.g.
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>therefore , The code located in the external domain will also be loaded and parsed .
In traditional practice ,scrpt The label is placed on Head tag . However, because browsers only encounter body Tag before loading the page 、 That is, wait until all JavaScript The code is downloaded 、 After parsing and executing , To start rendering the content of the page , There is a significant delay when the browser renders the page , The browser window will be blank during the delay . To avoid this problem , modern Web Applications generally put all JavaScript Place reference in <body> After the page content in the element .
HTML 4.01 by <script> The label defines defer attribute .
The purpose of this property is to show that the script will not affect the construction of the page when it is executed . in other words , The script will be delayed until the entire page has been parsed before running . therefore , stay <script> Element defer attribute , amount to Tell the browser to download now , But delay execution .
HTML5 The specification requires scripts to be executed in the order in which they appear , So the first delay script will execute before the second delay script , And these two scripts will precede DOMContentLoaded Event to perform . But in reality , Their execution sequence is not necessarily so rigorous , So it's best to include only one delay script .
defer Property only applies to external Script files . Therefore support HTML5 The realization of Ignore to The embedded Script settings defer attribute .
Putting the delay script at the bottom of the page is the best choice .
XHTML In the document , To put defer Property is set to defer="defer".
TML5 by <script> The element defines async attribute .
async The same applies only to external script files , And tell the browser to download the file immediately . But the mark is async Script for There is no guarantee that they will be executed in the order specified . It is important to ensure that scripts do not depend on each other .
Appoint async The purpose of the attribute is Don't let the page wait for two scripts to download and execute , To load the rest of the page asynchronously . So , Asynchronous scripts are recommended Do not modify... During loading DOM.
The asynchronous script will be on the page load Before the event , But it could be in DOMContentLoaded Before or after the event triggers .
stay HTML Embedded in JavaScript There's no problem with the code , But it is generally believed that the best way is to use external files to contain as much as possible JavaScript Code . The question has the following advantages .
The first two document modes are Hybrid mode and The standard model , Later, it was proposed that Quasi standard model , There is almost no difference between standard mode and quasi standard mode . So when someone mentioned “ The standard model ” when , It could be any of them .
When the browser doesn't support JavaScript when ,<noscript> The element was born .
* * . *
. ∧＿∧ ∩ * *
* * ( ・∀・)/ .
. ⊂ ノ* *
* * (つ ノ .*
(ノ
Come on
This element can contain information that can appear in the document <body> In addition to <script> Anything outside the element HTML Element . Included in <noscript> The contents of the element will only be displayed if ：
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p> This page requires browser support （ Enable ）JavaScript.
</noscript>
</body>
</html>This page will display a message to the user if the script is invalid . In a browser with scripting enabled , Users will never see it .
Reference material ：《JavaScript Advanced programming （ The third edition ）》[ beautiful ] Nicholas C.Zakas Writing Li SONGFENG Cao Li translate
copyright：author[Magic electronic kitten]，Please bring the original link to reprint, thank you. https://en.javamana.com/2022/01/202201262022195491.html