Analyse des Ladens von Javascript-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die Analyse des Javascript-Ladens vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

1 🎜>

(1) Synchrones Laden Auf einer Webseite lädt der Browser js-Dateien über das Wie unten gezeigt:

//内嵌脚本 // code here! //加载外部脚本 Nach dem Login kopieren ist sehr praktisch. Solange es hinzugefügt wird, kann der Browser es lesen und ausführen ;-Tag: Javascript-Dateien werden nacheinander gelesen und dann sofort ausgeführt. Wenn mehrere Dateien voneinander abhängig sind, muss die Datei mit der geringsten Abhängigkeit an erster Stelle und die Datei mit der größten Abhängigkeit platziert werden Andernfalls wird der Code einen Fehler melden. Ich glaube, dass jeder ein tiefes Verständnis dafür hat, wenn er Bootstrap verwendet. Andererseits laden Browser das -Tag im synchronen Modus, was bedeutet, dass die Seite auf das Laden der JavaScript-Datei wartet, bevor sie den nachfolgenden Code ausführt. Wenn es viele -Tags gibt, kann der Browser diese nicht gleichzeitig lesen. Er muss erst das eine und dann das andere lesen, was dazu führt, dass sich die Lesezeit erheblich verlängert und die Seitenreaktion langsam ist betroffen. Der synchrone Modus, auch Blockierungsmodus genannt, verhindert die nachfolgende Verarbeitung durch den Browser und stoppt die nachfolgende Analyse. Erst wenn der aktuelle Ladevorgang abgeschlossen ist, kann der nächste Schritt ausgeführt werden, sodass die synchrone Ausführung standardmäßig sicher ist. Wenn es jedoch Verhaltensweisen wie das Ausgeben von Dokumentinhalten, das Ändern von DOM, Umleitungen usw. in js gibt, führt dies zu einer Blockierung. Daher wird generell empfohlen, das -Tag am Ende von zu platzieren, um das Blockieren von Seiten zu reduzieren.

(2) Asynchrones Laden Um dieses Problem zu lösen, verwendet ES5 die DOM-Methode,

lädt JavaScript-Skriptdateien dynamisch . function loadScript(url) { var script = document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); } Nach dem Login kopieren Diese Methode liest die Javascript-Datei asynchron, indem sie ein neues -Tag erstellt und dessen src-Attribut festlegt.

Dies führt nicht zu einer Seitenblockierung, aber es wird ein anderes Problem auftreten. Wenn andere Skriptdateien davon abhängen, gibt es keine Garantie, wann dieses Skript geladen wird.

Eine weitere Lademethode besteht darin, die Attribute

defer und async zu verwenden, um das Skript asynchron zu laden. Wenn die Rendering-Engine auf diese Befehlszeile stößt, beginnt sie mit dem Herunterladen des externen Skripts, wartet jedoch nicht darauf, dass es heruntergeladen und ausgeführt wird, sondern führt die folgenden Befehle direkt aus. Der Unterschied zwischen „defer“ und „async“ besteht darin, dass „defer“ erst dann ausgeführt wird, wenn die gesamte Seite normal im Speicher gerendert wurde (die DOM-Struktur ist vollständig generiert und andere Skripte werden asynchron ausgeführt, sobald der Download abgeschlossen ist). Führen Sie dieses Skript aus. Fahren Sie später mit dem Rendern fort. Das heißt, Defer wird nach dem Rendern ausgeführt und Async wird nach dem Herunterladen ausgeführt. Wenn mehrere Verzögerungsskripte vorhanden sind, werden diese außerdem in der Reihenfolge geladen, in der sie auf der Seite erscheinen, während mehrere asynchrone Skripte die Ladereihenfolge nicht garantieren können. IE9 und niedriger weisen einige ziemlich schlimme Fehler in der Verzögerungsimplementierung auf, die zu einer nicht garantierten Ausführungsreihenfolge führen. Wenn Sie <= IE9 unterstützen müssen, empfehle ich, die Verzögerung nicht zu verwenden. Wenn die Ausführungsreihenfolge wichtig ist, schließen Sie das Skript ohne Attribute ein.

Nach dem Login kopieren So wählen Sie „Aufschieben“ und „Asynchron“ aus. Wenn das verwendete Skript ein Modul ist und nicht von anderen Skriptdateien abhängt, verwenden Sie async; wenn das Skript von anderen Skripten abhängt oder von anderen Skripten abhängig ist, verwenden Sie defer, wenn die Skriptdatei klein ist und von einem asynchronen Skript abhängig ist Wenn Sie ein internes Einbettungsskript verwenden, wird diese Datei vor allen asynchronen Skripten platziert.

Eine andere Methode ist das asynchrone Laden des

onload-Ereignisses. (function(){ if(window.attachEvent) { window.attachEvent("load", asyncLoad); } else if(window.addEventListener) { window.addEventListener("load", asyncLoad); } else { window.onload = asyncLoad; } var asyncLoad = function() { var script = document.createElement("script"); script.type="text/javascript"; script.async = true; script.src = ('https:'==document.location.protocol ? 'https://ssl' : 'http:www') + '.baidu.com/demo.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); }; )(); Nach dem Login kopieren Bei dieser Methode wird die Skripteinfügemethode in eine Funktion eingefügt und dann in der Onload-Methode des Fensters ausgeführt. Dadurch wird das Problem der Blockierung der Auslösung des Onload-Ereignisses gelöst.

Aufgrund der dynamischen Natur von Javascript gibt es viele asynchrone Lademethoden: ") usw.;

XHR-Injection: Rufen Sie Javascript über XMLHttpRequest ab und erstellen Sie dann ein Skriptelement zum Einfügen in die DOM-Struktur. Nachdem die Ajax-Anfrage erfolgreich war, setzen Sie script.text auf den Antworttext, der nach erfolgreicher Anfrage zurückgegeben wird.

2. Lazy Loading

有些JS代码在某些情况下需要使用，并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块，页面初始化时只将事件处理程序添加到UI元素上，然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面，尽可能快地为用户提供目前需要的信息，其余部分的内容可以在用户浏览该页面时在后台载入。

JavaScript的加载分为两个部分：下载和执行脚本，异步加载只解决了下载的问题，但是代码在下载完成后就可能会立即执行，在执行过程中浏览器储与阻塞状态，响应不了任何需求。为了解决JavaScript延迟加载的问题，可以利用异步加载缓存起来，所以不会立即执行，然后在第一次需要的时候再执行。

第二部分内容的载入可以用创建动态脚本的形式：

window.onload = function() { var script = document.createElement("script"); script.type="text/javascript"; script.src="demo.js"; document.documentElement.firstChild.appendChild("script"); } Nach dem Login kopieren 3. 按需加载

可以通过创建一个require方法，包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。

function require(file, callback) { var script = document.getElementsByTagName("script")[0]; var newjs = document.createElement("script");

newjs.onload= function() { callback(); }; newjs.src=file; script.parentNode.insertBefore(newjs, script); } Nach dem Login kopieren 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！