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

browser_gazer

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

会の趣旨

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

・・・・なのに

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

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

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

3.モダンブラウザの抱える問題

4.Servo

tom_servo

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


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

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

6.IFRAME(CROSS ORIGIN)
7.COPY-ON-WRITE DOM
 DOMの変更点を接ぎ木していこうという思想

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

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

10.レイアウト計算:3-PASS
bubble-width(botttom up)
assign-width(top down)
assign-height(bottom up)


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

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

 BLOCK FORMAT CONTEXT
 検算をしていない⇒バグっている?!

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

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

14.SERVOの将来⇒


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

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

IMAG0207

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

2.ここのChronium Cast登場w
 Operaを音声だけで操作する。
 ⇒Open/Close出来る。
IMAG0203

IMAG0206

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

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

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

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

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

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

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

5.調査ツール
  aViewer:Windows
  DOM Inspector:Firefox

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

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

ネタで画像テロ?!
IMAG0208

では・・・・改めてw
IMAG0209

【メモ】
1.Motivation

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

2.CSS JITを高速化するテーマ

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

4.BackTrackingする場合にも関係する

5.Candidates become less
6.CSS Selctor JIT

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

IMAG0210

 Q.CSS Selectorでダメなものは?
 ⇒A.70~80%程度
 ⇒A.疑似要素はダメ
⇒疑似クラスもダメ

selectorを評価する時に読み込み、コンパイルする

速度差の確認:WebKITのPerfomancedで確認できる。

まとめ

おまけ

各種撮影会
javaさんとmonsterさんから出たjavaさんのツーショット
IMAG0213

本当はsaneyuki_s師匠が撮影しているショットも有りましたが、
本人の許可を取っていないので差し控えますw

お約束のふぉくすけ
IMAG0220

IMAG0221

IMAG0222

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です