らいふうっどの閑話休題

興味のあることをゆる～く書いていく

ブラウザエンジン先端観測会に行ってきた

Browser

f:id:ic_lifewood:20190428134252p:plain

    直接の目的
  • ブラウザエンジンの最新トレンドを観測する
  • 好奇心を満たす
    直接の目的ではないこと
  • 効率的なWebコンテンツ開発などについて知見を深める
  • 高速なコードの書き方について学ぶ
  • 堅牢なWebアプリの設計について考える

会の趣旨

ブラウザのプラットフォームを観測
⇒ブランチの話なので、リリースの一年程度先
事の始まり、FirefoxのGeckoエンジンの勉強会⇒スピンオフ的に始まった

・・・・なのに


14:10 ~ 14:50 (40 min.) Servo Tetsuharu OHZEKI

【メモ】 １．モダンブラウザの処理フロー
http://dbaron.org/talks/2014-06-04-cssday/master.xhtmlより
　DOMをPharseする
　PhotoShopの合成フローみたいなことをやっている
　DOMのTree（Rendering Tree）を構築している

２．現行エンジンの速度向上指針
　①とりあえず最適化する
　②非同期出来そうなところ頑張って非同期にする
　③エンジン側で管理できるところを増やす
　　⇒メインスレッドでなるべく動かさないようにする

３．モダンブラウザの抱える問題


４．Servo


tom_servo
　①Mozillaによる並列性にフォーカスしたブラウザエンジンの実装


　②Rustによって記述されている
⇒Rust Laungage：MOZILLA製の新言語，システムプログラミング，並列性・安全性，C++ meets haskell
　③標準化されたSPEC通りに実装
　④tableのlayout方法など、存在しないspec再検証

５．Servoのアーキテクチャ
　①可能な限り非同期にする
　　メッセージパッシングで動いている

６．IFRAME（CROSS ORIGIN）
７．COPY-ON-WRITE DOM
　DOMの変更点を接ぎ木していこうという思想

８．セレクタマッチングの並列化
　CSSのセレクタのマッチング処理は非常にコストが高い

９．レイアウト処理の並列化⇒こいつが遅い
　①シーケンシャルに処理している
　②既存実装では並列化が困難
　③エンジン側で管理できるところを増やす
　　⇒メインスレッドでなるべく動かさないようにする


１０．レイアウト計算：3-PASS
bubble-width(botttom up) assign-width(top down) assign-height(bottom up)

botttom up：子の結果に親が依存する
top down：親の結果に子が依存する

１１．Foloatをどうするか？
①まわりこみが発生する
　FLOATの影響受けてい場合は、フラグを立ている
　影響を受けた要素はFLOATの計算終了後に再度実施する


　BLOCK FORMAT CONTEXT
　検算をしていない⇒バグっている？！

１２．その他試した事
　①DOMのライフサイクル一本化
　②Spider Monkey GCでRustオブジェクトの生存管理
　③GPU上でのレイアウト計算
　③pcwaltonが試したらしい。


１３．未トライ
　①インクリメントレイアウト
　②CSS JIT
　③実用的なエンジンへの一歩
　　各プラットフォームへの移植


１４．SERVOの将来⇒


⇒そもそも何も考えていない

15:00 ~ 15:45 (45 min.) アクセシビリティオブジェクトが作られない場合 @Takenspc


IMAG0207


【メモ】
１．アクセシビリティオブジェクトとは
①Access＋Ability：アクセスできる
②誰にでもアクセスできる
③WEBへのアクセス
　支援技術（Assivitive Technoogy）
　⇒特定の機能を使いやすくしたり、
　　そのままでは使えない機能を行えるようにするデバイス，機能

２．ここのChronium　Cast登場ｗ
　Operaを音声だけで操作する。
　⇒Open／Close出来る。
IMAG0203
IMAG0206


　アクセシビリティAPI
　　ブラウザと支援技術が連携する
　　MSAA：Windows


３．アクセシビリティオブジェクト作られ方
　　アクセシビリティトリー構造
　　①役割：種類
　　②状態：動的な属性
　　③プロパティ：性的な属性
　　④その他：位置と大きさ、文字の大きさ等

　　セマンティクス情報，レイアウト情報、両方必要

　　Geckoの場合
　非表示だったら、オブジェクトを作らない
　　　テキストノードかどうかを見てオブジェクトを？？？？

　 WebKit/Chronium,Blink
　 アクセシビリティオブジェクトの生成



　　WAI-ARIAのリスト関連⇒リストオブジェクト
　　WAI-ARIAのグリッド関連⇒グリッドオブジェクト

４．HTML5対応とは
　　アクセシビリティAPIで対応も一つ
　　実装状況⇒スライドを参照

５．調査ツール
　　aViewer:Windows
　　DOM Inspector：Firefox


６．フラット化
　　重要かどうかはブラウザ依存
７．WebKitのバグ
ブラウザのHTML5対応はアクセシビリティAPI側面を考える必要がある

16:00 ~ 17:00 (60 min.) CSS JIT @Constellation


ネタで画像テロ？！
IMAG0208
では・・・・改めてｗ
IMAG0209


【メモ】
１．Motivation


　①Style Resolution/Query Selector
　　⇒rootにあるエレメントを全てチェック
　　　合致するものがあれば、appendしていく


２．CSS JITを高速化するテーマ


３．SelectorChecker::match（C++のソース）
　div+ div~ div div> span
　コンビネーター（+,~,>）⇒Selectorの評価の判断基準が変わる
　Selectorの評価は右から左　Right to Left


４．BackTrackingする場合にも関係する


５．Candidates become less
６．CSS Selctor JIT


７．Compiling machine Code
　うまく行くとCurrent Elementをレジスタにセットする
　上記レジスタを用いて要素を評価をする
　⇒BackTrackする時は、descendantのひとつ前の物を覚えておけばよいから
　無駄なBackTrackを下げる⇒不要レジスタを減らすことができる

IMAG0210



　Ｑ．CSS Selectorでダメなものは？
　⇒Ａ．７０～８０％程度
　⇒Ａ．疑似要素はダメ
⇒疑似クラスもダメ


selectorを評価する時に読み込み、コンパイルする
速度差の確認：WebKITのPerfomancedで確認できる。

まとめ



おまけ

各種撮影会 javaさんとmonsterさんから出たjavaさんのツーショット IMAG0213
本当はsaneyuki_s師匠が撮影しているショットも有りましたが、 本人の許可を取っていないので差し控えますｗ
お約束のふぉくすけ
IMAG0220
IMAG0221
IMAG0222