1/1

マックに行こうとしたら駐車場いっぱいだった。。元旦なんて誰もいないだろうと思ったが、多分逆にマック以外空いてないのかも。
コメダはガランとしていた。ラッキー。

その後イオンで勉強予定が人が多すぎてリタイア。どこも人で溢れているのね。がらんとした映画館でやった。寒い。

案件練習

実際のフォームを想定してページ構成からワイヤーフレーム、デザインカンプへと完成させる練習をする。

figmaでやろうとしたが、figma aiが有料版でしか機能しないようだ。調べるとRelumeというサイトがいいらしいのでやってみる。

Three.js

gpgpuの復習その２やった。 次は例のgpgpuバードやる

パフォーマンス

Layersフェーズ ボトルネック特定方法

検証ツールレイヤータブを表示する。PaintProfilerを押す。

内部的には普通のhtmlもcanvas2Dのように描画されているんだ。。衝撃

GPUによって合成されるレイヤー

最後の工程であるCompositeLayersの内部処理として、GPUによって行われる合成あり。
Resterizeでビットマップされた後にGPUへ転送されて合成を行う。

• 3D変形transform
  先日の通り、transformCSSの変更はCompositeLayersのみ引き起こす。GPUによる処理は高速。
• WebGL canvas
• canvas要素(ブラウザの設定でハードウェアアクセラレーションを有効の場合)
• CSSFilter

translateZハック

transform:translateZをしていしてgpuに送って高速化する処理はよく知られている。
が、今の Chrome は 「勝手に最適なタイミングでレイヤー化する」ので不要。

昔の力技でしかないので避ける。

will-changeプロパティがある。「これから」変わるときだけ用いるのが正解の使い方。jsで指定して使い終わったら消すのが本来の使い方で、cssで指定しているものはほぼ間違いである。

現代では基本的に何もしなくて良い。本当に必要なときだけwill-changeを使う。

Layout範囲限定 contain

昨年のエビスコム本で知った「contain」プロパティだが、Layoutの範囲の限定に使える。というか、そういう最適化のためのプロパティだったらしい。
完全にoverflow:hidden代わりにcontain:paintを使っていただけだったが、今調べたらもっとcontainプロパティ理解できるかも。

去年調べてもよくわからなかったんだよな〜感動。

containのlayoutとpaintはレイアウトのフェーズのことだったのか...! 馬鹿だから全然気づかなかった。点と点が...!

今までthree.jsで使っていたcanvasWrapperとかもcontain:strictとしたほうが良かったかも。

感想

どこも人だらけ。元旦ってそうなんだっけ。
Everywhere is packed with people. Is NewYear'sDay usually like this?

death is not among my fears. but there is one thing I do fear and one thing alone, that time will quiet my passion in my heart....
クラピカオマージュで