Learning JavaScript: Day 3

Short session

• Learned about where is javascript written in the html file

• Inline js is when you create a <script> tag inside the html

• Using an external file is when you create a “example.js” file and link script “src” in the html

• A browser parses a html document top-down.

• When javascript is encountered in the html file, everything stops and first the js file is loaded and executed by the browser- called content or render blocking

• The correct way to place js files is after the html and css for that element, but that causes complexity

• Therefore tools to tightly control how and when js is loaded were created- async and defer

• Async loads and executes the javascript asynchronously while the html and css is rendered

• Defer loads the javascript asynchronously while the html and css is rendered and executes js only after html and css finish rendering

• Async/Defer are standard ways to load javascript

• Adding js to footer is now an anti pattern

• Modules are used for importing js from other js files

• Modules enable modularization of code, which means individual functions, components, data objects, and other parts can be separated into individual files

If you find any discrepancies in my blog. Please do let me know. Cheers!