Synchronous, Asynchronous, and Deferred Scripts
When JavaScript was first added to web browsers, there was no API for traversing and manipulating the structure and content of a document. The only way that JavaScript
code could affect the content of a document was to generate that content on the fly while loading the document. using the document.write() method.
When a script passes argument to document.write(), this argument is added to the document input stream . The use of document.write() is no longer considered good style, but it is still possible and this fact has an important implication.
When the HTML parser encounters a <script> element, it must, by default, run the script before it can resume parsing and rendering the document. This is not much of a problem for inline scripts, but if the script source code is in an external file specified with a src attribute, this means that the portions of the document that follow the script will not appear in the browser until the script has been downloaded and executed.
This synchronous or blocking script execution is the default only. The <script> tag can have defer and async attributes, which (in browsers that support them) cause scripts
to be executed differently.
These are boolean attributes, they don’t have a value, they just need to be added to the <script> tag :
<script defer src="deferred.js"></script>
<script async src="async.js"></script>
Both the defer and async attributes are ways of telling the browser that the linked script does not use document.write() and won’t be generating document content, and that
therefore the browser can continue to parse and render the document while downloading the script. The defer attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated.
The async attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded. If a <script> tag has both attributes, a browser that supports both will honor the async attribute and ignore the defer attribute.
Note that deferred scripts run in the order in which they appear in the document. Async scripts run as they load, which means that they may execute out of order.
At the time of this writing, the async and defer attributes are not yet widely implemented, and they should be considered optimization hints only: your web pages should be designed to work correctly even if deferred and asynchronous scripts are executed synchronously.
You can load and execute scripts asynchronously, even in browsers that do not support the async attribute, by dynamically creating a <script> element and inserting it into the document.
<h1>Table of Factorials</h1>
<script>
function factorial(n) {
if (n <= 1) return n;
else return n*factorial(n-1);
}
document.write("<table>"); // Begin an HTML table
document.write("<tr><th>n</th><th>n!</th></tr>"); // Output table header
for(var i = 1; i <= 10; i++) { // Output 10 rows
document.write("<tr><td>" + i + "</td><td>" + factorial(i) + "</td></tr>");
}
document.write("</table>"); // End the table
document.write("Generated at " + new Date()); // Output a timestamp
</script>
Events
The JavaScript program above is a synchronous one :
it starts running when the page loads, produces some output, and then terminates. This kind of program is very uncommon today. Instead, we write programs that register event handler functions. These functions are then invoked asynchronously when the events occur.
When JavaScript was first added to web browsers, there was no API for traversing and manipulating the structure and content of a document. The only way that JavaScript
code could affect the content of a document was to generate that content on the fly while loading the document. using the document.write() method.
When a script passes argument to document.write(), this argument is added to the document input stream . The use of document.write() is no longer considered good style, but it is still possible and this fact has an important implication.
When the HTML parser encounters a <script> element, it must, by default, run the script before it can resume parsing and rendering the document. This is not much of a problem for inline scripts, but if the script source code is in an external file specified with a src attribute, this means that the portions of the document that follow the script will not appear in the browser until the script has been downloaded and executed.
This synchronous or blocking script execution is the default only. The <script> tag can have defer and async attributes, which (in browsers that support them) cause scripts
to be executed differently.
These are boolean attributes, they don’t have a value, they just need to be added to the <script> tag :
<script defer src="deferred.js"></script>
<script async src="async.js"></script>
Both the defer and async attributes are ways of telling the browser that the linked script does not use document.write() and won’t be generating document content, and that
therefore the browser can continue to parse and render the document while downloading the script. The defer attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated.
The async attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded. If a <script> tag has both attributes, a browser that supports both will honor the async attribute and ignore the defer attribute.
Note that deferred scripts run in the order in which they appear in the document. Async scripts run as they load, which means that they may execute out of order.
At the time of this writing, the async and defer attributes are not yet widely implemented, and they should be considered optimization hints only: your web pages should be designed to work correctly even if deferred and asynchronous scripts are executed synchronously.
You can load and execute scripts asynchronously, even in browsers that do not support the async attribute, by dynamically creating a <script> element and inserting it into the document.
<h1>Table of Factorials</h1>
<script>
function factorial(n) {
if (n <= 1) return n;
else return n*factorial(n-1);
}
document.write("<table>"); // Begin an HTML table
document.write("<tr><th>n</th><th>n!</th></tr>"); // Output table header
for(var i = 1; i <= 10; i++) { // Output 10 rows
document.write("<tr><td>" + i + "</td><td>" + factorial(i) + "</td></tr>");
}
document.write("</table>"); // End the table
document.write("Generated at " + new Date()); // Output a timestamp
</script>
Events
The JavaScript program above is a synchronous one :
it starts running when the page loads, produces some output, and then terminates. This kind of program is very uncommon today. Instead, we write programs that register event handler functions. These functions are then invoked asynchronously when the events occur.
No comments:
Post a Comment