Home > Article > Web Front-end > Writing high-performance JavaScript script loading and execution_javascript skills

Writing high-performance JavaScript script loading and execution_javascript skills

WBOYOriginal: 2016-05-16 18:29:15767browse

The script can be placed in the head of the HTML page or in the body.
Put the script in the body. When the browser encounters the <script> tag, the browser does not know whether the script will insert text or html tags, so the browser will stop analyzing the html page and execute the script. When adding scripts using src, the browser will do the same thing. Page rendering and user interaction will be completely blocked while the script is processing. Script downloading and execution blocks the downloading of other resources, such as images used to render the page. (Although many browsers have implemented the technology of parallel downloading of scripts, this problem is still not solved) <br>Location of the script<br>In view of the above reasons, the script should always be placed at the bottom of the page, that is, in front of </body> . <br><strong>A simple example:</strong> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="780" class="copybut" id="copybut780" onclick="doCopy('code780')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code780"> <br><html> <br><head> <br><title>Script Example</title> <br><link rel="stylesheet" type="text/css" href="styles.css "> <br></head> <br><body> <br><p>Hello world!</p> <br><script type="text/javascript" src="file1 .js"></script>

Merge script
Because script downloading blocks page rendering, use of the page's <script> tag should be reduced, regardless of whether the script is inline or external. The situation is special when dealing with external scripts. The time it takes for the browser to download a 100kb script will be much less than four 25kb scripts, because it takes a lot of time to establish a request. Therefore, the page should minimize references to external scripts. <br>Non-blocking script <br>The secret is to load the script after the page loading is completed, that is, before the onload event of the window object is triggered. Here are several ways to implement it: <br><strong>1. Use defer</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="92494" class="copybut" id="copybut92494" onclick="doCopy('code92494')"><u> to copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code92494"> <br><html> <br><head> <br><title>Script Defer Example</title> <br></head> <br><body> <br><script defer> <br>alert("defer"); <br></script>
<script> <br>alert("script"); <br></script>
<script> <br>window.onload = function(){ <br>alert("load"); <br>}; <br></script>

The order in which the page pop-up boxes appear: script/defer/load. The disadvantage of this technology is that it is only supported by IE4 and FF3.5.
Non-blocking scripts (continued)
2. Dynamic script elements
You must know that