head和body引入js的问题

最新推荐文章于 2024-05-09 10:39:03 发布

啊点766

最新推荐文章于 2024-05-09 10:39:03 发布

阅读量793

点赞数 24

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_16546829/article/details/137295940

版权

本文探讨了JavaScript在HTML中加载的位置对页面性能的影响，解释了`defer`和`async`属性的区别，强调了将脚本放在`<body>`底部的优化策略，以及Chrome的预解析优化。文章指出，`defer`保证脚本按顺序执行，而`async`则不保证执行顺序，适用于不依赖其他脚本的场景。

摘要由CSDN通过智能技术生成

1. 为什么有些js需要在body中引入

简单的说，放在 </body> 前面可以保证 HTML 标签先加载和解析，之后才是脚本。

一些脚本涉及到 DOM 操作的，能够有效的前提当然是要有对应的 DOM 对象。当你放在 <head> 标签里，这些脚本在 HTML 标签得以解析之前就执行了，此时没有对应的 DOM 对象可以操作，当然就失效了。

当然，这个问题可以通过监听 DOMContentLoaded 事件，然后把脚本放在事件回调函数里来解决。但是另外一个问题则是 HTTP 请求的优先级问题。脚本（特别是非本地脚本）放在 <head> 标签里，它会优先进行请求，这会阻塞一些 HTML 标签的请求，比如图片等外部资源的下载。这就是为什么我们通常会把脚本放在 load 事件的回调函数里执行的原因。

DOMContentLoaded 和 load 的区别？

前者在文档载入并解析之后触发，但是不包括样式、图片等外部资源；后者则是等待所有的外部资源全部载入之后才触发。因此，你选择监听哪一个事件取决于你的脚本到底要操作什么。

然而不是所有的浏览器都支持 DOMContentLoaded 事件，这就是为什么最佳实践推荐把所有的脚本加载都放在 </body> 标签之前的缘故——保证向后兼容。

从确保内容加载并解析的角度考虑，优先级应该是：HTML > CSS > Javascript，CSS 要生效，前提是 HTML 已经提供了可供操作的选择符；Javascript 要生效，前提是浏览器解析了 HTML 并提供了 DOM 对象以及 CSS 声明已经存在（如果脚本的目的就是处理 HTML & CSS的话）。

2. defer async的区别

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>