The browser helps to track the loading of external resources, such as pictures, scripts and more. Two primary events are used for that purpose: Loading a Script Imagine that you should load a third-party script and call a function residing there, as illustrated below: To run the function declared inside that script, you should wait…

The scripts are heavier in modern browsers than in HTML: the download size is larger, and it takes more time to process. Once the browser loads HTML meets a <script>…</script> tag, it won’t be able to continue setting up the DOM. The script should be executed by it right now. The same scenario works for the external scripts. In…

Today, browsers sometimes suspend pages or abort them entirely, in case the system resources are limited. Luckily, there are modern lifecycle hooks that help to handle such interventions without affecting the user experience. There are three significant events in the framework of an HTML page lifecycle: Each of the events above may be useful on a specific purpose: Further,…