高级JS不知道的冷知识----script标签

script 标签

1.首先了解HTML的结构,分为head 和 body 标签,我们可以理解成html是从上往下加载的
2.js 分为内部js 和外部js
外部引入的js文件一般放到head 部分 在页面加载之前引入js文件,保证当前页面可以正常调用,
内部js一般会放到body的下面

为什么本地的js脚本会放到body下面?

1.页面加载js脚本时,会阻塞页面其他资源的加载,如果把本地的js放到head部分,浏览器会先解析完js代码,再继续解析body里面的代码;
2加载js脚本会阻塞是既定的规范,没有明确的说明;
如果放到head头里面,用户要忍受这种可视的延迟,虽然忍得越久,到时候越爽,但是万一憋坏了就不好了…

为了避免head引入的js脚本阻塞浏览器的解析引擎对dom的解析工作，对dom的渲染，一般样式在前面，dom文档，脚本在最后面。遵循先解析再渲染再执行script这个顺序

解决方法:

1.一般我们用window.onload 的事件 等页面加载完以后执行js 代码;
2.script标签中有2个属性 async 和 defer

async 和 defer区别

defer 等页面加载完在执行,和window.onload 一样
async 是异步加载,标记为async 的脚本不能确保加载的顺序