開発環境でアニメーションの処理が重たい

shgtkshruch commented 4 years ago

改善詳細 / Details of Improvement

グラフの表示切り替え時のパフォーマンスを Chrome の Developer Tools で計測しました。

おもに vue-axe に関連する処理で時間がかかっていて、FPS が 1 になっています。（違和感なくアニメーションしているように見えるのは、60 FPS が目安です）

開発環境でもアニメーションがなめらかに動くと嬉しい
vue-axe はアクセシビリティ関連のエラーを console に出力してくれるので、無効にするのも違うかなと思っています ref: #798
- オプションなどで改善できるといいかも

shunito commented 4 years ago

導入に関わった伊藤です。いまはenvがdevelopの場合にaxeが必ず動きますがアニメーションとかの検証には困るでしょうね。

> yarn dev-no-axe とか準備すればよさそうですか？

shgtkshruch commented 4 years ago

vue-axe を有効にした上でレンダリングをブロックしないのが理想だと思いますが、個人的にはご提案頂いたコマンドがあると嬉しいです。

1つ伺いたいのですが、アクセシビリティ関連の改善をすすめることで vue-axe の処理速度も改善されることはあるのでしょうか？

shunito commented 4 years ago

残念ながらaxeは全ノードベタなめしながらチェック項目を全量実行しちゃうので、パフォーマンスはノード数に応じてどうしても重くなってしまいます。特にvue-axeはNuxtのルーターの変更を検知して動きますので、何か再表示するたびチェックが働きます。まぁ、そういうツールなのですが。

基盤に近いところの変更も少し必要ですが、対応は可能です。管理者の方の判断で必要そうであればアサインしていただければ対応しますー。

shgtkshruch commented 4 years ago

回答ありがとうございます。

axeは全ノードベタなめしながらチェック項目を全量実行しちゃうので、パフォーマンスはノード数に応じてどうしても重くなってしまいます。

そうなんですね。 vue-axe について知らなかったので勉強になりました！

個人的には、修正は必須ではないですが早くなったらいいなくらいの温度感です〜。

shunito commented 4 years ago

はい、ちょっとウザいときはアドホックに \plugins\axe.js の二行目あたりに return true とか突っ込んでいただければ。

shunito commented 4 years ago

こちら、自分で開発していてもやっぱり重いので、自分でも欲しくなってきました。私はA11y主体でやっているのでしょうがないのですが、開発者の皆さんみなストレスなのもよくないので、やっぱりAxeが動かないコマンド準備させていただこうかと思います。