Verwendung der Konsole für Leistungstests_Javascript-Kenntnisse

Für Front-End-Entwickler ist es oft zu umständlich, die Werte bestimmter Ausdrücke oder Variablen während des Entwicklungsprozesses zu überwachen für einfaches Debuggen.

Die am häufigsten verwendete Anweisung ist console.log(expression).

Beginnen Sie mit den vorherigen schriftlichen Prüfungsfragen für die Einstellung von Alibaba-Praktikanten:

function f1() {
  console.time('time span');
}
function f2() {
  console.timeEnd('time span');
}
setTimeout(f1, 100);
setTimeout(f2, 200);

function waitForMs(n) {
  var now = Date.now();
    while (Date.now() - now < n) {
  }
}
waitForMs(500);//time span: 0ms

Lassen Sie uns zunächst über die erweiterten Funktionen der Konsole sprechen und diese Frage abschließend gemeinsam analysieren.

Spur

console.trace() wird verwendet, um den Funktionsaufrufprozess zu verfolgen.

In großen Projekten, insbesondere bei der Framework-Entwicklung, kann die Aufrufverfolgung der Funktion sehr kompliziert sein. Die Methode console.trace() kann den Aufrufprozess der Funktion eindeutig an die Konsole ausgeben.

function tracer(a) {
   console.trace();
   return a;
}

function foo(a) {
   return bar(a);
}

function bar(a) {
   return tracer(a);
}

var a = foo('tracer');

Tabelle

Verwenden Sie die Konsole, um Objekte in Tabellen darzustellen

Das eingehende Objekt oder Array kann in Tabellenform ausgegeben werden. Dieses Ausgabeschema eignet sich besser für Objekte oder Arrays mit ordentlich angeordneten internen Elementen, da sonst viele undefinierte Elemente auftreten können.

    var people = {
    flora: {
      name: 'floraLam',
      age: '12'
    },
    john: {
      name: 'johnMa',
      age: '45'
    },
    ray:{
      name:'rayGuo',
      age:'22'
    }
  };

  console.table(people);

Firefox-Konsole:

Zeit ZeitEnde

Berechnen Sie die Ausführungszeit des Programms

Sie können die Laufzeit des Codes zwischen Paaren von console.time() und console.timeEnd() an die Konsole ausgeben

console.time('计时器');
for (var i = 0; i < 1000; i++) {
   for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');

Der obige Code berechnet die vom Codeblock benötigten Ereignisse zwischen console.time('timer'); und console.timeEnd('timer');.

Profil

Verwenden Sie die Konsole, um die Programmleistung zu testen

Während der Entwicklung müssen wir häufig die Leistung eines Codeabschnitts oder einer bestimmten Funktion bewerten. Es ist zwar möglich, die Uhrzeit in der Funktion manuell auszudrucken, dies ist jedoch nicht flexibel genug und weist Fehler auf. Mit Hilfe der Konsole und der Methode console.profile() können wir die Laufleistung einfach überwachen.

function parent() {
   for (var i = 0; i < 10000; i++) {
      childA()
   }
}
function childA(j) {
   for (var i = 0; i < j; i++) {}
}
console.profile('性能分析');
parent();
console.profileEnd();

Der obige Code berechnet die Laufeffizienz der am Codeblock beteiligten Funktionen zwischen console.profile('Performance Analysis'); und console.profileEnd();.

Lass uns nun über die schriftlichen Testfragen sprechen

Die Frage testet das Verständnis des Kandidaten für console.time und js Single-Threading.

Die Anweisung console.time() und die Anweisung console.timeEnd() werden verwendet, um die Ausführung des Programms zeitlich festzulegen.

setTimeout() akzeptiert zwei Parameter, der erste ist die Rückruffunktion und der zweite ist die Anzahl der Millisekunden, um die die Ausführung verzögert wird. setTimeout() fügt das Ereignis lediglich in die „Aufgabenwarteschlange“ ein. Der Hauptthread muss warten, bis die Ausführung des aktuellen Codes (Ausführungsstapels) abgeschlossen ist, bevor der Hauptthread die von ihm angegebene Rückruffunktion ausführt.

Weil f1 und f2 durch im Voraus von setTimeout festgelegte Timer in eine Ereigniswarteschlange geladen werden. Ursprünglich sollte f1 nach 100 ms ausgeführt werden, aber da waitForMs einen Thread belegt und die Ausführung von JavaScript Single-Threaded ist, gibt es keine Möglichkeit, f1 nach 100 ms auszuführen. Sie müssen also 500 ms warten, bis die Ausführung von waitForMs abgeschlossen ist, und dann f1 und ausführen f2. Zu diesem Zeitpunkt werden f1 und f2 fast gleichzeitig ausgeführt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.