[Web][Performance][Angular][React][Vue] Angular vs React vs Vue 속도 비교

참고:

[Angular-01]Angular와 TypesScript

[React-08]create-react-app, cli로 프로젝트 만들기

[Vue-13]vue cli 프로젝트 사용하기, 그리고 vue 컴포넌트

angular와 react, vue의 속도에 대해서 항상 이슈가 있다.

보통 통념상으로는 angular가 제일 느리고 react와 vue가 비슷하다는 것이다.

그런데 과연 그럴까?? 갑자기 궁금해졌다.

그래서 필자는 한가지 테스트를 해봤다.

div의 개수를 만개를 랜덤으로 생성해서 배치하는것을 각각의 프로젝트로 만들었다.

조건:

컴포넌트는 App과 Sub둘 뿐이다.

Sub에는 랜덤 크기, 랜덤 위치, 랜덤 색으로 10000개의 div를 생성한다.

div는 단 한번만 생성하며 재생성하거나 라이프사이클을 다시 호출하지는 않는다.

angular프로젝트를 만들고 cli를 돌려준다.

react역시 프로젝트를 만들고 cli를 돌려준다.

vue도 프로젝트를 만들고 cli를 돌려준다.

이렇게 3개를 띄우고 하나씩 실험해봤다.

실험 시간은

HTML파서가 시작되는 순간부터 Loaded이벤트가 발생할 때까지를 측정한다.

그럼 테스트 결과를 보도록하자.

총 5회 테스트를 했다.

단위는 ms이다.

angular 1350 1220 1220 1280 1250

react 750 675 650 700 675

vue 800 875 830 825 850

결과를 보면 전반적으로 angular > vue > react 순서로 속도가 측정된다.

그래도 vue와 react는 비슷한데 angular는 1.5배정도 속도가 느리다.

혹시 빌드를 하지 않고 cli때문에 아닌가 싶은 사람이 있어서 첨언하자면

3프로젝트 모두 빌드후에 동작시킬 경우 보통 50ms~100ms의 속도향상이 있다.

하지만 이는 angular, recat, vue 모두에 해당하는 이야기이며

angular > vue > react 순서는 바뀌지 않았고 체감상으로도 angular는 확실히 늦었다.

그래서 10만개로 늘려서 테스트 해봤다.

angular 9500 8750 9600 9250 9250

react 4200 4200 4400 4100 4100

vue 7000 5900 6500 5600 6400

10만개로 늘려도 속도차이는 여전했다.

오히려 데이터가 아주 많아지니까 react와 vue의 차이는 더 드라마틱하게벌어졌다.

마찬가지로 angular역시 여전히 느린 모습을 보여줬다.

결론:

측정 방식에 따라 다를 수 있지만 해당실험의 결과 angular가 1.5배정도 느리며

react가 vue보다 약간 빠르지만 둘은 비슷하다.