嵌入的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 属性加入到