重新认识script标签

• defer和asnyc（只对外部文件有效）
  • defer 在页面完成解析时执行代码，这个属性表明脚本在执行时不会影响页面的构造，在元素中设置这个属性相当于告诉浏览器立即下载但延迟执行
  • async 相对于页面其他部分异步执行脚本，一般的script标签都是会阻塞页面执行的，没有加上async属性的标签会阻塞后面的标签的解析。一般用在不需要操作dom元素的脚本上，例如一些统计代码（跟页面执行逻辑无关的，不涉及dom操作的），可以避免因长时间加载而呈现白屏现象
• script中有或没有它们的区别
  • script中没有defer和async，会立刻加载并执行
  • script中有async没有defer时，会与渲染后续文档元素并行加载，加载完自动执行
  • script中有defer没有async时，后续文档元素渲染会与脚本文件加载并行，但是执行所有元素解析完成之后，在DOMContentLoaded之前执行

QQ图片20160929092409.png

https://segmentfault.com/q/1010000000640869 这个回答很棒

• 但是红宝书中有这样一句话：HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行，但在现实生活中，延迟脚本并不一定按照顺序执行，也不一定会在DOMContentLoaded事件中触发前执行，因此最好只包含一个延迟脚本。因此上图第三点说法有欠缺

Paste_Image.png

未解决问题：所有浏览器都兼容，那么为什么没有看到别人在用呢？

查了一下，网易有在用，浏览器兼容还是有点小问题，and业务需求

• script是可以并行下载的，这里应该是指放在head中的script标签，不会阻塞其他script标签，但是仍然会阻塞其他资源下载，例如图片。尽管脚本的下载过程中不会相互影响，但页面仍然要等到所有js代码下载并完成执行才能继续。-- 《高性能的js》

并行下载测试

Paste_Image.png

• 建议放在body的底部
• 每个script标签初始化都会阻塞页面渲染，在解析html页面过程中每遇到一个script标签都会因执行脚本而导致一定的延时
• 尽管单个较大的js文件只请求一次http，但是这样会导致锁死浏览器一段时间，解决方案除了上面所说的defer之外还可以动态创建标签加入head中，可以通过onload事件来监听脚本加载是否完毕，ie下通过readystatechange事件

function loadScript(url, callback) {

    var script = document.createElement('script');

    if ( script.readyState ) { // IE

        script.onreadystatechange = function(){

            if( script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null; // 同时检查两种状态，只要有一种触发就删除事件处理器，避免触发两次
                callback();
            }

        }

    }else{

        script.onload = function(){
            callback();
        }

    }


    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);

}