异步加载script,提高前端性能(defer和async属性的区别)

xiaobe阿

于 2018-08-22 19:31:09 发布

阅读量2.3k

点赞数 1

分类专栏： JS/ES6 文章标签： JS异步加载前端性能

本文链接：https://blog.youkuaiyun.com/qq_19644471/article/details/81949680

版权

本文介绍了异步加载script在前端性能优化中的作用，特别是defer和async属性的区别。defer保证脚本按顺序执行，不阻塞DOM解析，而async则在加载完成后立即执行，不保证执行顺序。此外，还提到了通过ajax和iframe来异步加载执行js的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、异步加载script的好处

为了加快首屏响应速度,前端会采用代码切割、按需加载等方式优化性能。异步加载script也是一种前端优化的手段。

就好比如果我的页面其中一个功能需要打开地图,但是地图的js插件包是非常大的,而如果用户不用地图功能的时候,我们当然不能再给它加载js地图包,白白让他多花等待时间岂不是很冤枉!于是我们可以动态插入script,当用户点击了某个按钮的时候,再新建script标签,引入地图js资源。

下面介绍下异步加载script的几种方式。

二、异步加载script的方式

1. 按需加载JS

    getMap.onclick = function(){
   
        //获得需要插入的位置
        var oDiv = document.getElementById('div');
        //异步创建script
        var script = document.createElement('script');

        script.src =

最低0.47元/天解锁文章