How to make JavaScript loading and execution more efficient with detailed example code-JS Tutorial-php.cn

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 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 it. 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. Location of script For the above reasons, scripts should always be placed at the bottom of the page, in front of . A simple example:

Script Example Hello world!

Copy after login Merge script Because script download blocks page rendering, the number of tags on the page should be reduced Used 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. Non-blocking script 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. The following are several ways to achieve it: 1. Use defer

Script Defer Example alert("defer"); alert("script"); window.onload = function(){ alert("load"); }; Copy after login The order in which page pop-up boxes appear: script/defer/load. The disadvantage of this technology is IE4+ and FF3. Only supported for 5+. Non-blocking scripts (continued) 2. Dynamic script elements You must know that there is no essential difference between and ordinary html tags, so you can use the standard DOM Method to dynamically add script file references. The method is as follows:

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script); Copy after login When this tag is added to the html, the script file starts to download. One feature of this method is that file downloading and execution does not block the processing of other parts of the html page. It is generally safer to place such scripts in than in , especially if the code contained in the file needs to be executed in the load event of the page. If the content of the body has not been completely loaded, IE will also pop up an "operation prohibited" error. When the script file is downloaded, the script will be executed immediately (FF and Opera will wait for the execution of the previous script added in the same way). This is fine when the script executes itself. But if the script contains interfaces used by other scripts on the page, you need to make sure the script is loaded and available. Fortunately, Firefox, Opera, Chrome, and Safari 3+ will trigger a load event after obtaining the value of the script tag's src.

var script = document.createElement("script") script.type = "text/javascript"; //Firefox, Opera, Chrome, Safari 3+ script.onload = function(){ alert("Script loaded!"); }; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script); Copy after login IE provides another solution-readystatechange event. Depending on the state of the download script file, the values of readyState are as follows: "uninitialized" Default state "loading" Start downloading "loaded" Download completed "interactive" Download completed, but not all available "complete" All data available IE implementation:

var script = document.createElement("script") script.type = "text/javascript"; script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; alert("Script loaded."); } }; script.src = "file1.js"; document.getElementsByTagName("head")[0].appendChild(script); Copy after login