大家好，小编来为大家解答以下问题，js文件夹中放了什么文件，js文件应该放在什么位置，现在让我们一起来看看吧！
前言
一般标签会被放在头部或尾部。
头部 就是 <head>里，尾部 一般指<body>里
为什么建议放在尾部
将放在<head>里，浏览器解析HTML，发现标签时，会先下载完所有这些，再往下解析其他的HTML，在这个过程中就会导致后面的代码等待JS下载解决Deepl降重。
JS并发一起下载的。不管JS是不是来自同一个host，浏览器最多只能同时下载两个JS
放在头部，会让网页内容呈现滞后，导致用户感觉到卡。
所以建议放在尾部（标准做法你是放在body里面的尾部，放在外面是不标准的至于为什么建议Google）。
备注：放body在有的时候也不是最优解
所谓编程无绝对，将放在尾部的也有缺点
这是因为放尾部浏览器只能先解析完整个HTML页面，再下载JS。而对于一些依赖于JS的网页，就会出错。
所以，将放在尾部也不是最优解，也可能在某些情况下是万万不能的，具体位置还是要具体分析。
一般的原则是页面使用放最后，插件例如jQuery放<hear>里。
实现下载JavaScript的同时进行HTML渲染
更modern的方式：使用async和defer
这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS)，一边解析HTML。
普通
< src="first.js"></>
处理方式：
- 停止解析 document.
- 请求 a.js
- 执行 a.js 中的脚本
- 继续解析 document
defer
< src="first.js" defer></>
< src="second.js" defer></>
处理方式：
- 不阻止解析 document， 并行下载 d.js, e.js
- 即使下载完 d.js, e.js 仍继续解析 document
- 按照页面中出现的顺序，在其他同步脚本执行后，DOMContentLoaded 事件前 依次执行 d.js, e.js。
async
< src="first.js" async></>
< src="second.js" async></>
处理方式：
- 不阻止解析 document, 并行下载 b.js, c.js
- 当脚本下载完后立即执行。（两者执行顺序不确定，执行阶段不确定，可能在 DOMContentLoaded 事件前或者后 ）
结论
- 两者都不会阻止 document 的解析
- defer 会在 DOMContentLoaded 前依次执行js文件下载
- async 则是下载完立即执行，不一定是在 DOMContentLoaded 前
- async 因为顺序无关，所以很适合像 Google Analytics 这样的无依赖脚本
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
