1》把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后,才开始展现页面内容,为避免这个问题一般把js代码全部放在<body>元素内容后面
2》script标签不带defer和async属性:同步模式,脚本获取和执行都是同步,页面会被阻塞,浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析
同步模式:又称阻塞模式,会阻止浏览器的后续执行,停止后续解析,只有当前加载完成才能进行下一步操作。
3》async属性:html5的新属性,只适合用于外部脚本文件,异步模式,脚本获取是异步,执行是同步的,脚本加载不阻塞页面解析
通过createElement创建的script标签其属性async默认为true
4》defer属性:延迟加载,只适合外部脚本文件,会被延迟到整个页面都解析完毕后再运行,获取是异步的执行时同步,脚本加载不阻塞页面的解析,同时带有defer的脚本彼此之间,能保证其执行顺序
5》js放在head和body的区别
head:js会在被调用的时候执行,进行页面初始化的时候放在head(比如给页面body设置css等)
注意点:js放在head里的话,会先被解析,但这个时候body还没有解析,所以会返回空值
body:js会在页面加载的时候执行