JavaScript脚本加载相关知识
Posted dzwonline
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript脚本加载相关知识相关的知识，希望对你有一定的参考价值。
<script>标签的位置
html4规范允许<script>可以放在<head>或<body>中。
但是，放在<head>中会导致性能问题：浏览器在解释到<body>前，不会渲染页面任何内容，而把<script>放在<head>中会阻塞页面渲染，把<script>放在<head>的话，会等到<script>全部加载和执行后才会继续渲染页面，这样一来用户访问可能会先看到一段时间的空白页面。
由于脚本会阻塞页面其他资源的下载，所以推荐将所有<script>放在<body>标签的底部。
无阻塞的脚本
defer
HTML4为<script>引入defer属性，带有该属性的<script>可放在任何地方，相应的javascript文件在页面解释到该标签时开始下载，然后在DOM加载完成之后，window.onload事件执行之前，以及其他没有defer属性的<script>之后执行。
带有defer属性的<script>下载脚本并不会阻塞页面加载的其他进程，此类文件可以与其他资源并行下载。
当带有defer的<script>标签使用src引入外部脚本时，该script内嵌的脚本无效。
根据HTML5规范，只有在src被声明时，defer才有效。
使用示例：
<script src= "hello.js" defer="defer"></script> 或者 <script src="hello.js" defer></script>
async
async是HTML5加入的属性，类似于defer
只有在声明src时，async才生效。
标记为async的<script>立即下载脚本文件，同时并不会阻塞页面加载的其他进程，脚本将在下载完成后尽快执行。
标记为async的<script>一定会在window.onload前执行完毕。
标记为async的脚本并不保证按照指定的顺序来执行，eg：
<script async src="hello.js"></script> <script async src="world.js"></script>
上面代码中，第二个脚本可能会在第一个前执行，所以，使用async加载的脚本文件间最好不要有依赖关系。
以上是关于JavaScript脚本加载相关知识的主要内容，如果未能解决你的问题，请参考以下文章