Defer scripts and execution order on browsers

Active3 hr before
Viewed126 times

7 Answers


On Firefox, execution of defer'ed script does start in order of appearance, but doesn't complete in the same order. Where'as, on chrome unless the previous script completes execution, the next script's execution doesn't start. It looks like Chrome makes sense.,To test the execution order, I had inserted console.log at the first and last line of each scripts, for e.g. in deps.js,The defer attribute does work. But, I am doubtful on the execution order. It looks like it is different on FF and Chrome.,So it does say it defers script execution until the associated Document is parsed, it also says it's pushed into the list. So the order of the list should be as the script order is being parsed-inserted.

As per my porject:

<script defer="defer" src="{SERVER_PATH}/deps.js?1441452359"></script>
<script defer="defer" src="{SERVER_PATH}/script1.js?1440067073"></script>
<script defer="defer" src="{SERVER_PATH}/script2.js?1441451916"></script>
load more v

The script that loads first – runs first (“load-first” order).,The defer attribute is ignored if the <script> tag has no src.,The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads “in the background”, and then runs when the DOM is fully built.,Luckily, there are two <script> attributes that solve the problem for us: defer and async.

<p>...content before script...</p>

<script src=""></script>

<!-- This isn't visible until the script loads -->
<p>...content after script...</p>
load more v

Scripts with the defer attribute will execute in the order in which they appear in the document.,This element includes the global attributes.,Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.,This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

<script src="javascript.js"></script>
load more v

When loading a script on an HTML page, you need to be careful not to harm the loading performance of the page.,Another case pro defer: scripts marked async are executed in casual order, when they become available. Scripts marked defer are executed (after parsing completes) in the order which they are defined in the markup.,When you first learn HTML, you’re told script tags live in the <head> tag:,The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

<script src="script.js"></script>
load more v

Another option, recommended by Patrick Sexton of Varvy, uses a script to call an external JavaScript file only after the initial page load is finished. This means that visitors’ browsers will not download or execute any JavaScript until the initial page load is finished.,Defer downloads JavaScript while still parsing HTML and waits to execute it until after HTML parsing is finished.,It will do this for each script that it finds, which can have a negative effect on your site’s page load times because the visitor needs to stare at a blank screen while their browser downloads and parses all the JavaScript.,Earlier, we mentioned that Patrick Sexton of Varvy recommends using a code snippet that waits to both download and execute JavaScript until after your site completes its initial page load.

Here’s the code from Varvy:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
load more v

The data-pagespeed-no-defer attribute can change the order of script execution because those scripts using it are executed inline while those not using it are deferred. This can cause errors if these scripts depend on each other in any way. , defer_javascript doesn't defer a script tag if it has the data-pagespeed-no-defer attribute (preferred) or pagespeed_no_defer attribute (deprecated). This is useful when a script tag needs to be executed while loading the page. For example, a script tag may be updating the main content dynamically as a slideshow of images in the visible content of the page. Usage: , Warning: Defering JavaScript can often dramatically improve the rendering speed of a site, but careful evaluation is required to ensure the site continues to operate properly. The limitations are described below. , defer_javascript tries to defer JavaScript execution until page load. It defers this by changing the type and src attributes of <script> elements on the HTML page to data-pagespeed-orig-type and data-pagespeed-orig-src respectively. It also adds a new type attribute whose value is set to text/psajs. A window.onload handler is added to the HTML, which executes all the deferred scripts.

ModPagespeedEnableFilters defer_javascript
load more v

If neither async or defer is present: The script is downloaded and executed immediately, blocking parsing until the script is completed,If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes),If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing,If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

Definition and Usage

The defer attribute is a boolean attribute.

load more v