12/18

パフォーマンス

チューニング基礎

• チューニングは多くの場合、時間またはコードの煩雑さのトレードオフ。
• あるところで紹介されているテクニックが、全く無意味なこともあるので、なぜそのテクニックが効果的か理解する。
• ボトルネックを見つけ出すことが重要

パフォーマンス指標RAIL

https://web.dev/articles/rail?hl=ja

以下の頭文字

• Response
  ユーザーがボタンをクリックしてダイアログが表示される時間
  目安100ms以内
• Animation
  フレーム生成時間
  目安16ms 60フレームを維持せよということかな
  安定的にするにはJSの処理時間は6msが望ましい。
• Idle
  responseやanimation、Loadが終わった後に、ユーザーのアクションを待っている状態。
  JS実行最中はユーザーからの入力受け取りがJSの実行が終わるまで遅延することになる。
  結構わかりにくかったので参考 https://qiita.com/naokikobashi/items/55b9d643f88215a656aa
• Load
  Webページコンテンツ読み込み時間
  目安3G 接続が低速なミッドレンジのモバイル デバイスで、ページを 5 秒以内にインタラクティブに読み込むこと

Iphoneとmac接続してIphone画面の検証ツールをmacに表示させる

Webインスペクタで色々やってできた。
使ったことなかったけど、これは便利で楽しい。クリックで要素選択とか。
レイヤータブとか、事前知識を最近つけたおかげでより理解できた。

Three.js

CanvasTexture

canvasTextureの練習、うまく行きはした。けどパフォーマンスの観点でど忘れしていた事があるのでメモ

PlaneからPoints

ジオメトリはPlaneGeometry、メッシュはPointsで描画されてる場合、
blending: THREE.AdditiveBlendingをやってみるとわかるが、pointが２重で描画されている。

これはデフォルトでPlaneGeometryはインデックスバッファを持ち、同じ頂点を複数の三角形で共有し、メモリと描画を最適化している。

Pointsは各頂点が個別の点として描画されるため、不要。なのでsetIndex(null)で削除する。

感想

web.devいいね。色々なベストプラクティス学べそう。将来的にWebWorkerこれで学ぼう。

I found a site name of web.dev. which is good tool to learn various best practices.
I'll use this to learn WebWorkers in the future.