webdino / gem-dombench Goto Github PK

0.0 0.0 0.0 5.86 MB

HTML 2.22% TypeScript 80.36% SCSS 17.42%

gem-dombench's People

ページを表示後に画面を自動スクロールしたり、
要素を削除するなどの変更をすることで、
ベンチマークっぽく見せる。

各ページの実行時間を記録し、
ベンチマークとして記録を残すことができるようにする。

4つ目のページにてグラフ(チャート)を使っている。
このアプリではreact-chartjs-2を利用してグラフを描画しているが、
このグラフの目盛りをカスタマイズする方法が
Chart.jsのあたりに記載されているので
これを参考にしつつ、カスタマイズしたい。

現在の仕様では、各画面に遷移してもメインページに戻る方法が無いため、
戻るボタンをオーバーレイなどで追加し、戻ることができるようにする。

全体的に、モジュール化、切り分け、関数化などができておらず、
整然としたソースコードになっていない。
その上、いわいるお作法に則っていない箇所が多いので、修正をする必要がある。

テスト画像が味気なさすぎるので、もっとマシな画像を追加する。

現在、表示するDOMの数を変更するためには
ソースの定数変数を書き変える必要がある。
これを外部から入力可能にするなり、設定ファイルを用意するなりして
設定可能にする。

CSSを用いることで、フィルター、フリップ、回転などは比較的簡単に実装できるので
実装する。さらにベンチマーク中にそれらの変形をさせることも考慮する。

各種デバイスや実行環境においてベンチマーク結果がどのようなものであったかを調査する。
また、CPU使用率、メモリ使用状況なども調査し、記録に残す。

全体的に原色が強いので自然な配色になるようにCSSなどを修正する。

マージン、パディングなどの大枠でない部分を設定する際には
%などで設定すると、0以下になったり、つぶれたりする可能性があるので、
px、em、remなどを使用する。

通常のメッセンジャーアプリではメッセージは下端に追加される。なのでこのページの
デモ中などはスクロールが下端に張り付くように修正する。

4つめのページではグラフの点をクリックすると、対応する表の個所に移動できる。
逆に、表をクリックすると対応するグラフのポイントに移動できるとか強調されるとかがしたい。

サンプルテキストの文言が身近過ぎたり、画一的すぎるため、
文章を長くする、ランダム文字列を生成するなどの修正をする。