script 标签中的async和defer

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

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

动态加载script 是异步的，如果需要他们按照顺序执行，需要设置defer 为false，否则大尺寸后下载完的bigSizeScript.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 Cancel reply