Performance-optimized non-blocking load Footstep method comparison

Autumn Strokes ended ~ ~, as if lazy for a long time, no more bo. Summarize the contents of your recent reading.

Note that much of the content comes from the Advanced Guide to high-performance website construction.

Random entry Content

Web applications and traditional desktop applications have a common goal: to respond to user input as quickly as possible. What's fast? Jakob Nielsen is a well-known and highly respected expert in the field of Web usability, Quoting from his point of view: If the JavaScript code executes more than 0.1 seconds, the page will give the impression that it is not smooth and fast enough, and if the execution takes more than 1 seconds, the application will be slow and more than 10 seconds, then the user will be very frustrated. Performance Analyzer: Firebug Performance Analyzer When latency becomes critical: threading Web Workers, Gears nonblocking load footstep script tag's blocking behavior can adversely affect page performance. Most browsers download or execute scripts without downloading other content. Sometimes such blockages are not necessary. So, there are situations where we want to load JavaScript in a way that does not block other content downloads. You can do this to make the page load faster: 1.XHR Eval 2.XHR Injection 3.Script in Iframe 4.Script DOM Element 5.Script Defer 6.document.write Script Tag①XHR Eval is better understood, in order to load more scripts in parallel, split some scripts, and then request the script through Ajax, and then through the eval to execute. Instance code:

 var xhrobj=getxhrobject (); Xhrobj.onreadystatechange=function () {if (xhrobj.readystate==4&&200==xhrobj.status) {eval (xhrObj.respo      Nsetext); }};xhrobj.open (' Get ', ' a.js ', true); Xhrobj.send (");//Gets the basic method of the Xhr object function Getxhrobject () {if (typeof XMLHttpRequest   ! = "undefined") {return new XMLHttpRequest (); } else if (typeof activexobject! = "undefined") {if (typeof arguments.callee.activeXString! = "string") {var versions     = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.3.0", "msxml2.xmlhttp"], I, Len;        for (i=0,len=versions.length; i < Len; i++) {try {new ActiveXObject (versions[i]);        arguments.callee.activeXString = Versions[i];     Break  } catch (ex) {//Skip}}} return new ActiveXObject (arguments.callee.activeXString);  } else {throw new Error ("No XHR object available."); }}

Disadvantages:

Scripts obtained through XMLHttpRequest must be deployed in the same domain as the main page.

②XHR Injection

Similar to the XHR EVAL,XHR injection technique is also obtained through XMLHttpRequest, but unlike Eval, the mechanism creates a script DOM element, The XMLHttpRequest response is then injected into the script to execute JavaScript, and in some cases the performance of this mechanism is better than eval.

Example code:

   var xhrobj=getxhrobject ();   Xhrobj.onreadystatechange=function () {      if (xhrobj.readystate==4) {         var scriptelem=document.createelement (' Script ');         document.getElementsByTagName (' head ') [0].appendchild (Scriptelem);         Scriptelem.text=xhrobj.responsetext;      }  }; Xhrobj.open (' GET ', ' a.js ', true); Xhrobj.send (");

③script in Iframe

The IFRAME and other components in the home page are loaded in parallel, unlike the traditional practice of containing another page in an IFRAME in an HTML page, the Script in IFRAME technology uses an IFRAME to load JavaScript without blocking, and the implementation process is done entirely in HTML. Example code:

<iframe src= ' a.html ' width=0 height=0 frameborder=0 id= ' frame1 ' ></ifame>

Disadvantages:

The technique uses a.html, not a.js, because the IFRAME thinks it is returning an HTML document. All we have to do is convert an external script into an inline script in an HTML document. The IFRAME is also required to be in the same domain as the main page.

Attached method to access the IFRAME:

1. Through the frames array: window.frames[0]2. Access via document.getElementById. The ④script DOM element uses the script tag to dynamically create scripts, create script elements, and set their SRC values. Example code:

var scriptelem=document.createelement (' script '); scriptelem,src= ' Http://test.js ';d ocument.getelementbytagname (' Head ') [0].appendchild (Scriptelem);

⑤script Defer is very simple, and the purpose of this property is to indicate that the script does not affect the construction of the page when it executes. In other words, the script is deferred until the entire page has been parsed and then run. Therefore, in <script>element is set in the deferproperty, which is equivalent to telling the browser to download it immediately, but deferred execution.

The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script executes before the second deferred script, and both scripts are executed before the DOMContentLoaded event. In reality, deferred scripts are not necessarily executed in sequence or DOMContentLoad before time triggers, so it is best to include only one deferred script.

Example code:

<script defer src= ' a.js ' ></script>

here by the way. Defer properties and Async properties

Defer properties: IE4.0 appeared. There will be no document.write and DOM modifications in the defer declaration script. The browser will download other script with the defer attribute in parallel. It does not block subsequent processing of the page. Note: All defer scripts must be guaranteed to be executed sequentially.

    <script type= "Text/javascript" defer></script>

Async Property: HTML5 the new property. Scripts will be executed as soon as they are downloaded, acting as defer, but there is no guarantee that the script executes sequentially. They will be completed before the OnLoad event.

    <script type= "Text/javascript" defer></script>

Async properties are supported in Firefox 3.6, Opera 10.5, IE 9, and the latest Chrome and Safari. You can use both async and defer, so that all IE after IE 4 supports asynchronous loading.

Without the async attribute, script will get (download) and execute immediately, blocking the browser's subsequent processing. If there is an async attribute, the script is downloaded and executed asynchronously, while the browser continues with subsequent processing.

More references: 1190000006778717

⑥document.write script tag uses document.write to write HTML tag script to the page.

Technology Overview

Decision tree for best script loading techniques under different circumstances

Six kinds of results in the decision tree

This summary for your own reference, do not like to spray ...

Performance-optimized non-blocking load Footstep method comparison