MozillaWiki

Evangelism/Firefox3.5/35Days/Articles/Defer on script elements: Difference between revisions

Page Discussion

Evangelism/Firefox3.5/35Days/Articles/Defer on script elements (view source)

Revision as of 10:57, 2 July 2009

66 bytes removed ,  2 July 2009
m
→‎Second test
 
Line 35: Line 35:
Here follow the partial source code of this webpage :
Here follow the partial source code of this webpage :


  ‹!doctype html›
  <!doctype html>
  ‹html›
  <html>
     ‹head›
     <head>
         ‹title› Test 2 ‹/title›
         <title> Test 2 </title>
         ‹script› var test2 = "Test 2 :\n\n"; ‹/script›
         <script> var test2 = "Test 2 :\n\n"; </script>
         ‹script› document.addEventListener("DOMContentLoaded",
         <script> document.addEventListener("DOMContentLoaded",
                 function(){
                 function(){
                         test2 += "\t<font style="color: red;">DOMContentLoaded</font>\n";
                         test2 += "\t<font style="color: red;">DOMContentLoaded</font>\n";
                 }, false);
                 }, false);
         &#139;/script&#155;
         &#60;/script&#62;
         &#139;script <font style="color: green;">defer</font>&#155; test2 += "\t<font style="color: red;">Inline HEAD deferred</font>\n"; &#139;/script&#155;
         &#60;script <font style="color: green;">defer</font>&#62; test2 += "\t<font style="color: red;">Inline HEAD deferred</font>\n"; &#60;/script&#62;
         &#139;script&#155; test2 += "\t<font style="color: red;">Inline HEAD</font>\n"; &#139;/script&#155;
         &#60;script&#62; test2 += "\t<font style="color: red;">Inline HEAD</font>\n"; &#60;/script&#62;
         &#139;script src="script1.js" <font style="color: green;">defer</font>&#155;
         &#60;script src="script1.js" <font style="color: green;">defer</font>&#62;
                 // <font style="color: red;">External HEAD deferred (script1.js)</font>  
                 // <font style="color: red;">External HEAD deferred (script1.js)</font>  
         &#139;/script&#155;
         &#60;/script&#62;
         &#139;script src="script2.js"&#155;
         &#60;script src="script2.js"&#62;
                 // <font style="color: red;">External HEAD  (script2.js)</font>
                 // <font style="color: red;">External HEAD  (script2.js)</font>
         &#139;/script&#155;
         &#60;/script&#62;
  &#139;script&#155;
  &#60;script&#62;
             // <font style="color: red;">Dynamic DOM insertion of a script (script3.js)</font>
             // <font style="color: red;">Dynamic DOM insertion of a script (script3.js)</font>
             head = document.getElementsByTagName('head')[0];
             head = document.getElementsByTagName('head')[0];
Line 64: Line 64:
             script4.setAttribute('src', 'script4.js');
             script4.setAttribute('src', 'script4.js');
             head.appendChild(script4);
             head.appendChild(script4);
  &#139;/script&#155;
  &#60;/script&#62;
  &#139;script <font style="color: green;">defer</font>&#155;
  &#60;script <font style="color: green;">defer</font>&#62;
             // <font style="color: red;">Deferred dynamic DOM insertion of a script (script5.js)</font>
             // <font style="color: red;">Deferred dynamic DOM insertion of a script (script5.js)</font>
             head = document.getElementsByTagName('head')[0];
             head = document.getElementsByTagName('head')[0];
Line 76: Line 76:
             script6.setAttribute('src', 'script6.js');
             script6.setAttribute('src', 'script6.js');
             head.appendChild(script6);
             head.appendChild(script6);
  &#139;/script&#155;
  &#60;/script&#62;
     &#139;/head&#155;
     &#60;/head&#62;
     &#139;body onload="test2 += '\t<font style="color: red;">Body onLoad</font>\n';"&#155;
     &#60;body onload="test2 += '\t<font style="color: red;">Body onLoad</font>\n';"&#62;
         &#139;script <font style="color: green;">defer</font>&#155; test2 += "\t<font style="color: red;">Inline BODY deferred</font>\n"; &#139;/script&#155;
         &#60;script <font style="color: green;">defer</font>&#62; test2 += "\t<font style="color: red;">Inline BODY deferred</font>\n"; &#60;/script&#62;
         &#139;script&#155; test2 += "\t<font style="color: red;">Inline BODY</font>\n"; &#139;/script&#155;
         &#60;script&#62; test2 += "\t<font style="color: red;">Inline BODY</font>\n"; &#60;/script&#62;
   
   
  ... other body content ...
  ... other body content ...
Line 88: Line 88:
  ... other body content ...
  ... other body content ...
   
   
         &#139;script src="script7.js" <font style="color: green;">defer</font>&#155;
         &#60;script src="script7.js" <font style="color: green;">defer</font>&#62;
                 // <font style="color: red;">External BODY deferred (script7.js)</font>
                 // <font style="color: red;">External BODY deferred (script7.js)</font>
         &#139;/script&#155;
         &#60;/script&#62;
         &#139;script src="script8.js"&#155;
         &#60;script src="script8.js"&#62;
                 // <font style="color: red;">External BODY (script8.js)</font>
                 // <font style="color: red;">External BODY (script8.js)</font>
         &#139;/script&#155;
         &#60;/script&#62;
     &#139;/body&#155;
     &#60;/body&#62;
  &#139;/html&#155;
  &#60;/html&#62;


By clicking the link "Launch test 2", a pop-up appears with a list in it. This list shows the order of <tt>script</tt> elements loaded during the session.
By clicking the link "Launch test 2", a pop-up appears with a list in it. This list shows the order of <tt>script</tt> elements loaded during the session.
Retrieved from "https://wiki.allizom.org/Special:MobileDiff/153198"