The sequence of CSS and deferred JavaScript execution in web development

Question

The sequence of CSS and deferred JavaScript execution in web development

Consider this scenario: you have a webpage with a common structure in the <head>:

<link rel="stylesheet" href="styles.css"> // large CSS bundle
<script defer src="main.js"></script> // small JS bundle with defer attribute

There is also a

<span id="element"></span>

on the page.

The CSS bundle includes #element { display: none; }.
The JS bundle contains (using jquery):

$(document).ready(() => {
  console.log($('#element').css('display'));
});

However, the outcome can vary. Sometimes the JS executes before the CSS, resulting in 'inline'. Other times, it executes after the CSS, yielding 'none' as desired.

To ensure that my JS bundle is non-blocking, I use the deferred attribute. Placing the JS bundle at the end of the page is not an option due to using turbolinks, which restricts this practice (source).

Using window:load isn't ideal either, as it fires once all resources are downloaded, including images.

I aim for a solution where the JS is non-blocking and executes after the CSS for consistent and predictable results. Is there a way to achieve this?

javascript css

Answer 1

Answer №1

To ensure that a script is added to the head after a CSS file is loaded, you can use a load event handler for the link element. By doing this, the script will be dynamically inserted and automatically set as async, making it non-blocking and allowing it to execute once the CSS has been loaded.

<link id="stylesheet" rel="stylesheet" href="styles.css">

<script>
  var link = document.getElementById('stylesheet');

  link.addEventListener('load', function () {
    var script = document.createElement('script');
    script.src = 'main.js';
    document.head.appendChild(script);
  });
</script>

It's worth noting that there may be an issue if the stylesheet is cached, as it might not trigger a load event if already loaded. In such cases, you could consider checking for link.sheet.cssRules.

The reliability of load events on <link> elements has been a contentious topic in the past, so there's uncertainty about how well this approach will work consistently.

For a visual demonstration of this method, check out this CodePen showcasing JS loading with a check for link.sheet.cssRules. It has been tested and observed to function correctly in Chrome, FireFox, and Edge browsers.Link to CodePen

Answer 2

To ensure that a script is added to the head after a CSS file is loaded, you can use a load event handler for the link element. By doing this, the script will be dynamically inserted and automatically set as async, making it non-blocking and allowing it to execute once the CSS has been loaded.

<link id="stylesheet" rel="stylesheet" href="styles.css">

<script>
  var link = document.getElementById('stylesheet');

  link.addEventListener('load', function () {
    var script = document.createElement('script');
    script.src = 'main.js';
    document.head.appendChild(script);
  });
</script>

It's worth noting that there may be an issue if the stylesheet is cached, as it might not trigger a load event if already loaded. In such cases, you could consider checking for link.sheet.cssRules.

The reliability of load events on <link> elements has been a contentious topic in the past, so there's uncertainty about how well this approach will work consistently.

For a visual demonstration of this method, check out this CodePen showcasing JS loading with a check for link.sheet.cssRules. It has been tested and observed to function correctly in Chrome, FireFox, and Edge browsers.Link to CodePen

Answer 3

Answer №2

Here's a different approach I discovered. You can simply insert a script without the src attribute into the <head> section with some code, like an empty comment: <script>//</script>
That's all there is to it. Now all scripts, including deferred ones, will wait for styles to be applied.
I'm not entirely sure how this mechanism functions, but my understanding is that deferred scripts are placed in a queue after a script without a src attribute, which conventionally must wait for CSS to take effect.

Answer 4

Here's a different approach I discovered. You can simply insert a script without the src attribute into the <head> section with some code, like an empty comment: <script>//</script>
That's all there is to it. Now all scripts, including deferred ones, will wait for styles to be applied.
I'm not entirely sure how this mechanism functions, but my understanding is that deferred scripts are placed in a queue after a script without a src attribute, which conventionally must wait for CSS to take effect.

The sequence of CSS and deferred JavaScript execution in web development

Answer №1

Answer №2

Similar questions

Could you explain the distinction between push and offset within the grid system?

Prevent the reloading of the page by utilizing Ajax technology when submitting a form in Laravel

Using AngularJS to pass a parameter to a directive's template

Can someone explain why Array.from(classList)[0] is not changing to 'className'?

React Router v6 is throwing an error stating that within the <Routes> component, all children must be either a <Route> or <React.Fragment>

Tips for passing arguments to event handlers in React JS

How to trigger a JavaScript function when the UI-Router state is switched?

Utilizing the onscroll feature to trigger a function within a ScrollView

Setting up multiple classes in my unique situation

Is there a way for me to choose a single file while executing the migrate-mongo up command?

Unable to create a horizontal navigation bar

Resetting the randomness in a function within a sudoku generator implemented in JavaScript

Analyzing the differences in environment management between express and dotenv

Having trouble with the functionality of the jQuery `has()` method?

What steps can I take to stop my Details element from moving a nearby Div?

What is the best way to update $state in AngularJs when the user makes changes to the controller?

The ng-style directive is not functioning properly

I am looking to concatenate the existing URL with the language segment using jQuery

Click Event for Basic CSS Dropdown Menu

Is there a way to shift a button within a div to the right while maintaining alignment?