浅谈script标签

<script> ? 这不就是直接执行script脚本吗？

之前的我这有认为，可是今天却知道了他的奥秘。他并无表面的那么简单。

属性

<script>拥有7个属性，没想到吧！

• async
  • boolean
  • 异步执行该脚本，但不保证按照指定它们的前后顺序执行
• defer
  • boolean
  • 通知浏览器该脚本将在文档完成解析后遇到</html>，并会按照它们出现的前后顺序执行。但会在触发 DOMContentLoaded 事件前执行。
• integrity
  • 包含用户代理可用于验证已提取资源是否已无心外操做的内联元数据
• src
• type
• text
• crossorigin
  • 使那些将静态资源放在另一个域名的站点打印错误信息,就是将跨域报错变为同源报错

在XHTML文档中，要把async属性设置为 async = "async", defer = "defer"

知道了那几个属性接下来，来看看下面这个图：

1. 第一个光秃秃的<script>说明了，在html解析中，若是有<script>的话，html会在Script下载而且执行的时候，暂停解析。
2. 第二个带async属性的<script>，如图所示，也就是他下载Script的时候是异步的，可是只要Script文件下好了，那么就立刻执行。
3. 第三个带defer属性的<script>，其实和上面带async属性同样都是异步执行去下载Script文件的。可是在这个带有defer的则是在html所有解析完毕以后才去执行Script文件。并且它是按照加载顺序执行脚本的，这一点要善加利用。显然 defer 是最接近咱们对于应用脚本加载和执行的要求的

使用动态建立的<script>标签元素来下载并执行代码

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);
复制代码

这个技术的重点在于：

不管什么时候启动下载，文件的下载和执行过程不会阻塞页面其余进程。

参考：

《高性能JavaScript》

使用XHR对象下载JS代码注入页面

function loadScript(url, callback){
    var script = document.createElement(
"e");
    script.type = "text/javascript";
    if(script.readyState){	//ie
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechage = null;
                callback();
            }
        };
    } else {
        script.onload = function(){
            callback();
        }
    }
}

loadScript("the-rest.js", function(){
    Application.init()
});
复制代码

这样作实现了动态建立标签元素并下载，其次当第二个脚本文件下载时，应用所需的全部DOM结构已经建立完毕，并作好了交互的准备,从而避免了须要另外一个事件来检测页面是否准备好。

参考

• MDN
• SegmentFault