defer、async属性以及JS异步加载并执行解决方案

优化脚本文件的加载提高页面的加载速度,一直是前端工程师提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览器解析器遇到 type="text/javascript"> alert('script') type="text/javascript"> window.onload = function(){ alert('onload') } defer测试代码,可将代码复制到本地自己测试,外部脚本src引入,内联脚本直接粘帖

运行以上代码,得出以下结论:

  • 外部JS在各个浏览器里运行结果跟定义的执行顺序正常,alert信息会按照 script->defer->onload顺序弹出;
  • 内联脚本,如果脚本都是IE9/8/7/6按照定义的顺序弹出信息,其他浏览器则按照 defer->script->onload 顺序弹出信息,表示defer失效。
  • 而如果有多个内联defer脚本、在body和head都有分布或者在iframe中也有内联defer脚本,则在IE6中表现一致。

如果想给脚本增加defer属性让其延迟加载的话,最好是外部脚本,内联的defer不仅多数浏览器不支持,而且IE6的表现也不一致。

所以将脚本放在body底部比给脚本增加defer属性让脚本延迟加载更好,就像yslow建议的那样:put style top,put script bottom。

浏览器的在遇到defer和async属性的

你可能感兴趣的:(优化,javascript,异步加载,JavaScript解密)