嵌入的js代码应该放在什么位置

嵌入的js代码应该放在什么位置

js阻塞： 所有浏览器在下载js代码的时候，会阻止其他一切活动，比如 其他资源下载，内容呈现等。直到js代码 下载、解析、执行完毕   后才开始继续并行下载其他资源并渲染内容。

css阻塞： css本身是并行加载的。但是css后面如果跟着js代码的话， 就会发生阻塞。该css就会阻塞后面资源的下载。

（意思就是 css 加载完毕， js阻塞后面的资源。 相对于 css 阻塞 后面资源）

如果把嵌入的js代码放到css前面。css就不会发生阻塞了。

​ （意思是 js 下载、解析，但没有执行， 加载css 及其以后的资源。就不会发生阻塞了）

如果css在前面，js任然会阻塞资源加载。

根本原因： 浏览器会维持HTMl 中 CSS 和 JavaScript 代码顺序， 样式表（css）必须在嵌入的   js代码 执行  前    先加载、解析完。而嵌入的js代码会阻塞后面的资源加载，所以就会出现css阻塞资源加载的情况。

应放在以为位置

​ 1、 放在底部， 虽然放在底部照样会阻塞所有内容的呈现，但不会阻塞资源下载

​ 2、 如果嵌入的 js 代码放在 head 中，就要把 嵌入的js代码放到css前面。 前面讲述了我的理解。

​ 3、 使用defer的地方

​ 4、 不要在嵌入的js代码中代用运行时间长的函数。因为阻塞，影响用户体验。 如果想要调用。使用 异步 调用。

defer 标签 对脚本进行延迟，直到页面加载为止。 https://www.w3school.com.cn/tags/att_script_defer.asp

​ 有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到