8

Preload: fetch a CSS stylesheet and apply it at some later time, fetch a JavaScript asset and execute it later, and so on. Preload fetches do not block the document load event and allow the application to determine which resources are applied, when they are executed, and in which order.

Defer: The "defer" preloads during HTML parsing and will only execute it after the parser has completed.

I cant understand the differences in both concepts. Both fetch stuff asynchronously without blocking the parser and afterwards both can be executed when the parser is done.

So is there any difference at all?

George Paouris
  • 525
  • 4
  • 16
  • 4
    Preload gives you more control over when a script should be executed. It just makes sure that the script is downloaded. While defer would always run the script after parsing – gaurav5430 Sep 07 '20 at 20:03
  • 2
    Yes, you might not want to execute the script/stylesheet - maybe you're at the site's home page and you are showing the login form but you know immediately after the user navigates to the main site app. The main site app contains a heavy javascript/stylesheet you wish to preload. Preload helps you here - defer does not. – Benjamin Gruenbaum Apr 05 '21 at 11:48
  • Something is wrong with the grammar in the title. I would fix, but I have no idea what you are trying to say. – ctrl-alt-delor May 20 '22 at 19:53

1 Answers1

0

Preload fetches do not block the document load event and allow the application to determine which resources are applied, when they are executed, and in which order. Defer: The "defer" preloads during HTML parsing and will only execute it after the parser has completed.

Bottle Of Soul
  • 1