script 标签中的async和defer

script标签async defer

默认 script 标签会阻塞 HTML 渲染页面,要等【下载并执行完】才会接着渲染。async 下载 js 不会阻塞 HTML 渲染页面,在 js 下载完后运行, 因为是单线程运行时会阻塞页面渲染。defer 同样是异步下载 js ,不过在页面渲染完后才执行,执行优先级低于没有 defer 的 js 文件。

async vs defer
async vs defer

async 是异步的意思,defer 是推迟的意思。

动态加载 script 是异步的,如果需要几个 js 文件按照顺序执行,需要设置 defer 为 false,否则后下载完的大尺寸 js 文件 bigSizeScript.js 会比先下载完成的小 js 文件 smallSizeScript.js 后执行。

function addScript(src){
    var script = document.createElement('script')
    script.setAttribute('type','text/javascript')
    script.src = src
    script.async = false
    document.body.appendChild(script)
}
addScript('bigSizeScript.js')
addScript('smallSizeScript.js')

Leave a Reply

Your email address will not be published. Required fields are marked *