异步加载js
javascript加载的缺点
- 加载工具和方法时没必要阻塞文档，过多的js加载会影响页面效率，一旦网速不好整个网站将等待js价值啊而不进行后续的渲染工作。
- 有些方法需要按需要时才加载，用到的时候才加载，不用的时候不加载。
javascript异步加载方案
defer
异步加载js
js加载的缺点
- 加载工具和方法时没必要阻塞文档，过多的js加载会影响页面效率，一旦网速不好整个网站将等待js价值啊而不进行后续的渲染工作。
- 有些方法需要按需要时才加载，用到的时候才加载，不用的时候不加载。
js异步加载方案
defer
defer英文意思为延迟，即延迟加载的意思，立即下载但是整个页面都解析完毕后再运行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。
<script src="tools.js" defer>
var name="john";
</script>
IE独有，要等到dom文档树加载完成后才会被执行；并且可以在内部写js代码。
async
标记为async的脚本并不保证按照它们的先后顺序执行。第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。
<script src="tools.js" async></script>
w3c标准，只能引入外部文件，不能在内部写代码。
defer和async比较
普通script defer async的比较
绿色线代表 HTML 解析。蓝色线代表网络读取（下载），红色线代表执行时间，这俩都是针对脚本的。
动态创建script
<script>
var script = document.createElement("script");
script.src="tools.js";//下载
script.onload = function(){//文件下载完才执行里面的方法
Tools();
}
document.body.appendChild(script);//执行
</script>
当运行js时通过dom插入js文件实现按需加载
