为了提高性能，脚本标签在 HTML 中的最佳位置在哪里？
- DDD原创
- 2024-12-20 04:47:13939浏览
HTML 标记中脚本标签的最佳放置
简介
将 JavaScript 集成到 HTML 文档中时，<script> 的适当位置是很重要的。标签长期以来一直是争论的话题。本文探讨了标签放置的最佳实践，解决了与 <head> 相关的误解。和<主体> </script>
历史性误解
过去，建议不要将 <script> 放在<head> 中的标签部分。但是，此建议已经过时，并且源于脚本在解析时可能会阻止页面渲染。</script>
相反，将 <script> 放置在<body> 开头的标签部分也被认为是不可取的。这是因为浏览器必须在完全渲染页面之前解析 JavaScript，从而导致潜在的性能问题。</script>
现代最佳实践
今天，<script> 的最佳放置位置是标签位于 <head> 中部分。这允许浏览器立即开始下载脚本，而不会阻止文档其余部分的解析。</script>
为了避免与脚本解析相关的阻塞行为，浏览器现在支持 async 和 defer 属性。
使用 async 和 defer 属性
Async: 具有 async 属性的脚本是异步执行，这意味着浏览器可以在脚本下载和执行时继续解析文档。
Defer: 具有 defer 属性的脚本按照它们在文档中出现的顺序执行，但仅在之后执行整个文档已被解析。
模块： 加载 type="module" 的 JavaScript 模块异步，并被视为延迟脚本。
结论
通过利用 async、defer 或 module 属性并将 <script> 放置在<head> 中的标签部分，网站开发者可以优化页面加载速度并改善用户体验。</script>
参考
- [异步与延迟属性](https://www.html5rocks.com/en/tutorials /speed/script-loading/)
- [使用 defer 和 defer 高效加载 JavaScript async](https://developers.google.com/web/fundamentals/performance/ritic-rendering-path/defer-loading-javascript)
- [删除渲染阻塞 JavaScript](https://www .w3.org/TR/html5/scripting-1.html#remove-render-blocking-javascript)
- [异步、延迟、模块：视觉效果备忘单](https://addyosmani.com/blog/async-defer-modules-explained/#~a-visual-explanation)
- [<script>: 类型属性](https://developer .mozilla.org/en-US/docs/Web/HTML/Element/script)</script>
以上是为了提高性能，脚本标签在 HTML 中的最佳位置在哪里？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn