개시하다

Mithril도 무한 목록의 성능 검증 테스트를 시도했다.원래 보도는 다음과 같다.

Aerotwist - React + Performance = ?

fork의 코드는 아래에 있습니다.Mithril 맞춤법이 없어요!만약 무슨 문제가 있으면 지적해 주세요.

https://github.com/t-suwa/samples/tree/gh-pages/perf/dom-react-vs-vanilla

어쨌든 재시험을 보고 싶은 사람은 아래부터 비행을 시작할 수 있다.

일반 JS

React v0.14.6

Mithril v0.2.2-rc1

컨디션

크롬이 집필할 때의 최신 버전은 48.02564.103(64-bit)이다.지난번 측정 때부터 버전이 업그레이드됐기 때문에 원래 JS와 React에 대해서도 다시 측정했습니다.
이번에는 안드로이드 터미널 테스트도 진행됐다.SIM 무료HUAWEI Ascent G6입니다.CPU 고핵 1.2GHz, 메모리 1GB, 안드로이드 4.3 역시 레트로 무력한 단말기다.
G6의 크롬은 48.02564.95로 현재 최신이다.나는 데스크톱 버전 번호와 다른 이유를 잘 모르겠다.
아이폰으로 테스트한 결과를 공유하는 사람이 있었으면 좋겠다.

데스크톱

일반 JS

이 경향은 지난번과 거의 같다.100장에서 400장까지 그리는 시간이 개선됐는데 V8의 광학 효과인 것 같아요.

React

이것도 지난번과 많이 다르지 않다.일반 JS와 마찬가지로 400장 안팎의 표가 낮아진 뒤 서서히 상승했다.

Mithril

Y축의 비례자를 보면 알 수 있듯이 React보다 조금 떨어진다.미쓰릴이 리액트보다 빠를 것으로 미리 예상했지만 결국 완벽하게 배신했다.

한편, 토탈 타임과 자바스크립트 타임의 차이는 React와 마찬가지로 거의 일정하게 유지되고 있다.

DOM 드로잉 시간 비교

이번에 우리는 DOM 그리기 시간의 평균치를 비교했다.Total Time에서 JavaScript Time을 뺀 값을 평균화합니다.
이루어지다
평균 DOM 그리기 시간(ms)
일반 JS
24.19
React v0.14.6
31.51
Mithril v0.2.2-rc.1
29.99
리액트와 미쓰리는 어느 쪽이든 JS에 바짝 다가가는 분투 모습을 보였다.요소 JS가 이번 성능 테스트를 위해 DOM 묘사를 조정한 것을 감안하면 가상 DOM의 차분 검측 정밀도와 DOM 묘사의 최적화가 상당히 높은 수준에 이르렀다고 할 수 있다.
그러나 검측 차분에 드는 비용은 별개이니 주의해야 한다.아무리 높은 수준이라도 검사 차이에 너무 많은 시간이 걸리면 본말이 전도된다.짧은 시간 안에 차분 검사를 어떻게 끝내느냐가 중요하다는 얘기다.
이번 무한 리스트처럼 DOM의 노드 수가 단순히 증가한 상황에서 픽셀의 JS가 한 것처럼 추가된 데이터만 판별할 수 있다면 간단하다.그러나 통용되는 차분 검출 논리에서는 이런 전제를 설정할 수 없기 때문에 매번 모든 데이터를 비교하고 결과 처리 시간이 증가한다.
상당히 엄격하군요.

Total Time 비교

리액트가 미쓰리보다 더 잘해요.그럼에도 불구하고 이번 테스트가 실시된 약간 복고적인 환경에서 이런 차이만 관측할 수 있어 이들의 성능은 기본적으로 서로 맞먹는다고 할 수 있다.
한편, 기존 JS와의 격차도 뚜렷하다.가상 DOM 실사는 기존 JS와 비교해 2~3배가량 느린 결과다.

안드로이드 버전

안드로이드와 관련해서는 터미널 지연을 견딜 수 없어 1천장 이상 테스트를 진행할 예정이다.양해 부탁드립니다.

일반 JS

600개의 스파이크를 무시하면 거의 안정적인 성능이다.트렌드로 볼 때 데스크톱과 같다.

React

원래 JS에 비해 처리 시간이 상당히 가파른 경사로 증가했다.이렇게 차이가 난다면 몸소 느낄 수 있는 수준이다.힘없는 터미널이라 실장 효율을 그대로 반영하기 쉬운 경우도 있다.
데스크톱과 같은 경향으로 300~400장 안팎으로 밑그림을 그리며 상승한다.마침 옆에서 숟가락을 보는 도표였다.

Mithril

이것도 데스크톱 버전의 경향과 같다.불가사의한 것은 리액트 같은 숟가락 모양이 아니라 단순히 위로 올라가는 것이다.

Total Time 비교

마지막으로 전체적인 비교는 다음과 같다.

React가 Mithril보다 조금 빠른 경향은 데스크톱 버전과 같다.그러나 이런 차이는 여전히 매우 작다.
기존 JS의 안정도에 비해 리액트와 미쓰리엘은 처리 시간이 늘어나는 경향이 있어 데스크톱에 비해 기울기가 더 빠르다.장수를 더 늘리면 이런 경향은 더 강해지겠죠.

총결산

무한 리스트를 사용해 기존 JS, 리액트, 미셸의 성능을 측정했다.결실

React는 Mithril보다 빠른 경향이 있음

가상 DOM의 차분 검측 정밀도는 조정된 코드와 비슷하다

일반 JS에 비해 가상 DOM 설치가 2~3배 정도 느리다

무력한 터미널에서 가상 DOM의 차별 검측 비용의 등급을 무시할 수 없다

알겠습니다.
의외로 Mithril의 속도는 다소 느리지만, 전반적으로 예상과 차이가 많지 않아 개인적으로도 납득할 수 있다.성능 측정 시리즈는 잠시 이것으로 끝냅니다.
또 신경 쓰이는 프레임이 생기면 테스트를 해보고 싶어요.