关于script标签的位置
面试被问了好多次,一直有点混沌状态,今天来总结一下
<script>标签被放在head里:在页面渲染DOM树之前依次下载js文件,(注:下载js文件会阻塞渲染)下载完毕后开始渲染页面,如果引入了很多js文件,会导致页面加载慢,出现空白页情况。
<script>标签放在body末尾:先渲染DOM树,再下载js文件,如果网页高度依赖js,需要使用defer或async属性。
defer:脚本可以延迟到文档完全被解析和显示之后再执行。(立即下载,但延迟执行,但不一定会按照顺序执行)把延迟脚本放在页面底部是最佳选择。
async:应该立即下载脚本,但不应妨碍页面中的其他操作。异步执行,不保证先后顺序,所以确保脚本之间互不依赖非常重要。
defer和async都只适用于外部脚本文件。
onload事件:当页面完全加载后触发该事件