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 是异步的,如果需要他们按照顺序执行,需要设置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

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