Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 In addition to events that occur in response to user actions, several events depend on the operation of the browser itself.

2 Such events include page loading and unloading events:

3 <ul><li>DOMContentLoaded- The DOM tree is fully built and ready to work</li>

4 <li>load- all resources are loaded (pictures, styles, scripts, etc.)</li>

5 <li>beforeunload- occurs when the user tries to leave the page</li>

6 </ul>TheDOMContentLoadedevent often has its place in DOM-dependent code. It helps to avoid errors related to the fact that scripts can start executing before the DOM they depend on is ready.

7 This event depends on the document:

8 The speed of building the DOM tree depends on the <script> tags. By default, any <script> in HTML runs before the tree is complete.

9 It means that the speed of code execution in this <script> block will influence when the user sees the site and when theDOMContentLoadedevent is triggered.

10 The topic of optimizing script loading and fast initialization is quite complicated. It is due not only to many factors affecting the order and speed but also to the fact that it works differently in different browsers:

11 Pay attention to the red and blue stripes. The red one shows the triggering of theloadevent, and the blue one showsDOMContentLoaded.

12 At the bottom of the picture, you can see the trigger time of each event, starting from when the page started loading. You can see that the browser first downloads the page itself (its HTML), then extracts links to all external resources from it and starts downloading them. For greater efficiency, downloading resources should happen simultaneously as often as possible.