Parsing page loading and the implementation of JS function

  This article mainly introduces the page loading and the implementation of JS function onload or ready need friends can come to the reference, I hope to help you.

First, page load order: Parse HTML structure. Loads external scripts and style sheet files. Parse and execute the script code. Constructs an HTML DOM model. Load external files such as pictures. The page has finished loading.  : html→head→title→ #text (page title) →style→ load style → parse style →link→ load external style sheet file → parse external style sheet →script→ load external script file → Parse outside script file → Execute external script →body→div→script→ load script → parse script → execute script →img→script→ load script → parse script → execute script → load external image file → page initialization complete. Initialization of   JS loading.   OnLoad is not invoked when the document is loaded, but only when all the elements of the page (including pictures, etc.) are loaded to completion.   If there are large size pictures on the page and the download takes a long time, the script will not be initialized until the picture is loaded and the user experience will be greatly affected. However, window.onload is not useless, in many cases some B/ s software needs to load the page to provide user-related functions, so that window.onload can provide a "load" function, or the content of the page is very small, completely without document.ready (); According to various circumstances, should be reasonable use of onload and ready.   Use onload loading:   Code as follows: Window.onload=function () {            var currentrenderer = ' JavaScript ';                         Fusioncharts.setcurrentrenderer (Curren Trenderer);             var chartobj = new Fusioncharts ({      &NBsp         Swfurl: "pie3d.swf",                 width: "290", Hei Ght: "210",                 ID: ' Samplechart ',      ,           DataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}",       & nbsp         DataFormat:FusionChartsDataFormats.XMLURL,               & nbsp           Renderat: ' chart1div            } ' render ();            }   Ready there is an event called domcontentloaded in the consortium that fires when the DOM (Document Object model) is loaded.   Method One: The code is as follows: $ (function () {...}) $ (document), similar to jquery. Ready (function () {...}) (function () {var ie =!! (Window.attachevent &&!window.opera); var wk =/webkit/(d+)/i.test (navigator.useragent) && (regexp.$1 < 525); var fn = []; var run = function () {for (var i = 0; i < fn.length i++) fn[i] (); var d = document; D.ready = function (f) {if (!ie &&!wk && d.addeventlistener) return D.addeventlistener (' domcontentloaded ', F, false); if (Fn.push (f) > 1) return; if (IE) (function () {try {d.documentelement.doscroll (' left '); run ();} catch (Err) {settimeout (Arguments.callee, 0);} })(); else if (wk) var t = setinterval (function () {if (/^ (loaded|complete) $/.test (d.readystate)) clearinterval (t), run ();}, 0 ); }; })();   Call: Document.ready (function () {    alert (' OK '); &nbsp}   Method Two: The   code is as follows:/If you support the DOM2 of the consortium, use the Methods   if (Document.addeventlistener) {      Document.addeventlistener ("domcontentloaded", TE, False) ; } else if (/msie/i.test (navigator.useragent)) {/If it is IE browser (not supported)      /Create a script label that has defer properties, Loaded in       document.write ("    var script = document.getelementbyidx_x" ("__ie_on") when document loading is complete Load "); &nbsP    /If the document is actually loaded, invoke the initialization method       Script.onreadystatechange = function () {          if (this.readystate = = ' complete ') {          te ();         }&N Bsp    } } else if (/webkit/i.test (navigator.useragent)) {/If Safari browser (not supported)  /create timer, check every 0.01 seconds if When the document is loaded, the initialization method   var _timer = setinterval (function () {      if/loaded|complete/.test ( document.readystate) {          clearinterval (_timer);          te (); nbsp    }     },; } else {/If none of the above, use the worst method (in this case, Opera 7 will run here)       win Dow.onload = function (e) {          te ();     }} function Te () {    AL ert (' OK '); }