suchen

Heim >Web-Frontend >js-Tutorial >So beschleunigen Sie das Laden und Ausführen von JavaScript

So beschleunigen Sie das Laden und Ausführen von JavaScript

黄舟
黄舟Original
2016-12-20 15:40:111097Durchsuche

JS verfügt über eine sehr stille Blockierungsfunktion. Das heißt, wenn der Browser JS-Code ausführt, kann er gleichzeitig nichts anderes tun, unabhängig davon, ob der Code eingebettet oder extern ist.

Wenn der Browser auf ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, das eine externe JS-Datei einführt, werden alle Arbeiten zum Herunterladen, Parsen und Ausführen dieser Datei vollständig blockiert Um Pausen beim Laden der Seite oder sogar das Erscheinen leerer Seiten zu vermeiden, sollten JS-Skripte so weit wie möglich am Ende der Seite platziert werden. Dies ist sehr wichtig: 

<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。。</p>
<!-- 推荐的位置，页面底部： -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

Um das zu verbessern Die oben beschriebene Blockierungssituation sollte die Anzahl der JS-Skripte auf der Seite so weit wie möglich reduzieren. Die Anzahl der Vorkommen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a Anzahl externer Linkskripte auf der Seite sollte reduziert werden.

Sie können Ihre mehreren JS-Dateien manuell zusammenführen, oder Sie können einen Echtzeit-Onlinedienst wie Yahoo! verwenden, um dies zu erreichen. Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag lädt beispielsweise tatsächlich 3 JS-Dateien: 

<html>  
<head>  
<title>无标题文档</title>  
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">  
</head>  
<body>  
   
<p>页面的内容。。。</p>  
   
<!-- 推荐的位置，页面底部： --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>  
</body>  
</html>

Um Blockierungssituationen zu verhindern, finden Sie hier mehrere Lösungen zum parallelen Herunterladen von JS-Skripten.

1. Deferred script

HTML4 definiert ein Defer-Attribut für das 3f1c4e4b6b16bbbd69b2ee476dc4f83a, das jedoch die Ausführung dieses Codes verzögern kann +. Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a, das das Defer-Attribut deklariert, wird analysiert und ausgeführt, bevor das DOM-Laden abgeschlossen ist und das window.onload-Ereignis ausgelöst wird: 

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

2. Dynamische Skriptelemente

Dies ist die häufigste Lösung, die darin besteht, ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element dynamisch über das DOM zu erstellen und es in das Dokument einzufügen. Der Download der Datei beginnt, wenn das Element zur Seite hinzugefügt wird. Der Download- und Ausführungsprozess der Datei blockiert keine anderen Seiten.

Bitte beachten Sie jedoch, dass der auf diese Weise geladene Code sofort ausgeführt wird. Daher müssen Sie die Rolle jeder Datei und die angemessene Ausführungsreihenfolge zu diesem Zeitpunkt klar verstehen und sicherstellen dass der Skript-Download abgeschlossen und bereit ist. Ja, Nicht-IE-Browser lösen ein Ladeereignis aus, wenn das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element empfangen wird, während IE ein readystatechange-Ereignis auslöst und es anhand des readyState-Attributs beurteilt. Die folgende Funktion ist mit dem dynamischen Laden eines JS-Skripts kompatibel: 

function load_script(url, callback) {  
    var script = document.createElement(&#39;script&#39;);  
    script.type = &#39;text/javascript&#39;;  
    if (script.readyState) {  //IE  
        script.onreadystatechange = function() {  
            if (script.readyState == &#39;loaded&#39; || script.readyState == &#39;complete&#39;) {  
                script.onreadystatechange = null;  
                callback();  
            }  
        }  
    } else {  //others  
        script.onload = function() {  
            callback();  
        }  
    }  
    script.src = url;  
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);  
}

Sie können diese Funktion in einer Datei „load_script.js“ speichern und diese Funktion dann verwenden, um andere Skripte zu laden, wenn mehrere Skripte ausgeführt werden sollen geladen werden Um die korrekte Ladereihenfolge sicherzustellen, kann die Ausführung von load_script() verkettet und schließlich wie zuvor erwähnt am Ende der Seite platziert werden. Dies ist eine perfekte Lösung: 

<script type="text/javascript" src="load_script.js"></script>  
<script type="text/javascript">
load_script(&#39;file1.js&#39;, function() {  
    load_script(&#39;file2.js&#39;, function() {  
        load_script(&#39;file3.js&#39;, function() {  
            //全部载入后的操作...  
        } );  
    } );  
} );  
</script>

3. XMLHttpRequest-Skriptinjektion

bedeutet Laden über AJAX. Diese Methode kann jedoch kein domänenübergreifendes Laden erreichen und ist nicht für große Websites geeignet.

Natürlich wurde die Arbeit, die wir oben geleistet haben, von diesen großartigen Leuten abgeschlossen und einige hervorragende JS-Bibliotheken wurden für uns geschrieben. Sie alle können das Blockierungsproblem von JS-Skripten lösen und Parallelität erreichen. Download, wie zum Beispiel: YUI3, LazyLoad, LABjs usw.

So beschleunigen Sie das Laden und Ausführen von JavaScript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So schreiben Sie standardisierten JavaScript-CodeNächster Artikel：So schreiben Sie standardisierten JavaScript-Code

In Verbindung stehende Artikel

Mehr sehen