Ausführliche Erläuterung von Anwendungsbeispielen klassischer und nicht blockierender <script>-Tags-js-Tutorial-php.cn

Das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag ist in modernen Browsern in zwei neue Typen unterteilt: klassisch und nicht blockierend. Lassen Sie uns besprechen, wie Sie diese beiden Tags verwenden, um Seiten so schnell wie möglich zu laden.

1. Wohin werden Blockierungsskripte verschoben?

Die Standardversion des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags wird oft als Blockierungs-Tag bezeichnet. Dieser Begriff muss im Kontext verstanden werden: Wenn moderne Browser ein blockierendes 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag sehen, überspringen sie den blockierenden Punkt und fahren mit dem Lesen des Dokuments und dem Herunterladen anderer Ressourcen (Skripte und Stylesheets) fort. Der Browser wertet diese Ressourcen jedoch erst dann aus, wenn das Skript heruntergeladen und ausgeführt wird. Wenn ein Webdokument daher fünf blockierende 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags enthält, wird dem Benutzer nichts außer dem Seitentitel angezeigt, bis alle fünf Skripte heruntergeladen und ausgeführt wurden. Darüber hinaus können diese Skripte, selbst wenn sie ausgeführt werden, nur den Teil des Dokuments vor dem Blockierungspunkt sehen. Wenn Sie alle Extras sehen möchten, die darauf warten, im 6c04bd5ca3fcae76e30b72ad730ca86d-Tag geladen zu werden, müssen Sie einen Event-Handler an ein Event wie document.onreadystatechange binden.

Aus den oben genannten Gründen wird es immer beliebter, Skripte am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags zu platzieren. Auf diese Weise können Benutzer einerseits die Seite schneller sehen, andererseits können Skripte auch aktiv auf das DOM zugreifen, ohne darauf warten zu müssen, dass Ereignisse von selbst ausgelöst werden. Für die meisten Skripte ist dieser „Umzug“ eine enorme Verbesserung.

Aber nicht alle Skripte sind gleich. Stellen Sie sich zwei Fragen, bevor Sie mit dem Skript fortfahren.

Ist es möglich, dass dieses Skript direkt vom Inline-JavaScript im 6c04bd5ca3fcae76e30b72ad730ca86d aufgerufen wird? Die Antwort mag offensichtlich sein, aber es lohnt sich trotzdem, sie zu überprüfen.

Wird dieses Skript das Erscheinungsbild der gerenderten Seite beeinflussen? Ein Beispiel sind Typekit-Host-Schriftarten. Wenn Sie das Typekit-Skript am Ende des Dokuments platzieren, wird der Seitentext zweimal gerendert, sofort beim Lesen des Dokuments und noch einmal beim Ausführen des Skripts.

Solange eine der Antworten auf die oben genannten Fragen „Ja“ lautet, sollte das Skript im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag platziert werden, andernfalls kann es im 6c04bd5ca3fcae76e30b72ad730ca86d-Tag platziert werden lautet:

Dies verbessert zwar die Ladezeiten erheblich, aber beachten Sie, dass dies dem Benutzer möglicherweise die Möglichkeit gibt, mit der Seite zu interagieren, bevor bodyScripts.js geladen wird.

2. Frühes Laden und verzögerte Ausführung von Skripten

Es wird empfohlen, die meisten Skripte in 6c04bd5ca3fcae76e30b72ad730ca86d zu platzieren, da Benutzer dadurch die Webseite schneller sehen und den Overhead vermeiden können das „ready“-Ereignis zu binden, bevor das DOM manipuliert wird. Allerdings hat dieser Ansatz auch den Nachteil, dass der Browser diese Skripte erst laden kann, wenn das gesamte Dokument geladen ist, was bei großen Dokumenten, die über langsame Verbindungen gesendet werden, einen Engpass darstellen kann.

Idealerweise sollte das Skript gleichzeitig mit dem Laden des Dokuments geladen werden und hat keinen Einfluss auf die Darstellung des DOM. Auf diese Weise können Sie das Skript ausführen, sobald das Dokument fertig ist, da die Skripte bereits in der Reihenfolge der 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags geladen wurden.

Wenn Sie bis hierher gelesen haben, müssen Sie sicher daran interessiert sein, einen benutzerdefinierten Ajax-Skriptlader zu schreiben, der diese Anforderungen erfüllt! Die meisten Browser unterstützen jedoch eine einfachere Lösung.

Das Hinzufügen des Defer-Attributs ist gleichbedeutend damit, dem Browser zu sagen: „Bitte beginnen Sie jetzt mit dem Laden dieses Skripts, aber warten Sie bitte, bis das Dokument fertig ist und alle vorherigen Skripte mit dem Defer-Attribut vollständig ausgeführt wurden. Ausführen.“ „Das Einfügen eines verzögerten Skripts in das 93f0f5c25f18dab9d176bd4f6de5d30e-Tag des Dokuments bietet alle Vorteile der Platzierung des Skripts im 6c04bd5ca3fcae76e30b72ad730ca86d-Tag, verbessert aber auch die Ladegeschwindigkeit großer Dokumente erheblich!“

Der Nachteil ist, dass nicht alle Browser das Defer-Attribut unterstützen. Das heißt, wenn Sie sicherstellen möchten, dass Ihr verzögertes Skript nach dem Laden des Dokuments ausgeführt werden kann, müssen Sie den gesamten Code des verzögerten Skripts in einer Struktur wie $(document).ready von jQuery kapseln.

Das Seitenbeispiel im vorherigen Abschnitt wurde wie folgt verbessert:

Bitte denken Sie daran, dass die Kapselung von deferredScripts wichtig ist, sodass deferredScripts dies auch dann tun, wenn der Browser Defer nicht unterstützt nach dem Dokument-Ready-Ereignis ausgeführt werden. Wenn der Hauptinhalt der Seite viel größer als ein paar Kilobyte ist, ist es den Preis absolut wert.

3. Paralleles Laden von Skripten

Wenn Sie ein Perfektionist sind, der Wert auf die Ladezeit von Seiten im Millisekundenbereich legt, dann ist das Aufschieben möglicherweise wie geschmacklose Sojasauce. Sie möchten nicht warten, bis alle vorherigen Verzögerungsskripte ausgeführt wurden, und Sie möchten auf keinen Fall warten, bis das Dokument fertig ist, bevor Sie diese Skripte ausführen. Sie möchten diese Skripte einfach so schnell wie möglich laden und ausführen. Aus diesem Grund stellen moderne Browser das Attribut async zur Verfügung.

如果说defer 让我们想到一种静静等待文档加载的有序排队场景，那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行，而且只要JavaScript 引擎可用就会立即运行，而不论文档就绪与否。 对大多数脚本来说，async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时，由于异步脚本会在任意时刻运行，它实在太容易引起海森堡蚁虫之灾了（脚本刚好结束加载时就会蚁虫四起）。 当我们加载一些第三方脚本，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async 属性，相当于一分钱没花就提升了它们的运行速度。 上一个页面示例再添加两个独立的第三方小部件，得到的结果如下：

这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器，DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着，在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当，请勿使用async！