https://gyazo.com/b3e10348bba3d8a06eb0a79e06bd0e6f
言語処理系
ランタイム
ホスト環境、実行環境
処理系を動かす環境
ランタイムがエンジンを埋め込んでいる
C++をラップしてRustから呼ぶ
ランタイム側でカスタマイズする
イベントループ、Buffer、SetTimeout
エンジンの構成
インタープリタ、JITコンパイラ
ブラウザに搭載されるエンジンは巨大
複数持っていたりする
後発エンジンは比較的軽量
VMのみ
ブラウザ搭載エンジン
ウェブの進化で求められるものが増えてきた
JITコンパイル
パフォーマンス
Execution Tier
セキュリティ
Sandobox
ランタイムの紹介
カスタムスナップショットAPI
workerd
サンドボックス環境
V8 Isolate
実行インスタンス
コンテナよりも軽い
どこで利用しているかは不明
JITはあまり効かない
軽い
起動が高速、メモリ使用量が少ない
Scriptとモジュールのちがい
外的要因によって決まる
import/exportで繋がっているもの
モジュールはJSとは限らない
仕様におけるモジュール
Abstract Module Record
Cycluc Module Record
Source Text Module Record
mjsからcjsをインポートはできたけど仕様的にはどう？
Abstract Module Recordで取り扱われる
cjsをexportするかはNode.jsが自由に決められる
require(ESM)の仕様解釈
既存の類例
構文としてはあった
ES におけるモジール実行
module.Evalute()
Promise
最初から解決済み
Promiseをもらった瞬間に捨てればOK
module.Link()
モジュール実行前の準備
同期実行
module.LoadRequestedModules()
依存先を全部読み込む
Promise
HostLoadiImportedModuleが同期的に動けば解決できる
エラー処理について
処理系特権でPriomiseの中身を同期的に確認してエラー処理を行う
HostLoadiImportedModuleを利用して実際の読み込みを行う
同期実行可能
仕様上には矛盾しないことがわかった！
Bridgeがなくなった話
JSONですべて非同期で取り合える
問題点
アプリ起動の負荷が大きい
処理の優先度の設定が行えない
Bridgeを介さないでJavaScriptとNativeの通信を可能にする
JavaScript Interface
JSからC++のメソッドを実行できる
その逆もできる
エンジンのラッパー
JITコンパイルに頼らないので起動時間を短縮
ネイティブ側に存在するモジュールを実行する仕組み
C++に手を加えられればネイティブ側に反映できる
画面描画を同期的に行う仕組み
Fast JSX: Don't clone props object #28768 高速化ポイント
propsをクローンする必要がなくなった
なぜクローンするのか
key, refの予約語をpropsから削除
問題点
それぞれを渡さないようにする必要があった
これを実現するためのpropsをクローンする必要があった
解消法
props.refでrefにアクセスできるようになる
keyもスプレッド構文を使わなければクローンされなくなった
public apiであるcreateElement後のpropsの上書き
jsxをDOMに変換する関数
Reac17以降からjsx関数が使われるようになった
createElementを使用しなくなった
厳密には createElement と違って jsx 関数は直接 import して使用するのは推奨されない感じ
何をするものか
第１引数に配列を受け取る
第２引数を関数で受け取る
関数を判定してグルーピングをオブジェクトで返す
第１引数は仕様では特に配列に限定されてるわけではないっぽい
イテラブルだったらいい
itemsがオブジェクトじゃないとTypeErrorをthrowする
オブジェクトじゃないのをエラーで返す？
Stringは？
Chromeは通じる
これはバグだった
JSCをローカルでビルドする
でかすぎるので注意
MacならXCodeでいける