Optimal Placement of Script Elements in HTML Markup When integrating JavaScript into HTML documents, the correct placement of tags and associated scripts has been a subject of debate. While it's widely acknowledged that placing them in the <head> section is not advisable, positioning them at the start of the <body> section also poses issues.</p> <p><strong>The Problem with Traditional Approaches</strong></p> <p>Older recommendations suggest placing <script> tags at the bottom of the <body> section, assuming this prevents blocking the parser until the end. However, this approach introduces a different problem: the browser cannot initiate script downloads until the entire document is parsed. On larger websites with voluminous scripts and stylesheets, this delay significantly impacts performance.</p> <p><strong>The Modern Solution: async and defer Attributes</strong></p> <p>Today, browsers offer the async and defer attributes on scripts. These attributes instruct the browser to proceed with parsing while scripts download.</p> <ul> <li> <strong>async:</strong> Scripts with the async attribute execute as soon as downloaded, without blocking the browser. Note that scripts may execute out of order in this scenario.</li> <li> <strong>defer:</strong> Scripts with the defer attribute execute in the order they appear, but only after the entire document has loaded. This ensures scripts execute in the correct sequence without blocking the browser.</li> </ul> <p><strong>Modules</strong></p> <p>Scripts that include type="module" will be treated as JavaScript modules and loaded like deferred scripts.</p> <p><strong>Conclusion</strong></p> <p>The modern approach to optimal script placement is to include scripts in the <head> section and use the async or defer attributes. This allows scripts to download promptly without hindering the browser, while maintaining backwards compatibility with older browsers that do not support these attributes. By implementing this approach, your website can benefit from improved loading times while preserving functionality on all browsers.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
