Heim > Artikel > Web-Frontend > Forschungsbericht über Javascript-Lade- und Ausführungsoptimierung_Javascript-Fähigkeiten

Forschungsbericht über Javascript-Lade- und Ausführungsoptimierung_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:26:451530Durchsuche

Ich beschäftige mich seit mehr als einem Jahr mit der Frontend-Entwicklung und habe immer noch einige Einblicke in das Frontend. Heute werde ich es mit Ihnen teilen.

Für die Frontend-Entwicklung sind verschiedene Tools erforderlich. Ich bin zum Beispiel immer noch daran gewöhnt, den Google-Browser und den schweren Waffen-Fiddler zu verwenden.

1: Ursprüngliche Situation

Schauen Sie sich zunächst den folgenden Code an:

Code kopieren Der Code lautet wie folgt:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Es wird geschätzt, dass 90 % der Programmierer JS-Dateien im Kopf ablegen, aber haben Sie sich jemals damit befasst? Viele Browser verwenden einen einzelnen Thread, um „UI-Update“ und „JS-Skriptverarbeitung“ durchzuführen,

Das heißt, wenn die Ausführungs-Engine auf „<script>“ trifft, muss das Herunterladen und Rendern der Seite warten, bis die Ausführung von <script> abgeschlossen ist. Dann ist es für den Benutzer traurig, die gesperrte Seite anzusehen, An diesem Punkt wird der Benutzer es wahrscheinlich für Sie deaktivieren. <img alt="" src="http://files.jb51.net/file_images/article/201412/201412160855464.png"> Wir können zwei Punkte aus dem Wasserfalldiagramm oben erkennen: Erster Platz: Drei js-Dateien werden parallel heruntergeladen, aber meiner obigen Theorie zufolge sollten die js-Dateien nacheinander ausgeführt werden. In IE8, Firefox3.5 und Chrome2 ist jedoch das parallele Herunterladen von js implementiert, Das ist ziemlich gut, aber es behindert immer noch das Herunterladen einiger anderer Ressourcen, wie zum Beispiel Bilder. Zweitens: Der Download von Bild 1.jpg wird ausgelöst, nachdem die js-Ausführung abgeschlossen ist, wodurch auch die obige Situation überprüft und das Laden des Bildes verhindert wird. Zweitens: Optimierung im ersten Schritt Da js das Rendern der Benutzeroberfläche verhindert, können wir erwägen, js vor </body> zu platzieren, damit der HTML-Code vor <script> perfekt gerendert werden kann und der Benutzer nicht sieht, dass die Seite leer wartet Die Notsituation verbessert natürlich die Freundlichkeit. <div class="codetitle"> <a style="CURSOR: pointer" data="86272" class="copybut" id="copybut86272" onclick="doCopy('code86272')">Code kopieren</a> Der Code lautet wie folgt:</div> <div class="codebody" id="code86272"> <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head id="head"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="1.jpg" width="200" height="300" /> <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

Das Bild unten zeigt auch, dass 1.jpg und drei js nahezu parallel heruntergeladen und ausgeführt werden. Die Zeit wird von „469 ms“ oben auf „326 ms“ reduziert.

Dritten: Der zweite Schritt der Optimierung

Wenn Sie sich das „Wasserfalldiagramm“ oben ansehen, ist Ihnen vielleicht aufgefallen, dass drei JS-Dateien drei „Get“-Anfragen gestellt haben. Jeder weiß, dass Get-Anfragen HTTP-Header enthalten müssen,

Da es Zeit braucht, ist die Lösung, die wir wählen, natürlich die Reduzierung der Get-Anfragen. Normalerweise gibt es zwei Möglichkeiten.

Erstens: Führen Sie js-Dateien zusammen, z. B. „hello.js“ und „world.js“ oben.

Zweitens: Verwenden Sie Tools von Drittanbietern, wie z. B. Minify in PHP.

Was die zweite Methode betrifft, wird Taobao immer noch häufiger verwendet. Schauen Sie sich eines der Skripte an, das drei JS-Dateien verwendet. Von 3 Get-Anfragen auf 1.

Viertens: Der dritte Schritt der Optimierung

Ob Sie die JS-Dateien am Ende einfügen oder drei zu einer zusammenführen, das Wesentliche ist der „Blockierungsmodus“, der das Sperren des Browsers bedeutet. Wenn die Webseite immer komplexer wird und es immer mehr JS-Dateien gibt, Oder

Was uns Kopfschmerzen bereitet, ist, dass wir derzeit einen „nicht blockierenden Modus“ zum Laden von JS-Skripten befürworten, d. wir

Js anhängen, das nennt man „nicht blockierend“, aber wir müssen darauf achten, ob unsere Anforderungen an js in strikter Reihenfolge sind.

Erstens: Keine Bestellanforderung. Ich habe beispielsweise keine Bestellanforderung für „hello.js“ und „world.js“, dann können wir jquery verwenden, um die Implementierung dynamisch anzuhängen.

Code kopieren Der Code lautet wie folgt:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

")
$("#head").append("");
}

Wie auf dem Bild zu sehen ist, erscheinen „hello.js“ und „world.js“ nach der blauen Linie, was bedeutet, dass das Laden dieser beiden js nach dem Ende von DomContentLoad ausgelöst wird, sodass dies nicht der Fall ist Verursacht eine Seitensperre

Warte.

Zweitens: Es gibt Bestellvoraussetzungen

Warum muss es ein Ordnungsvoraussetzungskonzept geben? In Bezug auf die oben dynamisch angehängten „zwei js“-Dateien in der IE-Serie können Sie nicht garantieren, dass hello.js vor world.js ausgeführt wird,

Er führt den Code nur in der vom Server zurückgegebenen Reihenfolge aus.

Code kopieren Der Code lautet wie folgt:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

大家也能看到,页面完全Load的时间其实也就310ms左右,大大提高了网页的下载呈现和友好型。

同样也可以看看腾讯网,他也是这么干的.

是不是非常的有用呢,本人这里也是花了些时日来做这些研究测试,希望小伙伴们能看到心里去,毕竟这也是„麻花藤“公司的解决方案, 大家参考下吧

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：Teilen Sie weitere 70 kostenlose JQuery-Bild-Slider-Effekt-Plug-Ins und Tutorials_jqueryNächster Artikel：Teilen Sie weitere 70 kostenlose JQuery-Bild-Slider-Effekt-Plug-Ins und Tutorials_jquery

In Verbindung stehende Artikel

Mehr sehen