Last active
November 6, 2017 20:02
-
-
Save shogun70/5388420 to your computer and use it in GitHub Desktop.
Log `document.readyState` for various stages of markup parsing and events.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <script type="text/javascript"> | |
| var addEvent = document.addEventListener ? | |
| function(node, name, fn) { node.addEventListener(name, fn, false); } : | |
| function(node, name, fn) { node.attachEvent('on' + name, fn); } | |
| var begin = +new Date; | |
| var log = []; | |
| log.push('Event, Time: readyState, EOF'); | |
| function logEvent(name) { | |
| var now = +new Date; | |
| var eof = !!document.getElementById("end"); | |
| log.push(name + ', ' + (now - begin) + ': ' + document.readyState + ', ' + (eof ? 'true' : 'false')); | |
| } | |
| function addEventLogger(node, name) { | |
| addEvent(node, name, function() { logEvent(name); }); | |
| } | |
| logEvent('start'); | |
| addEventLogger(document, 'readystatechange'); | |
| addEventLogger(document, 'DOMContentLoaded'); | |
| addEventLogger(window, 'load'); | |
| addEvent(window, 'load', function() { | |
| window.setTimeout(function() { alert(log.join('\n')); }, 100); | |
| }); | |
| </script> | |
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <title>DOM Ready Test</title> | |
| </head> | |
| <body id="body"> | |
| <div id="start">Start-of-file</div> | |
| <div> | |
| This page logs events and parsing progress points related to <code>document.readyState</code>.<br /> | |
| The following information is logged: | |
| <dl> | |
| <dt>Event</dt> | |
| <dd>The event-name or a position in the page markup</dd> | |
| <dt>Time</dt> | |
| <dd>The elapsed time (ms) since parsing the page began</dd> | |
| <dt>readyState</dt> | |
| <dd>The <code>document.readyState</code>. </dd> | |
| <dt>EOF</dt> | |
| <dd>End-of-file. Has the end of the markup been parsed?</dd> | |
| </dl> | |
| Parsing is paused using an alert. A <i>sleep</i> event occurs before this and a <i>wake</i> event immediately after. <br /> | |
| There is also <i>start</i> and <i>end</i> events, plus the real browser events <code>readystatechange</code>, <code>DOMContentLoaded</code> and <code>load</code>. <br /> | |
| The results are shown in An alert after the page is loaded. <br /> | |
| IE, in particular, exhibits different behavior between the initial page-load and a page refresh. | |
| </div> | |
| <div>Pausing...</div> | |
| <script> | |
| logEvent('sleep'); | |
| </script> | |
| <script> | |
| alert('Pausing the parser'); | |
| </script> | |
| <script> | |
| logEvent('wake'); | |
| </script> | |
| <div id="end">End-of-file</div> | |
| </body> | |
| </html> | |
| <script> | |
| logEvent('end'); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment