Svelte VS ReactJS 성능 보고서

Svelt Needs A Virtual DOM에 게시물이 작성되기 며칠 전입니다. 내 쪽에서 같은 게시물에 일종의 명확성이 부족했을 수도 있습니다. 더 명확히 하기 위해 보고서를 여기에 첨부합니다.

두 프레임워크에서 실행된 유사한 코드는 다음과 같습니다.
*ES6 루프를 사용하지 않아도 괜찮습니다. 이는 jsperf 사이트에서 전환했기 때문입니다.

  updateString = () => {
    let outerIncrement = 0;
    let increment = 0;
    do {
      do {
        this.longStringPre += "String number:" + increment++;
      } while (increment < 1000);
      outerIncrement++;
   } while (outerIncrement < 1000);
  }

  componentDidMount = function () {
    this.updateString();
    setTimeout(this.setState.bind(this, {
      longString1: this.longStringPre,
    }), 1000);
    setTimeout(this.setState.bind(this, { longString2: this.longStringPre }), 3000);
    setTimeout(this.setState.bind(this, { longString3: this.longStringPre, 2000);
    setTimeout(this.setState.bind(this, { longString4: this.longStringPre }), 1500);
  }

HTML은 다음과 같습니다.

<div className="App2">
        <div>hello</div>
        <div><div>{this.state.longString1}</div></div>
        <div><div><div>{this.state.longString2}</div>{this.state.longString3}</div></div>
        <div><span>{this.state.longString4}</span><span>{this.state.longString2.split(":").join("--")}</span></div>
        <div><div><div></div>{this.state.longString2.split(":").join("-")}</div></div>
        <div><div>{this.state.longString2.split(":").join("||")}<div></div>{this.state.longString1}</div></div>
        <p><span>{this.state.longString1.split(":").join("=")}</span></p>
</div>

그것은 reactjs 코드였으며 동일한 시간 초과 및 Html 구조를 가진 정확히 동일한 코드가 svelte 코드와 함께 이어졌습니다.

테스트 코드가 왜 그렇게 복잡합니까?

여러 ajax 호출이 거의 동시에 응답하는 시나리오를 복제하기 위해 노력했기 때문입니다. 대부분의 애플리케이션에는 특히 여러 차트가 포함된 대시보드에서 또는 발생하는 대규모 라이브 업데이트가 있을 때 동시에 종료되는 다수의 ajax 호출이 있습니다.

테스트 코드를 이해하려면

4개의 문자열longString1, longString2,longString3 & longString4이 서로 다른 시간 간격으로 업데이트됩니다.

예를 들어 Html에서 longString2는 돔의 모든 다른 위치에 대해 업데이트됩니다. 이는 두 프레임워크 모두 중복을 고려하지 않도록 하기 위한 것입니다. 다른 ajax 호출이 응답할 때 일반적으로 중복 데이터가 없기 때문입니다.

중첩 DOMdiv은 DOM을 업데이트하기 전에 Reactjs 단독으로 트리를 비교하기 때문입니다. 중첩된 DOM을 제거하면 Svelt가 더 잘 수행됩니다. 하지만 우리 앱에는 중첩 DOM이 있습니다.

다음은 여러 번의 시도에서 일관된 결과입니다.
호리호리한 스크린샷1


반응 스크린샷1


호리호리한 스크린샷2


반응 스크린샷2


가상 DOM에 대해 이야기하고 있으므로 DOM 및 레이아웃 타이밍을 고려해야 합니다. 스크린샷에서 ReactJS가 Svelte보다 좋은 이점이 있음을 관찰할 수 있습니다.

한 가지 기억해야 할 것은 DOM 읽기는 비싸지 않지만 DOM 쓰기는 비싸다는 것입니다. 쓰기에서 트리는 자체적으로 재구성해야 하기 때문입니다.

전체 이야기는 오직 자바스크립트 엔진 내에서 일어나는 모든 일이 다른 엔진(브라우저 엔진)에 의해 실행되는 DOM과의 통신보다 비용이 훨씬 적게 듭니다.

같은 내용을 논의하기 위해 자유롭게 의견을 말해주세요. 시간 내 주셔서 감사합니다.