首页 > web前端 > js教程 > 为了提高性能,脚本标签在 HTML 中的最佳位置在哪里?

为了提高性能,脚本标签在 HTML 中的最佳位置在哪里?

DDD
发布: 2024-12-20 04:47:13
原创
909 人浏览过

Where is the Optimal Placement of Script Tags in HTML for Improved Performance?

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板