Beispielcode-Analyse zur Verbesserung der Website-Frontend-Leistung in HTML5

1. Verwenden Sie Webspeicher, um Cookiess zu ersetzen.

Das größte Problem bei Cookies ist, dass sie jeder Anfrage folgen. In HTML5 werden sessionStorage und localStorage verwendet, um Benutzerdaten direkt auf dem Client zu speichern, wodurch die Datenmenge in HTTP-Anfragen reduziert werden kann. Darüber hinaus bietet Web Storage im Gegensatz zu Cookies, die Sie selbst schreiben müssen, auch APIs zur Bearbeitung von Daten.

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API :(
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2. Verwenden Sie CSS-Animationen anstelle von JavaScript-Animationen

Verwenden Sie CSS-Animationen anstelle von JS-Animationen. Weil einige Maschinen eine GPU-Beschleunigung für CSS-Animationen durchführen und auch JS-Dateianforderungen reduzieren können.

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }

3. Verwenden Sie eine Client-Datenbank

Die Verwendung einer Client-Datenbank wie Web SQLDatabase oder IndexedDB kann die Anzahl der HTTP-Anfragen reduzieren. Daten wie Regionslisten und Freundeslisten können direkt auf dem Client gespeichert werden. Manchmal können Sie auch sessionStorage und localStorage verwenden, da diese Art von Vergleichen im Allgemeinen schneller sind.

4. Nutzen Sie die neuen Funktionen von JS direkt.

JS hat beispielsweise viele neue Methoden wie Map, Filter, forEach usw. eingeführt. Darüber hinaus ist JSON auch direkt in den Browser eingebettet, sodass die Datei json2.js nicht eingeführt werden muss.

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll(&#39;section[data-bucket]&#39;), function(elem, i) {
   localStorage[&#39;bucket&#39; + i] = elem.getAttribute(&#39;data-bucket&#39;);
 });

5. HTML-Tags zwischenspeichern

HTML-Dateien auf dem Client zwischenspeichern. Diese zwischengespeicherten HTML-Dateien haben jedoch nur eine Struktur und keinen Inhalt. Der Inhalt muss über JS mit JSON-Objekten betrieben werden, um die Daten in die Seite zu füllen. Solche HTML-Dateien entsprechen Vorlagen.

6. Verwenden Sie die Hardwarebeschleunigung

Führende Browser haben jetzt die Hardwarebeschleunigung auf GPU-Ebene aktiviert, die durch bestimmte Anweisungen oder Hacks aktiviert werden kann. Wenn Sie beispielsweise 3D-Transformation oder Animation in CSS verwenden, können Sie die GPU-Hardwarebeschleunigung aktivieren.

   .hwaccel { -webkit-transform: translateZ(0); }

7. Verwenden Sie WebWorker, um CPU-intensive Vorgänge abzuschließen.

Für Vorgänge, die zeitaufwändige oder CPU-intensive Vorgänge erfordern, verwenden Sie WebWorker. Dies ist nicht nur schnell, sondern funktioniert auch im Hintergrund, hat keinen Einfluss auf die normale Browserinteraktion.

8. Nutzen Sie die neuen Funktionen des Formulars

HTML-Formular hat viele neue Attribute, Elemente und Validierungsfunktionen hinzugefügt, die den Einsatz von JS und CSS reduzieren können.

9. Verwenden Sie CSS3, um CSS-Sprites zu ersetzen.

Mit CSS3 können möglicherweise etwa 100 Bytes CSS 2K-Bild-Sprites ersetzen groß. reduziert.

Zu den am häufigsten verwendeten Spezialeffekten von CSS3 gehören: abgerundete Ecken, Farbverläufe, Schatten, Transparenz, Verformung, Masken usw.

10. Verwenden Sie WebSocket als Ersatz für XHR.

WebSocket wurde ursprünglich entwickelt, um Ajax-Polling zu ersetzen . Einigen Berichten zufolge benötigt WebSocket etwa 30 % weniger Übertragungsvolumen als Ajax und ist etwa 35-mal schneller. Als Ericsson die Leistung von WebSocket testete, wurde festgestellt, dass die Verwendung des Ping-Befehls drei bis fünf Mal mehr verbraucht als WebSocket, sodass er sich sehr gut für Echtzeitanwendungen eignet.

Das obige ist der detaillierte Inhalt vonBeispielcode-Analyse zur Verbesserung der Website-Frontend-Leistung in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!