Chapter One loading and running
the advent of the <script> tag makes the entire page wait for script parsing and running. Whether the actual JavaScript code is inline or contained in an unrelated external file, the page download and parsing must stop, wait for the script to complete the processing before proceeding, because the script may modify the page content during the run. document.write ();
<script> tags can be placed in <HEAD> inside, but if we put a lot of files in the head <SCRIPT> javascript file. and the browser encounters <BODY> js files have a time to download and run.
Ie8,ff3.5, safari4 and chrome2 allow parallel download Js file, one tags download external resources without blocking other <SCRIPT> tags. However, javascript Downloads still have to block the download process for other resources, for example. Even if the download process between scripts is blocked, the page waits for all javascript
Recommendation: Place all <script> code as close as possible to the bottom of the <body> tab to minimize the impact on the entire page download.
Limiting the total number of <script> pages can also improve performance.
reduce the number of references to external script files, each http request will incur an additional performance burden, download a 100KB file than download four x 25KB files quickly and can be packaged to consolidate these files into a single file
Yahoo ! created the " Union handle ". Any web site can use a federated handle URL to indicate which files are included.
Src= "Http://yui.yahooapis.com/combo/hahoo.min.js&2.70/build/event-min.js"
This code has only one script tag, at the bottom of the page, loads multiple javascript, which is in the HTML The best way to include multiple external JavaScript on the page.
Non-blocking scripts: After the page loads, the javascript code is loaded, which means that the code is downloaded after the load event of the window ,
Deferred Script Scripts
<script type= "Text/javascript" src= "File1.js" defer>
with defer script tags can be placed anywhere in the document, corresponding javascript <SCRIPT> dom loading complete in
When a defer javascript file is downloaded, he does not block the browser's other handlers, so the file can be downloaded in parallel with other resources on the page. (IE and FF3.5 support )
<script defer> alert ("Deffer"); </script><script> alert ("Next"); </script><script defer> window.onload=function () {alert ("widow")}</script>The order is next Deffer window
Note: The tag asking defer is not the second run, it is called before the onload event handle is processed.
dynamic SCRIPT element elements
The new script element loads the . js original file, which starts the download as soon as the element is added to the page. Downloads and runs of files do not block other page processing processes, regardless of where the download is initiated
Encapsulated functions Implement The dynamic loading of JavaScript files:
function Loadscript (URL, callback) {
var script=document.createelement ("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
Script.onload=function () {
Callback ();
}
}
Script.src=url;
document.getElementsByTagName ("Head") [0].appendchild (script);
}
Dynamically loading many JavaScript files in the page , the browser does not guarantee the order in which the files are loaded
So in the mainstream browser, only FF and Opera will ensure that the scripts are executed in the order specified, and other browsers will download and run different code files in the order in which they are returned by the server.
In Series together:
Loadscript ("File.js", function () {
("File1.js", function () {
("File2.js", function () {
Alert ("FD"); });});})
Cons:after file is available, execute file1, then execute file2, the method is feasible, but if you want to download and execute more files, it is more troublesome.
If more than one file order is important, a better way is to connect these files in the correct order as a single file, independent files can be downloaded one time so the code, because it is asynchronous, so there is no loss.
XMLHttpRequest Script injection XHR scripts injection
First create the XHR object, then download the JavaScript file, and then use the dynamic <script> element to JavaScript Code injection page.
var xhr = new XMLHttpRequest ();
Xhr.open ("Get", "File1.js", true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==4) {
if (xhr.status>=200&&xhr.status<300| | xhr.status==304) {
var script=document.createelement ("script");
Script.type= "Text/javascript";
Script.text=xhr.responsetext;
Document.body.appendChild (script);
}
}
}
Xhr.send (NULL);
Sends a fetch to the serverfile.jsof the fileGETrequest,onreadystatechangeThe event handler function checksreadyStateis not4, and then checkHTTPstatus code is not valid(2XXrepresents an effective response,304Representative Response), if a valid response is received, create aScripttab, set his Text property to receive from the serverResponseTextstring that actually creates an inline code with theScriptonce the newScriptThe elements are added to the document, the code is executed, and ready to be used.
Advantage: You can download javascript code that is not executed immediately, because the code is returned outside of the script tag, it is not automatically executed after it is downloaded, and you can postpone execution until everything is ready.
No exceptions in all browsers
Disadvantage:JavaScript files must be placed within a domain with the page.
The recommended way to load a large amount of Javascript into a page :
1, contains the code required to dynamically load JavaScript , and then loads the page initialization required in addition to the JavaScript section. This part of the code is as small as possible, it may contain only one function, it downloads and runs very quickly, does not cause much disturbance to the page, and when the initial code is ready, it is used to load other JavaScript code.
High Performance Javascipt notes (-)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
