Vue.js2.0에 대한 퍼포먼스

2436 단어 Vue.js
Vue.js 발행 이래나는 x과를 접촉한 적이 있다.x계로 업데이트된 후 아직 접촉하지 못했기 때문에 다시 2를 업데이트합니다.x를 조사했습니다.
이전x에서 많은 때와 현재를 비교해 보면 문서(특히 일본어 문서)가 충실한 것 같아요.
또 이전과 비교해 참고 가치가 있는 정보와 커뮤니티 등도 많이 늘었다.
그런 점에서 다른 프레임에 비해 손대기 쉬운 프레임이다.
(학습 원가가 낮아도 큰 장점)

Vue 2.0 성능이 더욱 향상되었습니다!?


Vue.js의 두 시스템 문서를 찾아봤는데 성능이 대폭 향상되었고 흥미가 생겨서 조사했습니다.
다음은 다른 프레임과 비교한 수치입니다.
(수치가 낮을수록 성능이 높음)

물론 향방 프레임, 부적합, 잘, 못하는 부분이 있기 때문에 단순히 이 같은 속도가 빠르다고 볼 수는 없지만 모든 면에서 우수하다(각 프레임이 길고 짧다)는 것은 시스템의 성능을 나타내는 데 있어 거의 모든 상황이 Vue라는 뜻이다.js가 우세한 것 같습니다.
Vue.작은 범위의 도서관에서 js의 활약이 우수한 것은 역시 매력이다.
그렇다면 위의 도표를 보고 눈에 띄는 것은 Vue1이다.X계와 비교하다.x방면에서 성능이 대폭 개선되었다.(2.16x→1.37x!?)

2.0으로 퍼포먼스를 높인 이유!?


2.0 성능이 향상된 이유를 간단히 조사했다.
오해가 두렵지 않다면 다음과 같은 두 가지가 있는 것 같다.
  • Virtual DOM 도입
  • 경량화
  • Virtual DOM 가져오기


    Virtual DOM에 대해 간단히 말하면 실제 DOM 작업이 매우 무겁기 때문에 일반적으로 DOM에 접근하지 않고 업데이트가 필요한 상황에서만 DOM 업데이트를 진행한다.
    Virtual DOM은 Advent 달력의 7일째입니다. @chi-bd 쉽게 정리했으니 한번 보시는 게 좋을 것 같습니다.(감사합니다)
    MVM의 양방향 데이터를 단방향으로만 바인딩하여 속도 업데이트를 수행할 수 있습니다.
    Virtual DOM의 구조도 Vue입니다.js가 최적화된 것 같습니다. 그쪽도 성능에 도움이 됩니다.(이것은 자동으로 VIrtual DOM을 만들 수 있는 구조임)

    경량화


    라이브러리 자체의 경량화는 물론이고 Virtual DOM도 경량화를 꾀한다.

    이것은 도표로 운행 시간만 있는 건축물이 16kb(min+gzip시)밖에 되지 않아 매우 가볍다.
    vue-router와 vuex를 포함하여 모두 26kb로 1.0x보다 성능이 압도적으로 개선되었습니다.
    또 초기에 나타나는 속도와 메모리 소모량이 압도적으로 억제돼 성능을 높이는 것으로 보인다.

    총결산


    Vue2는 Virtual DOM의 메커니즘을 가져옵니다.0의 성능 향상에 크게 기여했습니다.
    그리고 단순히 Virtual DOM을 도입한 것만은 아니라는 점을 고려하면 크다.
    앞으로 1.x과에서 만든 것 2.나는 x과로 옮겨 보려고 한다.
    이번 조사를 해보니 이전 1과가 시도했을 때보다 조사가 수월해진 느낌이다.

    좋은 웹페이지 즐겨찾기