Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Three solutions for js asynchronous loading_javascript skills

Three solutions for js asynchronous loading_javascript skills

WBOY
Release： 2016-05-16 17:41:05
Original
1211 people have browsed it

By default, javascript is loaded synchronously, that is, javascript is blocked when loading. The subsequent elements must wait for javascript to be loaded before they can be loaded again. For some javascript that is not very meaningful, if it is placed at the head of the page, it will cause the loading to be very slow. If so, it will seriously affect the user experience.

(1) defer, only supports IE
Definition and usage of defer attribute (I took it from w3school website)
defer attribute specifies whether to delay script execution until the page until loaded.
Some javascript scripts use the document.write method to create the current document content, but other scripts may not.

If your script does not change the content of the document, you can add the defer attribute to the <script> tag to speed up processing of the document. Because the browser knows that it will be able to safely read the remainder of the document without executing the script, it will defer interpretation of the script until the document has been displayed to the user. <br>Example: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71033" class="copybut" id="copybut71033" onclick="doCopy('code71033')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code71033"> <br><script type="text /javascript" defer="defer"> <br>alert(document.getElementById("p1").firstChild.nodeValue); <br></script>


( 2) async:
The definition and usage of async (it is an attribute of HTML5) The
async attribute specifies that once the script is available, it will be executed asynchronously.
Example:
Copy code The code is as follows:



Note: The async attribute only applies to external scripts (only when using the src attribute).
Note: There are multiple ways to execute external scripts:
• if async="async": the script is executed asynchronously relative to the rest of the page (the script will be executed while the page continues to be parsed)
•If async is not used and defer="defer": the script will be executed when the page has finished parsing
•If neither async nor defer is used: the script is read and executed immediately before the browser continues to parse the page

(3) Create script, insert into DOM , callBack after loading, see code:
Copy code The code is as follows:

function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/ javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
Related labels：
Asynchronous loading block
source：php.cn
Previous article：js obtains the Value/Text and selected value information of RadioButtonList and other information implementation code_javascript skills Next article：Issues you need to pay attention to when using NodeList_javascript tips
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The entity warehouse extends JpaRepository<Entity, Id> and JpaSpecificationExecutor<Entity>, and EntitySpec extends Specification<Entity> This is my endpoint http://localhost:8080/country/all replies are ok for all countries and...
From 2024-04-06 17:11:03
0
1
421
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Possibility to store ASP Classic code as string in MYSQL database Is it possible to store asp classic code into a MySQL database and have it execute the cod...
From 2024-04-06 13:38:43
0
1
358
Website using Live Server doesn't work when I launch it from a file I tried several browsers and in every case the website works fine with LiveServer. On the ...
From 2024-04-06 12:46:18
0
1
403
Electron gets AppData on preload How to get the preloaded AppData directory? Background.js[...]asyncfunctioncreateWindow(){...
From 2024-04-06 11:05:31
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template