异步加载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文件实现按需加载