Skip to content
shows the specificities between the different attributes (ASYNC and DEFER) of a JavaScript script. Difference between async and defer attributes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
scss
.gitignore
README.md
france-2.html
france-detail.svg
france-regions-2.svg
france-regions-2016.svg
france-test.html
france.html
france.svg
index.html
package-lock.json
package.json

README.md

script-loading-attributes-test

shows the specificities between the different attributes :

  • ASYNC
  • DEFER

of a JavaScript script and show how to use the performance API with following methods :

  • performance.mark,
  • performance.measure
  • performance.getEntriesByType

Installation of the optional dependency => "browser-sync"

npm install

Start server (if you do not have one)

npm start

Server start at => http://localhost:3000 and have a look inside the console devtool ;)

Update script attribute

Inside "index.html" file, change the script tag as following :

No attribute

<script src="js/main.js"></script>

Console result is the following

domRoot1 not ready   // Dom was not ready yet when script was executed (nothing was found) !
domRoot2 not ready   // Dom was not ready yet when script was executed (nothing was found) !

"async" attribute

<script async src="js/main.js"></script>

Console result is the following

domRoot1 [object HTMLDivElement]    // one node has been found !
domRoot2 not ready                  // Dom was not ready yet (nothing was found) !

"defer" attribute

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

Console result is the following

domRoot1 [object HTMLDivElement]    // one node has been found !
domRoot2 [object HTMLDivElement]    // one node has been found !

Conclusion

  • async => the navigator doesn't block DOM parsing during script loading but it doesn't wait the end of DOM parsing before script execution start
  • defer => the navigator doesn't block DOM parsing and wait the end of DOM parsing before script execution start.
You can’t perform that action at this time.