WebWorkers – Hochleistungsrechnen für das Frontend

Bevor ich den vollständigen Text lese, möchte ich Ihnen kurz vorstellen, was WebWorker sind und welche Beziehung zwischen WebWorkern und Web-High-Performance-Computing besteht.

Was sind WebWorker?

Einfach ausgedrückt ist WebWorkers eine neue API von HTML5, mit der Webentwickler ein Skript im Hintergrund ausführen können, ohne die Benutzeroberfläche zu blockieren volle Nutzung der CPU-Mehrkerne.

Sie können diese Artikeleinführunghttps://www.html5rocks.com/en/tutorials/workers/basics/ oder die entsprechende chinesische Version lesen.

Die Web Workers-Spezifikation definiert eine API zum Spawnen von Hintergrundskripten in Ihrer Webanwendung. Mit Web Workers können Sie Dinge wie das Starten von Langzeitskripten tun Skripte zur Bewältigung rechenintensiver Aufgaben, ohne jedoch die Benutzeroberfläche oder andere Skripte zur Bewältigung von Benutzerinteraktionen zu blockieren.

Sie können diesen Link öffnen (https : //nerget.com/rayjs-mt/rayjs.html) Erleben Sie selbst den Beschleunigungseffekt von WebWorkers.

Jetzt unterstützen Browser grundsätzlich WebWorker.

Parallel.js

Es ist immer noch zu umständlich, die WebWorkers-Schnittstelle direkt zu verwenden: Parallel.js.

Beachten Sie, dass Parallel.js über den Knoten installiert werden kann

:

$ npm install paralleljs

Aber dies wird unter

node.js

verwendet, wobei das Clustermodul von node verwendet wird. Wenn Sie es im Browser verwenden möchten, müssen Sie js direkt anwenden:

<script src="parallel.js"></script>

und dann können Sie eine globale Variable, Parallel, erhalten. Parallel bietet zwei funktionale Programmierschnittstellen, Map und Reduce, die gleichzeitige Vorgänge sehr praktisch machen.

Da das Geschäft komplexer ist, vereinfache ich das Problem hier, indem ich die Summe von 1-1.000.0000 ermittle und dann Going davon subtrahiere Von 1-1.000.0000 liegt die Antwort auf der Hand: 0! Dies liegt daran, dass es bei einer zu großen Anzahl zu Problemen mit der Datengenauigkeit kommt und die Ergebnisse der beiden Methoden etwas unterschiedlich ausfallen, was dazu führt, dass die Leute das Gefühl haben, dass die parallele Methode unzuverlässig ist. Dieses Problem dauert etwa 1,5 Sekunden, wenn ich js einfach direkt unter meinem Mac Pro Chrome61 ausführe (unser eigentliches Geschäftsproblem dauert 15 Sekunden. Um zu vermeiden, dass der Browser während des Benutzertests beendet wird, haben wir das Problem vereinfacht).

const N = 100000000;// 总次数1亿
 
function sum(start, end) {
  let total = 0;
  for (let i = start; i<=end; i += 1) total += i;
  for (let i = start; i<=end; i += 1) total -= i;
  return total;
}
 
function paraSum(N) {
  const N1 = N / 10;//我们分成10分，没分分别交给一个web worker，parallel.js会根据电脑的CPU核数建立适量的workers
  let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .require(sum);
  return p.map(n => sum((n - 1) * 10000000 + 1, n * 10000000))// 在parallel.js里面没法直接应用外部变量N1
    .reduce(data => {
      const acc = data[0];
      const e = data[1];
      return acc + e;
    });
}

Der Code ist relativ einfach. Hier werde ich über einige Fallstricke sprechen, auf die ich gestoßen bin, als ich anfing, ihn zu verwenden.

alle erforderlichen Funktionen erforderlich

Wenn beispielsweise im Einspruchscode eine Summe verwendet wird, müssen Sie „Anfordern“ angeben (Summe im Voraus): Wenn eine andere Funktion f in sum verwendet wird, müssen Sie auch require(f) verwenden. Wenn g in f verwendet wird, müssen Sie ebenfalls require(g) verwenden, bis alle definierten Funktionen verwendet werden. . . .

Kann keine Variable erfordern

In unserem Einspruchscode habe ich ursprünglich N1 definiert, aber es hat nicht funktioniert

Probleme, nachdem ES6 in ES5 kompiliert wurde und Chrome keinen Fehler gemeldet hat

Im eigentlichen Projekt haben wir verwendet Die Funktionen von ES6 am Anfang: Array-Destrukturierung. Ursprünglich war dies eine sehr einfache Funktion, aber jetzt unterstützen die meisten Browser sie. Das von mir damals konfigurierte Babel wird jedoch in ES5 generiert, sodass der Code _slicedToArray generiert wird. Sie können es online mit Babel testen Funktioniert unter Chrome. Nach längerem Suchen habe ich es in Firefox geöffnet und die Fehlermeldung gefunden:

ReferenceError: _slicedToArray is not Defined

Es scheint, dass Chrome nicht allmächtig ist. . .

Sie können es auf dieser Demoseite testen. Die Geschwindigkeitssteigerung beträgt natürlich immer noch die Anzahl der Kerne der CPU Ihres Computers. Außerdem habe ich später Firefox 55.0.3 (64-Bit) auf demselben Computer getestet und der Einspruchscode dauerte tatsächlich nur 190 ms! ! ! Unter Safari9.1.1 beträgt sie ebenfalls etwa 190 ms. .

Ich werde Ihnen später auch andere Attribute und Indikatoren des Front-End-Hochleistungsrechnens vorstellen, also achten Sie bitte weiterhin darauf.

Das obige ist der detaillierte Inhalt vonWebWorkers – Hochleistungsrechnen für das Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!