性能优化——异步加载js文件

版权声明：虽然我很善良，但是原创文章还是问问我再转载哦<(￣︶￣)> https://blog.csdn.net/Vivian_jay/article/details/77498195

为什么要异步加载：
同步加载会阻塞浏览器的后续处理，即只有当当前文件加载完毕之后才能进行下一步的文件加载（如图像）、渲染、代码执行。如果js中有输出document内容、修改DOM、重定向等行为，就会造成页面阻塞。

什么叫异步加载：
异步加载不会阻塞浏览器的后续操作，即在加载执行js的同时，并行加载其他文件渲染页面。

1. async属性

• async属性规定js文件一旦可用就会执行，脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

• async 属性仅适用于外部脚本（只有在使用 src 属性时）。

• async 属性不能保证执行顺序。

<script type="text/javascript" src="demo_async.js" async="async"></script>

2. defer属性

• defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

• defer属性表示脚本不会改变文档的内容，浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。以便加快处理文档的速度。

• 只有 Internet Explorer 支持 defer 属性。

<script type="text/javascript" defer="defer"></script>

3. 动态创建DOM

• 不要求js同源

• 这些代码应被放置在标签前(接近HTML文件底部)

• 这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

  扫描二维码关注公众号，回复： 3854693 查看本文章

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

4. onload时动态创建DOM

• 不要求js同源

• 这些代码应被放置在标签前(接近HTML文件底部)

• 这种加载方式不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>