耽误剧本的体式格局

2019年8月31日 160次阅读 来源: bottle_

昨晚‘本日头条’笔试题中碰到这道题，本日特地查了一下。

从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 最先都许可并行下载 JavaScript 文件。

<script>标签在下载外部资本时不会壅塞其他<script>标签。遗憾的是，JavaScript 下载历程依然会壅塞其他资本的下载，比方款式文件和图片。只管剧本的下载历程不会相互影响，但页面依然必需守候一切 JavaScript 代码下载并实行完成才继承。

完成耽误加载的体式格局有：

体式格局一：标签放在底部

将<script>节点安排在</body>之前，如许js剧本会在页面显示出来以后再加载。

体式格局二：Defer和Async属性

运用script标签的defer和async属性

Defer属性

defer是在html4.0中定义的

html5范例请求剧本根据涌现的递次实行，对应的js文件在页面剖析到<script>标签时最先下载，但不会实行，直到DOM加载完成，即onload事宜触发前才会实行

当一个带有 defer 属性的 JavaScript 文件下载时，它不会壅塞浏览器的其他历程，因而这类文件能够与其他资本文件一同并行下载。

<script type="text/javascript" defer="defer" src="example.js">
<script type="text/javascript" defer="defer" src="example.js">

瑕玷：并非一切浏览器支撑该属性

async属性

async是html5新增的属性，IE10和其他浏览器都支撑该属性

同defer一样，不会壅塞其他资本的加载，也不会影响页面的加载，但js一旦加载好了就会实行，所以很有能够不是根据底本的递次来实行

体式格局三：动态剧本元素

DOM动态建立<script>

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

能够监听剧本是不是加载胜利

script.onload = function(){
    alert('script loaded!');
};
/*IE中的监听体式格局不一样*/
script.onreadystatechange = function(){
    if(script.readyState == 'load' || script.readyState == 'complete'){
        script.onreadystatechange = null;
        alert('script loaded');
    }
};

要领四：运用XMLHttpRequest(XHR)

var xhr = new XMLHttpRequest();
xhr.open('get', 'script.js', true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
         }
     }
};
xhr.send(null);

长处：
能够下载不马上实行的javascript代码；
一样的代码在一切当代浏览器中都能够一般运转。

瑕玷：
javasript文件必需和页面安排在同一个域中，不能从CDN下载，所以大型网页一般都不采纳XHR剧本注入手艺。

总结

削减 JavaScript 对机能的影响有以下几种要领：

将一切的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在剧本实行前页面已完成了衬着。

尽量地兼并剧本。页面中的<script>标签越少，加载也就越快，相应也越敏捷。无论是外链剧本照样内嵌剧本都是云云。

采纳无壅塞下载 JavaScript 剧本的要领：
运用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
运用动态建立的<script>元素来下载并实行代码；
运用 XHR 对象下载 JavaScript 代码并注入页面中。

    原文作者：bottle_
    原文地址: https://segmentfault.com/a/1190000006976597
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞