Welche Probleme treten bei der Verwendung von MathJax in Angular auf?

Dieser Artikel führt Sie hauptsächlich in einige Probleme ein, die bei der Verwendung von MathJax in Angular auftreten. Der Artikel stellt es ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für alle, die es brauchen . Studieren und studieren.

Vorwort

Mit anderen Worten, ich tendierte ursprünglich zu KaTeX, weil ich das Gefühl hatte, dass es schnell war und MathJax schwer zu übertreffen schien. Allerdings äußerten alle ihre Unzufriedenheit mit den fehlenden Funktionen von KaTeX, was mich motivierte, mich mit MathJax zu befassen.

Einführung in MathJax

MathJax ist eine Open-Source-Rendering-Engine für mathematische Symbole, die im Browser ausgeführt wird und bequem im Browser verwendet werden kann Mathematische Formeln werden in dargestellt, ohne Bilder zu verwenden. Derzeit kann MathJax die Auszeichnungssprachen Latex, MathML und ASCIIMathML analysieren. Das MathJax-Projekt startete im Jahr 2009. Zu den Initiatoren gehören die American Mathematical Society, Design Science usw. sowie viele Unterstützer. Ich persönlich bin der Meinung, dass MathJax in Zukunft zum Mainstream der mathematischen Symbol-Rendering-Engines werden wird, vielleicht ist es das schon Fall.

Ich persönlich glaube nicht, dass ich mich damit beschäftigt habe, denn MathJax ist eigentlich sehr einfach. Sie können ein Element rendern, indem Sie MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); aufrufen (this.element.nativeElement ist die Syntax zum Aufrufen seines DOM). von Angular) und dies .Queue Tatsächlich ist es das von MathJax selbst implementierte Rückrufformat. Die Syntax ist sehr seltsam und die Anzahl der Parameter ist variabel. Jeder einzelne ist ein Array, das einen Rückruf darstellt und sequentiell ausgeführt wird. Zum Beispiel ist dies ['Typeset', MathJax.Hub, this.element.nativeElement], das erste Element ist der Methodenname, das zweite Element ist this und die folgenden Elemente sind Parameter ...

Wir Wie Sie sehen, ist das Erreichen dieses Punktes gleichbedeutend mit der Ausführung von MathJax.Hub.Typeset(this.element.nativeElement) . Warum also nicht dies ausführen? Da diese Methode synchron ist, bleibt die Seite stark hängen. Also kapselt MathJax eine asynchrone Warteschlange (ihre API hat sich möglicherweise seit Hunderten von Jahren nicht geändert)

Kehren wir zu Angular zurück. Da ich Markdown verwenden muss, besteht meine Idee darin, Markiert zum Kapseln einer Direktive zu verwenden. Dann sollten wir MathJax verwenden, um die Komponente zu setzen, nachdem das markierte Rendern abgeschlossen ist. Aber als ich das tatsächlich tat, erzeugte es einen wunderbaren Effekt – nach dem Seitenwechsel dauerte es fast eine Minute, bis mit dem Rendern begonnen wurde. Ich habe mehrere Protokolle in die Warteschlange gestellt und festgestellt, dass jedes Element viermal in die Warteschlange gestellt wurde, also Dutzende von Elementen. Kein Wunder, dass es eine Minute dauert, mit dem Rendern des Inhalts der nächsten Seite zu beginnen, obwohl die meisten Markdowns überhaupt keine Mathematik enthalten.

Zu diesem Zeitpunkt wurde ich langsam entmutigt. Gibt es keine Lösung für dieses Problem? Als ich verzweifelt war, habe ich darüber nachgedacht, ob ich das Dokument direkt setzen könnte. Das Ergebnis war, dass es möglich und sehr schnell war. Das Rendern ist also nicht langsam, möglicherweise ist der Initialisierungsprozess des Renderns langsam. Dann kommt zu diesem Zeitpunkt die Lösung. Wir können die Anzahl der Renderings minimieren und nur das Dokument rendern. Solange das Rendern noch läuft, werden wir sie, egal wie viele Elemente in die Warteschlange kommen, nur einmal als Warteschlange behandeln.

Also habe ich diesen Service geschrieben:

@Injectable()
export class MathjaxService {
 public isQueued = false;
 public isRunning = false;
 window: any;
 constructor(@Inject(PLATFORM_ID) private platformId: Object) {
 if (isPlatformBrowser(this.platformId)) {
 this.window = window as any;
 }
 }
 finishRunning() {
 this.isRunning = false;
 if (this.isQueued) {
 this.queueChange();
 }
 }
 queueChange() {
 if (this.isRunning) {
 this.isQueued = true;
 } else {
 this.isQueued = false;
 this.isRunning = true;
 if (isPlatformBrowser(this.platformId)) {
 if (this.window.MathJax) {
  this.window.MathJax.Hub.Config({
  messageStyle: 'none',
  tex2jax: {
  // preview: 'none',
  inlineMath: [['$', '$']],
  processEscapes: true
  }
  });
  this.window.MathJax.Hub.Queue(['log', console, 'start'], ['Typeset', this.window.MathJax.Hub, document], ['log', console, 'end'], ['finishRunning', this]);
 }
 } else {
 this.finishRunning();
 }
 }
 }
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So implementieren Sie den Wechsel des linken und rechten Karussells in jquery

So erhalten Sie Daten und weisen sie der Seite zu in jQuery

So implementieren Sie die 3D-Modellanzeige in three.js

Angular CLI-Installationsanleitung

In Vuejs Implementierung einer asynchronen Update-Warteschlange über nextTick()

So implementieren Sie Toast mit ReactNative

So extrahieren Sie allgemeine Module mit CommonsChunkPlugin

Das obige ist der detaillierte Inhalt vonWelche Probleme treten bei der Verwendung von MathJax in Angular auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!