关于script标签的位置

面试被问了好多次,一直有点混沌状态,今天来总结一下

<script>标签被放在head里:在页面渲染DOM树之前依次下载js文件,(注:下载js文件会阻塞渲染)下载完毕后开始渲染页面,如果引入了很多js文件,会导致页面加载慢,出现空白页情况。

<script>标签放在body末尾:先渲染DOM树,再下载js文件,如果网页高度依赖js,需要使用defer或async属性。

defer:脚本可以延迟到文档完全被解析和显示之后再执行。(立即下载,但延迟执行,但不一定会按照顺序执行)把延迟脚本放在页面底部是最佳选择。

async:应该立即下载脚本,但不应妨碍页面中的其他操作。异步执行,不保证先后顺序,所以确保脚本之间互不依赖非常重要。

defer和async都只适用于外部脚本文件。

onload事件:当页面完全加载后触发该事件

posted @ 2018-10-08 19:04  学会谦卑博古  阅读(410)  评论(0编辑  收藏  举报