Eine Einführung in einige Details, die in HTML5 optimiert werden können

Dieser Artikel bietet Ihnen eine Einführung in einige Details, die in HTML5 optimiert werden können. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Wir stellen einige kürzlich organisierte Optimierungsdetails vor. Ich werde nicht über die Bildkomprimierung sprechen, das ist es, was die Optimierung bewirken muss. Heute werde ich über die Details der Optimierung sprechen, die jeder beim Schreiben von Code pflegen kann.

• Missbrauchen Sie Float nicht. Missbrauchen Sie Webfonts nicht.

Float erfordert beim Rendern einen großen Rechenaufwand, weicht vom Standard ab und kollabiert. Wir können stattdessen das Flex-Layout verwenden. Die Einführung von Webfonts ist mit einem hohen Aufwand verbunden, daher ist es am besten, dies dem Designer gegenüber zu erwähnen und nicht zu viel.

• Vermeiden Sie redundante Stileinstellungen in CSS.

Farbe, Schriftart, Zeilenhöhe usw. können alle vererbt werden, sodass ihre untergeordneten Elemente wiederholt geschrieben werden müssen, wenn sie dieselben Attribute haben, insbesondere die Schriftfamilie.

• Eine komplexe Methode, die den Rückgabewert einer Funktion zwischenspeichern kann.

function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
};
var fk = function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
var cacheFk = cached(fk)
// 1 step
cacheFk('ui') 
//2 step
cacheFk('ui')

Dies ist ein Codestück, das ich gefunden habe, als ich mir den Vue-Quellcode angesehen habe. Seine Funktion besteht darin, den Wert einer komplexen Funktion zwischenzuspeichern und wiederholte Berechnungen zu vermeiden, wenn die Parameter vorhanden sind das gleiche. Hier ist jedoch zu beachten, dass diese Caching-Funktion durch Schließungen erfolgt, sodass einige Kompromisse erforderlich sind.

• Layout so weit wie möglich reduzieren.

// 触发两次 layout
var newWidth = p.offsetWidth + 50;
p.style.width = newWidth + 'px';
var newHeight = p.offsetHeight + 50;
p.style.height = newHeight + 'px';

// 只触发一次 layout
var newWidth = p.offsetWidth + 50;
var newHeight = p.offsetHeight + 50;
p.style.width = newWidth + 'px';
p.style.height = newHeight + 'px';

Alle Vorgänge, die ein Layout auslösen können, werden vorübergehend in die Layout-Warteschlange gestellt. Wenn diese aktualisiert werden muss, werden die Ergebnisse aller Vorgänge in der gesamten Warteschlange berechnet Führen Sie ein Layout nur aus, um die Leistung zu verbessern.

Animationselemente sind am besten Off-Label und wirken sich nicht auf andere Module aus. Dies geschieht auch, um andere Elemente nicht zu beeinträchtigen.

• Transformation ersetzt Position.

Um einige CSS-Verschiebungseffekte zu erzielen, ist es am besten, Transformation anstelle von Positionierung zu verwenden. Als ich anfing, habe ich Position verwendet, um Animationskarten zu erstellen ~~~

• Wählen Sie das Dom-Element aus und verwenden Sie die ID, aber definieren Sie die ID nicht zum Festlegen des CSS.

Wenn Sie den ID-Selektor verwenden, fügen Sie keine anderen Klasseneinschränkungen hinzu. Die Definition zu vieler IDs verringert die Wiederverwendbarkeit und erschwert die Wartung. Daher wird die Verwendung mehrerer IDs in CSS nicht empfohlen.

• Wenn Sie die Länge mehrmals verwenden, verwenden Sie eine Variable, um sie zu speichern.

var len = dom.length;
for(var i = 0;i < len;i++){}；

Der Vorteil davon ist, dass Sie nicht bei jedem Loop die Länge des Doms berechnen müssen.

• requestAnimationFrame ersetzt setTimeout

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
//window.requestAnimationFrame(callback);
返回值是一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestAnimationFrame ist ein Timer, der die Zeit nicht einstellen muss. Er läuft also alle 1/60 Sekunden basierend auf der Browseraktualisierung Hängt von der Anzahl der Frames ab. Aber die Kompatibilität ist ein Problem. Wenn Sie es verwenden, müssen Sie es gut schreiben.

• Vermeiden Sie nach Möglichkeit globale Suchen.

//dom = document.querySelector("#id");
function test() {
    dom = document.querySelector("#id");
}

Wenn Sie beispielsweise nur dom im Test verwenden, definieren Sie es nicht global, da es während der Ausführung im internen Bereich der Testfunktion durchsucht wird Schneller.

• Verwenden Sie for in nicht, es sei denn, Sie kennen die Länge der Durchquerung oder die resultierende Ausführungszeit des Durchquerungsobjekts (siehe Code). Daher ist es am besten, es nicht zu verwenden. Das Durchqueren von Objekten wird in der Praxis im Allgemeinen nicht verwendet. Sollten beim Überqueren von Objekten besondere Umstände vorliegen, ist ebenfalls darauf zu achten! ! ! Die durchquerten Dinge sind nicht sie selbst. Ich dachte, dass for in seine Prototypenkette durchlaufen würde.

Skelettbildschirm

• Dies dient der Verbesserung des Benutzererlebnisses, ähnlich wie bei der erweiterten Version des Ladens. Es gibt automatisierte Generierungslösungen. Bei Interesse könnt ihr gerne mal vorbeischauen.

ios verbietet der Seite die Identifizierung von Mobiltelefonnummern. Android verbietet die Erkennung von E-Mail-Adressen.

•     function t1(){        //20ms
          var i = 0;
         for(item in anObj) {
             i++
         }
         if( i === 100000){
             console.log('for in ok')
         }
      }
      function t2(){     //4ms
          var len = anObj.length;
          var i = 0;
          for(var i = 0 ;i < len;i++){
              i++
          }
          if( i === 100000){
              console.log('for ok')
          }
      }

Kopf CSS unten Js.

• Jeder weiß, dass js das Parsen von Dom blockiert und die Zeit für den weißen Bildschirm erhöht. Seien Sie also unbedingt aufmerksam.

Tatsächlich gibt es viele Optimierungsdetails. Sie müssen also Ihre Codierungsgewohnheiten pflegen, ein wenig ansammeln und sich langsam ansammeln. Die Qualität des Codes wird definitiv anders sein.

Das obige ist der detaillierte Inhalt vonEine Einführung in einige Details, die in HTML5 optimiert werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!