Script Tag Attributes: async & defer You inquired about the async and defer attributes for the tag in HTML5 browsers. Here's some insight:</p> <h3>Performance Implications</h3> <ul> <li> <p><strong>async:</strong></p> <ul> <li>Executes scripts as soon as they are loaded, not guaranteeing execution order.</li> <li>Downloads scripts in parallel, potentially improving page load speed.</li> </ul> </li> <li> <p><strong>defer:</strong></p> <ul> <li>Guarantees the order of script execution as they appear on the page.</li> <li>Loads scripts after the HTML is parsed, slightly delaying page rendering.</li> </ul> </li> </ul> <h3>Optimal Usage</h3> <p><strong>For improved site load speed:</strong></p> <ul> <li>Placing scripts with async at the bottom of the page can improve page load time.</li> <li>Putting scripts with async or defer at the top of the page can also reduce rendering delays.</li> <li>Note that these attributes may have no significant impact on HTML4 browsers.</li> </ul> <h3>Using <script defer src=...></h3> <ul> <li>Deferring scripts in <head> mimics the behavior of placing them before </body>.</li> <li>However, it ensures their execution in the correct order.</li> <li>HTML4 browsers may still experience delays.</li> </ul> <h3>Using <script async src=...></h3> <ul> <li>Scripts with async enabled download simultaneously.</li> <li>Execution order is not guaranteed, which may pose issues if dependencies exist.</li> </ul> <h3>Order Considerations</h3> <ul> <li>Scripts relying on each other should maintain the correct order even with async.</li> <li>Consider using defer if the order of execution is crucial.</li> </ul> <h3>Recommendations</h3> <p>As HTML5 becomes more prevalent, it's advisable to start experimenting with async and defer attributes. However, for optimal compatibility and reliability, it's prudent to leave things as they are in the meantime.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
