Posted 28 days ago. Visible to the public. Repeats.

You should probably load your JavaScript with <script defer>

It is generally discouraged to load your JavaScript by a <script src> tag in the <head>:

Copy
<head> <script src="app.js"></script> </head>

The reason is that a <script src> tag will pause the DOM parser until the script has loaded and executed. This will delay the browser's first contentful paint Archive .

A much better default is to load your scripts with a <script src defer> tag:

Copy
<head> <script src="app.js" defer></script> </head>

A deferred script has many useful properties:

  • It does not block the browser from rendering content.
  • Deferred scripts will run after the HTML was parsed. That means you can query the entire DOM tree with querySelector() and friends. document.readyState is 'interactive'.
  • Deferred scripts will run before the DOMContentLoaded event. That means if your code waits to initialize until DOMContentLoaded (many libraries do), it will still work.
  • If you have multiple deferred scripts, they will run in the order they appear in the HTML, regardless of how long individual scripts take to load.
  • You can put your <script> in the <head>, meaning browsers can start loading the script file very early.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Henning Koch
Last edit:
22 days ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more