Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Synchronous and Asynchronous Script Loading

When a web page is loaded, the browser parses through the code identifying each html tag and performing whatever rendering or loading function that tag defines. By default that action occurs synchronously. In other words the browser downloads and executes any scripts that it encounters during the parsing of the web page. If the script is external, that is, it has a src attribute, the browser will send a request for the resource and pause further parsing until the file has completed downloading and executing.

<html>
<head>
<script src="scriptOne.js"></script>
<script src="scriptTwo.js"></script>
</head>
</html>

In the synchronous loading example shown above, scriptTwo.js is loaded only when the loading of and executing of scriptOne.js is complete.

Asynchronous script loading causes the external scripts to be loaded asynchronously, in other words along side other downloading and rendering of the webpage.

<html>
<head>
<script async src="scriptOne.js"></script>
<script async src="scriptTwo.js"></script>
</head>
</html>

Note the keyword async in the script links shown above. This causes both scripts to be loaded concurrently, alongside other scripts getting loaded synchronously, and alongside the rendering of the webpage.

In theory this causes the webpage to render more quickly so the user is not forced to wait until the script loading is complete and allows the user to communicate with web page as the script is downloaded in the background.

Google Developers Website says to use asynchronous script loading so that the webpage can render more quickly. However, this can cause dangerous consequences. First, if a webpage element is rendered and the user attempts to interact with it before its related script has completed downloading, this could cause an error. Second, if a script itself has any effect on the appearance of the webpage, the webpage will blink when switching from the originally rendered webpage to the final rendered webpage after the script completes loading and executing. This is referred to as FOOC (Flash Of Original Content).

<script src="demo_defer.js" defer ></script>

One common problem is that a function triggered by an html element, like a form, cannot execute if that element has not yet completed rendering. In that case you might want to use the defer attribute. When present the defer attribute specifies that the script is to be executed only when the page has finished rendering.

The fact is, whether to use synchronous or asynchronous script loading depends upon the design of the webpage. Asynchronous script loading can cause the webpage can render more quickly. But if done without consideration for the design it can cause webpage flash or even errors.

More Java Script Code:
• Calculators for Your Web Site : Body Mass Index
• JavaScript Code to Add or Remove Specific Elements of an Array
• Easy Animated Banners with Java Script
• Creating Basic Java Script Functions
• HTML5 Canvas JavaScript Code to a Draw Bezier Curve
• Easy JavaScript Web Storage Code
• Easy Java Script Timer Code
• How Far Did the User Scroll?
• Replace Drop-down with Drag-and-drop
• Easy Code to Sort a Table by Column

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268