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

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Ways to animate a main element independently of its counterpart's animation

Facing difficulty transferring an array from React to Django

Tracking page views through ajax requests on Google Analytics

Easily Update Your Div Content by Simply Clicking a Single Link/Button

Conceal or style the filter panel in a DT datatable

What is the most effective way to dynamically incorporate external input into a SlimerJS script?

Determine in a JSON array and add to an array object if the key is not found

Implementing Ajax to Load Template-Part in Wordpress

Updating Button Text with PHP on WooCommerce

Arrange the objects in the array in React based on their time and date of creation

Avoiding a constantly repeating video to prevent the browser from running out of memory

Error in TypeScript: The property 'data' is not found within type '{ children?: ReactNode; }'. (ts2339)

Identifying and handling the removal of a complete div element by the user

The necessary data is missing in the scope of the callback function

Display a D3 Collapsible Tree visualization using information stored in a variable

Testing React JSX components using ES6 unit tests

Navigating back to the app after saving contacts can be achieved using React Native and the react-native-contacts library

Issue: The specific module is unable to be located, specifically on the Heroku platform

Transferring Information from Angular Interface to NodeJS through a JSON Document