집 > 기사 > 웹 프론트엔드 > Angular에서 MathJax를 사용할 때 어떤 문제가 발생합니까?

Angular에서 MathJax를 사용할 때 어떤 문제가 발생합니까?

亚连원래의: 2018-06-20 16:24:551858검색

이 글에서는 주로 MathJax를 Angular에서 사용할 때 발생하는 몇 가지 문제를 소개합니다. 이 글에서는 샘플 코드를 통해 매우 자세하게 소개합니다. 학습이나 업무에 필요한 모든 사람이 함께 와서 배울 수 있습니다. .

머리말

즉, 원래는 KaTeX가 빠르다고 느꼈고 MathJax는 맞추기 어려울 것 같아서 쪽으로 기울었습니다. 그러나 모든 사람들은 KaTeX의 기능 부족에 대한 불만을 표현했고, 이는 나에게 MathJax를 탐구할 동기를 부여했습니다.

MathJax 소개

MathJax는 브라우저에서 실행되는 오픈 소스 수학 기호 렌더링 엔진입니다. MathJax를 사용하면 이미지를 사용하지 않고도 브라우저에 수학 공식을 쉽게 표시할 수 있습니다. 현재 MathJax는 Latex, MathML, ASCIIMathML의 마크업 언어를 구문 분석할 수 있습니다. MathJax 프로젝트는 2009년에 시작되었습니다. 발기인으로는 American Mathematical Society, Design Science 등이 있고 많은 지지자들이 있습니다. 저는 개인적으로 MathJax가 앞으로 수학 기호 렌더링 엔진의 주류가 될 것이라고 생각합니다. 사례.

개인적으로, 실제로 MathJax는 매우 간단하기 때문에 깊이 있는 연구는 아닙니다. MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]);를 호출하면 됩니다. > 요소를 렌더링합니다(this.element.nativeElement는 Angular에서 DOM을 호출하기 위한 구문입니다). 이 .Queue는 실제로 MathJax 자체에 의해 구현된 콜백 형식입니다. 구문은 각각 매우 이상합니다. 콜백을 나타내는 배열로, 순차적으로 실행됩니다. 예를 들어 이 ['Typeset', MathJax.Hub, this.element.nativeElement], 첫 번째 요소는 메서드 이름, 두 번째 요소는 this, 후속 요소는 매개변수입니다...<code>MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); 就可以渲染一个元素（这个 this.element.nativeElement 是从 Angular 中调用它 DOM 的语法），这个 .Queue 实际上是 MathJax 自己实现的回调格式，语法非常清奇，参数个数不定，每个都是数组，代表一个回调，顺序执行。比如这个 ['Typeset', MathJax.Hub, this.element.nativeElement] ，第一个元素是方法名，第二个元素是 this ，之后的元素都是参数……

我们可以看到这个就相当于执行 MathJax.Hub.Typeset(this.element.nativeElement)

우리는 이것을 볼 수 있습니다 MathJax.Hub.Typeset(this.element.nativeElement)를 실행하려면 이것을 실행해 보는 것이 어떨까요? 이 방법은 동기식이므로 페이지가 매우 중단될 수 있습니다. 따라서 MathJax는 비동기 대기열을 캡슐화합니다(API는 수백 년 동안 변경되지 않았을 수 있습니다)

Angular로 돌아가 보겠습니다. 마크다운을 사용해야 하기 때문에 지시문을 캡슐화하기 위해 표시를 사용하는 것이 좋습니다. 그런 다음 표시된 렌더링이 완료된 후 MathJax를 사용하여 구성 요소를 조판해야 합니다. 그런데 실제로 이렇게 해보니 놀라운 효과가 나타났습니다. 페이지를 전환한 후 렌더링을 시작하는 데 거의 1분 정도 걸렸습니다. 대기열에 여러 개의 로그를 넣었더니 각 요소가 4번, 즉 수십 개의 요소가 대기열에 있다는 사실을 발견했습니다. 대부분의 마크다운에는 수학이 전혀 없음에도 불구하고 다음 페이지의 콘텐츠 렌더링을 시작하는 데 1분이 걸리는 것은 당연합니다.

이때부터 저는 낙담하기 시작했습니다. 이 문제에 대한 해결책은 없을까요? 절박할 때 문서를 직접 조판할 수 있을까 고민해 본 결과, 가능하고 매우 빨랐습니다. 따라서 렌더링이 느리지 않고 렌더링 초기화 프로세스가 느릴 수도 있습니다. 그러면 이때 렌더링 횟수를 최소화하고 문서만 렌더링하면 해결 방법이 나옵니다. 렌더링이 계속 진행 중인 한 대기열에 요소가 얼마나 많이 들어와도 해당 요소를 한 번만 대기열로 처리합니다.

그래서 제가 이 서비스를 썼습니다:

@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: &#39;none&#39;,
  tex2jax: {
  // preview: &#39;none&#39;,
  inlineMath: [[&#39;$&#39;, &#39;$&#39;]],
  processEscapes: true
  }
  });
  this.window.MathJax.Hub.Queue([&#39;log&#39;, console, &#39;start&#39;], [&#39;Typeset&#39;, this.window.MathJax.Hub, document], [&#39;log&#39;, console, &#39;end&#39;], [&#39;finishRunning&#39;, this]);
 }
 } else {
 this.finishRunning();
 }
 }
 }
}

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Angular에서 MathJax를 사용할 때 어떤 문제가 발생합니까?

관련 기사