12/16

webパフォーマンス

ブラウザレンダリング

レンダリングはレンダリングエンジンが行う。ブラウザによって違うが、Blink(Chrome等)とWebKit(Safari等)が主要。

ウェブページが表示されるまでにどういったプロセスをたどるのか。

↓レンダリングの流れ↓

4つの工程。全体をフレームという。

Loading

リソース読み込み。html,css,jsファイル、画像ファイルを読み込む。

1. HTMLを読み込み、パース
   HTMLを取得し、DOMツリーを構築する。
   DOMツリーへの変換過程でツリー内に含まれる画像やCSSの取得、読み込みを行う。
   同期的なJS(textContentの変更等)を実行しつつDOMツリーを構築するので、ブロックされうる。
2. CSS読み込み
   link要素を使った外部CSSファイル、style要素で埋め込まれたCSSの読み込み。
   CSSOMツリーへと変換される。

DOMツリー
レンダリングエンジンが利用する構造を持つ。Renderingの処理はDOMツリーを元に行う。
構築されたDOMツリーはJSからアクセスできる。(DOM操作)

CSSOMツリー
こちらもレンダリングエンジンの内部表現だが、JSからアクセスできる。

Scripting

JavaScriptエンジンが実行。（chrome: V8 safari: JavaScriptCore）

HTMLと同じくトークン列をパースし抽象構文木を作成。その後実行可能なようにコンパイルする。コンパイルが終わってはじめてJSコードは実行される。

コンパイル処理は、JavaScriptエンジンによる。以下の種類。（ほぼJIT）

• バイトコードインタープリター（仮想マシン用コードへの変換）
• JITコンパイル
• 両方（トレーシングJIT）

JITコンパイル
Just in Timeコンパイル。スクリプトエンジンが実行時にその場でコンパイルすること。
コンパイラがそのコードをその処理系が動作しているマシンのCPUが直接解釈できる機械語に変換。
実行時のパフォーマンスに優れる。

AOTコンパイル
JITコンパイルの逆であらかじめコードをコンパイルしておく。
C言語やJava言語で行われる。

Three.js

normalを渡す

なーんか表示うまく行かないな〜と思っていたら、modelMatrixではなくmodelPositionを渡していた。気をつけようね。

vNormal = (modelMatrix * vec4(normal, 0.0)).xyz;

球状配置

以前球状に配置する記事投稿したけど、計算方法間違ってた。動画だと上からθがくる北極が0度になるけど、現実の緯度をθにしたかったら赤道が0度だから、変わるね。

どの角度でも、結構計算は簡単だから良いけどね。

テクスチャ

magFilterはNearestFilterかLinearFilterの2種類だって。minFilterと同じく6種あると思ってた。

あと、texture.anisotropyを忘れていた。劇的に球体のテクスチャが良くなる。minFilterをNearestにするだけでもいいとも思う。

anisotropyって異方性という意味らしい。日本語でもむずい。

ライトの内積で毎度混乱していた理由がわかった。

フレネルを実装してわかった。viewDirectionがちゃんとカメラの向きとして、物体のvPositionと対面で内積計算しないとフレネルはうまく行かない。

でも光とかはlightPositionで法線と光の向きを同じに方向にして内積を計算するからごっちゃになってたんだ多分。

エディタターミナルからfinderを開く

distをアップしたいときとか、画像をドラッグしたいときとか。意識せずfinder開いて探してたけど、楽してけ

open .

所感

3週間くらい前に買ったきんもくせいのアロマディフューザーぜんっぜん減らない。
ここ最近はずっと開けて木を指しているのに、全く減らない。
もはやリラックスとかじゃなく、日常になっちゃった。

お香とかちょっと興味ある。おしゃれなこと全くやってこなかったから、夢。

I'm interested in incense. It's my dream because I've never done anything fashionable.