Heim  >  Artikel  >  Web-Frontend  >  Das Laden von js verwendet die DOM-Methode, um Javascript-Dateien dynamisch zu laden

Das Laden von js verwendet die DOM-Methode, um Javascript-Dateien dynamisch zu laden

高洛峰
高洛峰Original
2017-02-06 09:28:291272Durchsuche

Traditionell wird beim Laden von Javascript-Dateien das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag verwendet.
So:
559853b309d71af2b7cfa1cfce4f8bd02cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags sind sehr praktisch, solange as Fügen Sie eine Webseite hinzu und der Browser liest sie und führt sie aus. Allerdings weist es einige gravierende Mängel auf.
(1) Strenge Lesereihenfolge. Da der Browser Javascript-Dateien in der Reihenfolge liest, in der (2) Leistungsprobleme. Der Browser verwendet den „synchronen Modus“, um das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag zu laden, was bedeutet, dass die Seite „blockiert“ wird und auf das Laden der JavaScript-Datei wartet, bevor der nachfolgende HTML-Code ausgeführt wird. Wenn mehrere 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags vorhanden sind, kann der Browser diese nicht gleichzeitig lesen. Er muss eines lesen, bevor er das andere liest, was dazu führt, dass sich die Lesezeit erheblich verlängert und die Seitenreaktion langsam ist.
Um diese Probleme zu lösen, können Sie die DOM-Methode verwenden, um Javascript-Dateien dynamisch zu laden.

  function loadScript(url){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = url; 
    document.body.appendChild(script); 
  }

Das Prinzip dabei ist, dass der Browser sofort ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag erstellt und dann die Javascript-Datei „asynchron“ liest. Dies führt nicht zu einer Seitenblockierung, sondern zu einem weiteren Problem: Die auf diese Weise geladene Javascript-Datei befindet sich nicht in der ursprünglichen DOM-Struktur, sodass die im DOM-ready-Ereignis (DOMContentLoaded) und im window.onload-Ereignis angegebenen Rückruffunktionen ungültig sind dafür.

Weitere Artikel zum Laden von js zur Verwendung der DOM-Methode zum dynamischen Laden von Javascript-Dateien finden Sie auf der chinesischen PHP-Website!

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