From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

JavaScript loading: Async and defer

JavaScript loading: Async and defer

From the course: Developing for Web Performance

Start my 1-month free trial Buy for my team

JavaScript loading: Async and defer

“

- [Instructor] When and how the browser loads each JavaScript file it encounters has a significant impact on both performance and functionality. For this reason, we have the async and defer keywords which instruct the browser to either load JavaScript files asynchronously while rendering takes place, and then execute them as soon as they're available, or to load the files asynchronously and defer execution until the DOM rendering is done. Let's take a closer look at these two keywords and how they work. When the browser is presented with JavaScript, either inline or from an external file, it immediately stops its rendering process because there's a good chance the JavaScript will impact the HTML or CSS or both in some way. This is what's referred to as render blocking. And with big JavaScript files, it can cause significant issues because everything stops until the JavaScript is fully loaded and executed. Additionally…

Contents