Vue Fes Japan Online 2022 での登壇資料です。 https://vuefes.jp/2022/sessions/tbashiyy
十数万レコードに耐えうるVue.jsプロジェクトを実現するためのパフォーマンスチューニング2022-10-16 Vue Fes Japan 2022@tbashiyy1
View Slide
自己紹介柳橋 知弥 / @tbashiyy株式会社イエソド エンジニア初登壇がカンファレンスでとても緊張しています2
今日のお話弊社イエソドで、実際に行ったフロントエンドパフォーマンスチューニングのお話3
YESODとは企業の人・組織の情報を時系列で一元管理できるマスタ製品4
YESODとは1日単位で情報を保持過去から未来のあらゆる断面における人と組織情報を格納することができる5
YESODの技術スタックFrontendVue.js / TypeScript / Vuex / vue-property-decorator(現在2.7でCompositionAPIへ絶賛移行中)BackendKotlin / Ktor / Exposed / Node.js / ExpressInfrastructureKubernetes(GKE) / PostgreSQL(CloudSQL)6
ここから本題7
ある日役員「4000人規模の人事データを入れることになったよ 大丈夫？」エンジニア「確認します！（たぶん大丈夫じゃない）」8
ある日エンジニア「（4000人のデータ x 40属性分入れたらめちゃくちゃ重い・・・）」エンジニア「めちゃくちゃ重くて、修正しないとまずいです！」9
当時の状況ログインしてから初回表示まで十数秒かかる基本何をしても重い10
なぜこんなに重くなってしまったのかフロントエンドのアーキテクチャが少し特殊初回アクセスでほぼ全てのデータを取得してVuexに格納する格納するデータはImmutableで、更新するときは全部置き換える設計初回アクセス以降は基本的に更新をしない限りはBackendと通信しない11
扱うデータ人の情報氏名、メールアドレス、生年月日などグループの情報名称グループの所属メンバーリストグループの階層構造メタデータ（データ構築に使う）4000名 x 40属性が入ってくると約16万件のデータを扱う必要が出てくる※ここに時系列分の断面が増えるので実際はもっと増える12
ここで出てくる素朴な疑問Q：一気に全てのデータを取得するから重いのでは？A：その通りQ：じゃあ画面ごとに都度必要なデータを取得すれば良いのでは？A：アーキテクチャの変更からやるととっても大変 （フロントエンドにかなりビジネスロジックが詰まっている）13
じゃあどうするのか既存のアーキテクチャを変更せずに、頑張って速くする今日はチーム総出で取り組んだ事例をお話しします14
今日の内容1. Chrome DevToolsを用いた計測2. 計測結果と考察3. 事象に対応していく15
1. Chrome DevToolsを用いた計測16
何よりもまずは計測から動作検証で発覚した遅い箇所をChrome DevToolsで計測してボトルネックを特定する17
計測箇所1. ログイン後ページが開くまでの処理（データの初期ロード部）2. 組織図へ遷移する処理（大量要素が表示されるページ）計測方法1. パフォーマンスパネルによる計測2. メモリパネルによる使用量の確認18
計測1. パフォーマンスパネルによる計測パフォーマンスタブを開き、対象の操作を記録していきます19
パフォーマンスパネルからわかること何のMethodがどのくらい処理に時間がかかっているか20
パフォーマンスパネルからわかること各Methodの処理時間21
計測2. メモリパネルによる計測利用されているメモリ量を確認することができます22
Chrome Devtoolsには他にもさまざまな機能があります。是非一度公式のOverviewに目を通してみてください。https://developer.chrome.com/docs/devtools/overview/23
2. 計測結果と考察24
1. JavaScriptのメモリが1000MB以上利用されていた2. 大きなデータをリアクティブにするのに数秒かかっていた3. 大量要素が表示されるページで、全ての要素のレンダリングが終わってから遷移していて遅くなっていた25
2-1. JavaScriptのメモリが1000MB以上利用されていたとにかくメモリが大量に利用されていた。何かおかしいが、スナップショットを取ろうとするとChromeがクラッシュして取得できず・・・26
2-2. 大きなデータをリアクティブにするのに数秒かかっていた4000名x40属性のデータを入れた環境では、初期化に1.5~2秒程度かかっていた27
2-3. 要素が大量に描画されるページの初期化が時間がかかっていた組織図を描画するページで、一つの組織は ~10ms程度だが、500組織近くになるとトータル5秒ほどかかっていた28
3. 事象に対応していく29
3-1. JavaScriptのメモリが1000MB以上利用されていたスナップショットもうまく取れず、原因もよくわからなかったのでパス30
3-2. 大きなデータをリアクティブにするのに数秒かかっていたdefineReactiveという処理が原因オブジェクトをリアクティブにするための処理export function defineReactive(obj: object,key: string,val?: any,customSetter?: Function | null,shallow?: boolean,mock?: boolean)https://github.com/vuejs/vue/blob/ee57d9fd1d51abe245c6c37e6f8f2d45977b929e/src/core/observer/index.ts#L13131
改善方針本プロジェクトの大部分のデータはImmutableなObjectとして設計されていた → リアクティブにする必要がないdefineReactiveが呼ばないようにして、まるっと処理時間を削りたい32
Vue 2の公式ドキュメント対象のオブジェクトを Object.freeze(targetObject)するhttps://jp.vuejs.org/v2/guide/instance.html#データとメソッド 33
なぜこれでリアクティブにならなくなるかdefineReacticeを呼び出すObserverのコンストラクタexport class Observer {dep: DepvmCount: number // number of vms that have this object as root $dataconstructor(public value: any, public shallow = false, public mock = false) {//省略if (isArray(value)) {//省略} else {//省略const keys = Object.keys(value)for (let i = 0; i < keys.length; i++) {const key = keys[i]defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock) // defineReactiveを呼び出している}}}}https://github.com/vuejs/vue/blob/ee57d9fd1d51abe245c6c37e6f8f2d45977b929e/src/core/observer/index.ts#L8334
なぜこれでリアクティブにならなくなるかObserverを生成するmethodexport function observe(value: any, shallow?: boolean, ssrMockReactivity?: boolean): Observer | void {//省略if {//省略} else if (shouldObserve &&(ssrMockReactivity || !isServerRendering()) &&(isArray(value) || isPlainObject(value)) &&Object.isExtensible(value) && // <-ここで Object.isExtensibleで判定している!value.__v_skip /* ReactiveFlags.SKIP */) {ob = new Observer(value, shallow, ssrMockReactivity)}return ob}https://github.com/vuejs/vue/blob/ee57d9fd1d51abe245c6c37e6f8f2d45977b929e/src/core/observer/index.ts#L12035
なぜこれでリアクティブにならなくなるかあるObjectを Object.freezeすると36
改善結果まるっと defineReactiveの処理時間が消えた!37
ここでメモリパネルをみてみると・・・38
使用メモリが1/10程度まで、問題1も副次的に解決した！39
使用メモリが激減した結果全体的に何をするにも遅かったが、速くなったさすがに、ブラウザがメモリを数GBも利用すると何をやっても遅くなるっぽい（※ここは定量的に調査できていません、感覚値です）40
3.3 要素が大量に描画されるページの高速化41
組織図の表示と操作がめちゃくちゃ重くなっていた500個の組織図ってどんなものか42
500個の組織図ってどんなものか43
500個の組織図ってどんなものかもはや見えない44
計測結果をもっと見るここでも defineReactiveが呼び出されていて時間がかかってしまっている → Object.freezeでリアクティブにされないようにする (先ほどと同じ手法) 45
Object.freezeしてリアクティブにされないようにするbeforemoutedでstoreから全組織のデータを取得しているdata: () {return {organizations: [],}},mounted: () {// storeにある組織を全部取得してSetしているthis.organizations = store.getOrganizations();}46
aftermoutedでstoreから全組織のデータを取得しているのは変わらずdataにsetする時に Object.freezeするdata: () {return {organizations: [],}},mounted: () {this.organizations = Object.freeze(store.getOrganizations());}47
Object.freezeした後の計測結果defineReactiveの処理部分がまるっと消えた48
もっと速くしたい49
全部のコンポーネントがmountされる前に描画を開始する500近くある組織のうち、画面に表示できるのはせいぜい10組織程度 →全部のコンポーネントのmountedが終わる前に描画を開始してしまう50
afterdata: () {return {organizations: [],}},mounted: () {const organizations = store.getOrganizations()for (const organization of organizations) {//一気に全部セットするのではなく、1個ずつセットしていくthis.organizations = Object.freeze([...this.organizations, organization]);await new Promise((resolve) => setTimeout(resolve, 0)); //セットが終わったら描画を走らせるため}}51
計測結果52
さらにここから、追加でチューニング53
画面範囲外の要素はレンダリングしないようにする残りの400近くの組織は画面に表示されないにも関わらず、レンダリングまで実行されてしまう画面範囲に入ってきたものだけレンダリングするようにする → Intersection Observer APIを利用する54
Intersection Observer API とは交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。交差オブザーバー API では、監視したい要素が他の要素（またはビューポート）に入ったり出たりしたとき、あるいは両者が交差する量が要求された量だけ変化したときに実行されるコールバック関数をコードに登録することができます。https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_APIこれを利用して、組織図の各組織が画面内に入ってきた時のみ、中身のメンバーのコンポーネントを描画するように制御する55
vue-observe-visibilityhttps://github.com/Akryum/vue-observe-visibilityVueで Intersection Observer APIを扱うためのライブラリがあるので、今回はこれを使う56
vue-observe-visibilityの使い方この要素がViewPort内に入ってきたら visibilityChangedが呼び出されるdata: () {return {isVisble: false}},methods: {visibilityChanged(isVisible: boolean): void {this.isVisble = isVisible}}57
今回の組織図での実装方針58
計測結果59
以上の結果before60
after61
まとめちょっと特殊な状況におけるVueのパフォーマンスチューニングのお話をしましたリアクティブにする必要がない箇所は、特に大きなデータを扱う場合は処理を飛ばすことでパフォーマンス改善が見込める大きなデータをリアクティブにするとかなりメモリも食う描画する必要のない箇所は必要になってから描画するようにするとより速くなるいずれにせよ、まずは計測が大切62
まとめ（裏）（ほとんどのケースで可能だと思うが）画面に必要なデータを都度取得するのが一番楽だと思うVue 3に上げたら速くなってないかなぁ（移行頑張らなきゃ）63
64
ご清聴ありがとうございました65
marktimemedia
mthomps
notwaldorf
colly
mza
pauljervisheath
chriscoyier
lara
mongodb
davidbonilla
jakevdp
moore