Heim >Web-Frontend >js-Tutorial >Forschungsbericht über Javascript-Lade- und Ausführungsoptimierung_Javascript-Fähigkeiten
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:
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, </p>
<p>An diesem Punkt wird der Benutzer es wahrscheinlich für Sie deaktivieren. </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201412/201412160855464.png"></p>
<p>Wir können zwei Punkte aus dem Wasserfalldiagramm oben erkennen: </p>
<p>Erster Platz: </p>
<p>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, </p>
<p>Das ist ziemlich gut, aber es behindert immer noch das Herunterladen einiger anderer Ressourcen, wie zum Beispiel Bilder. </p>
<p>Zweitens: </p>
<p>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. </p>
<p><strong>Zweitens: Optimierung im ersten Schritt</strong></p>
<p>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</p>
<p>Die Notsituation verbessert natürlich die Freundlichkeit. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="86272" class="copybut" id="copybut86272" onclick="doCopy('code86272')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div>
<div class="codebody" id="code86272">
<br>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<p><!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>"><br>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br>
<head id="head"><br>
<title></title><br>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" /><br>
</head><br>
<body><br>
<img src="1.jpg" width="200" height="300" /><br>
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>