Quels problèmes rencontrez-vous lors de l’utilisation de MathJax dans Angular ?

Cet article vous présente principalement certains problèmes rencontrés lors de l'utilisation de MathJax dans Angular. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin peuvent venir nous rejoindre. .Étudier et étudier.

Avant-propos

En d'autres termes, je penchais à l'origine vers KaTeX parce que je trouvais que c'était rapide et que MathJax semblait difficile à égaler. Cependant, tout le monde a exprimé son dégoût face au manque de fonctions de KaTeX, ce qui m'a donné une certaine motivation pour me plonger dans MathJax.

Introduction à MathJax

MathJax est un moteur de rendu de symboles mathématiques open source qui s'exécute dans le navigateur. MathJax peut être utilisé facilement dans le navigateur. Les formules mathématiques sont affichées au format , sans utiliser d'images. Actuellement, MathJax peut analyser les langages de balisage Latex, MathML et ASCIIMathML. Le projet MathJax a débuté en 2009. Parmi les initiateurs figurent l'American Mathematical Society, Design Science, etc., ainsi que de nombreux partisans. Je pense personnellement que MathJax deviendra le courant dominant des moteurs de rendu de symboles mathématiques à l'avenir, et c'est peut-être déjà le cas. le cas.

Personnellement, je ne pense pas y avoir approfondi, car MathJax est en fait très simple. Vous pouvez restituer un élément en appelant MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); (this.element.nativeElement est la syntaxe pour appeler son DOM. de Angular), et ce .Queue En fait, c'est le format de rappel implémenté par MathJax lui-même. La syntaxe est très étrange et le nombre de paramètres est variable. Chacun est un tableau, représentant un rappel et exécuté séquentiellement. Par exemple, this ['Typeset', MathJax.Hub, this.element.nativeElement], le premier élément est le nom de la méthode, le deuxième élément est this et les éléments suivants sont des paramètres...

Nous peut voir Arriver à ce point équivaut à exécuter MathJax.Hub.Typeset(this.element.nativeElement) , alors pourquoi ne pas exécuter ceci ? Étant donné que cette méthode est synchrone, la page sera très bloquée. MathJax encapsule donc une file d'attente asynchrone (son API n'a peut-être pas changé depuis des centaines d'années)

Revenons à Angular. Parce que j'ai besoin d'utiliser Markdown, mon idée est d'utiliser Marked pour encapsuler une directive. Ensuite, nous devrions utiliser MathJax pour composer le composant une fois le rendu marqué terminé. Mais lorsque j'ai fait cela, cela a produit un effet merveilleux : après avoir changé de page, il a fallu près d'une minute pour commencer le rendu. J'ai mis plusieurs journaux dans sa file d'attente et j'ai constaté que chaque élément était mis en file d'attente 4 fois, des dizaines d'éléments. Pas étonnant qu'il faille une minute pour commencer à rendre le contenu de la page suivante, même si la plupart des démarques n'ont aucune mathématique.

À ce moment-là, j'ai commencé à me décourager. N'y a-t-il pas de solution à ce problème ? Quand j'étais désespéré, je me demandais si je pouvais composer directement un document. Le résultat était que c'était possible et très rapide. Le rendu n'est donc pas lent, peut-être que le processus d'initialisation du rendu est lent. Ensuite, la solution apparaît à ce moment-là. Nous pouvons minimiser le nombre de rendus et restituer uniquement le document. Tant que le rendu est en cours, quel que soit le nombre d'éléments arrivant dans la file d'attente, nous ne les traiterons comme files d'attente qu'une seule fois.

J'ai donc écrit ce service :

@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();
 }
 }
 }
}

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

Comment implémenter la commutation de carrousel gauche et droite dans jquery

Comment obtenir des données et les attribuer à la page dans jQuery

Comment implémenter l'affichage du modèle 3D dans three.js

Tutoriel d'installation de la CLI angulaire

Dans Vuejs Implémentation d'une file d'attente de mise à jour asynchrone via nextTick()

Comment implémenter Toast à l'aide de ReactNative

Comment extraire des modules communs à l'aide de CommonsChunkPlugin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!