JSerのための
ブラウザコードリーディング
（テスト編）
EDWARD FOX
@Meguro.es x Gotanda.js #1 2017/04/28

Edward Fox
- Developer @ Repro Inc.
- RoR, JavaScript, AWS
- Vue.js, HTTP/2, WebAssembly

前回のMeguro.esでは
こんな話をさせてもらいま
した

ブラウザのインスペクタに
console.logと入力した内容
が実際に表示されるまで

今回はもうちょい
実践的な話をします

1. 本番環境でエラーが起きた
2. 調査しても全然わからん
3. WebKitのリポジトリでgrep
4. テストコードにヒットした

テストコードを読んでいくと
色々と学びがあったので
いくつかを紹介

WebKitのソースコード概観

LayoutTests

1. DOM
2. Security
3. Performance #1
4. Performance #2

1. DOM

LayoutTests/dom/level2/core/
setAttributeNS10.html

期待する動作:
> setAttributeに不正な文字
列を渡すと
InvalidCharacterErrorが
上がること

ブラウザで開く

SUCCESS!

2. Security

LayoutTests/security/
contentSecurityPolicy/image-
with-blob-url-blocked-by-img-
src-star.html

期待する動作:
> ページに”image-src *”の
CSPヘッダが存在する場合、
blob URLを通じて作成された
画像の読み込みが
ブロックされること

ブラウザで開く

PASS!

3. Performance #1

LayoutTests/perf/array-nested-
loop.html

期待する動作:
> ネストされた配列の
繰り返し処理の時間計算量が
O(n^2)で増加すること

magnitude iterations
2
112352
4
52595
8
118454
16
75968
32
27994
64
7237
128
2277
256
699
512
186
1024
47
2048
12
4096
4

はじめの方は数値が安定
しないが、16以降は期待
通りのパフォーマンス劣化が
見られる

安定しない理由:
ブラウザのJITコンパイルに
のっかるまでのラグ？
（詳しい人教えてください）

2. Performance #2

LayoutTests/perf/document-
contains.html

期待する動作:
> document.contains() の
時間計算量がO(1)であること

magnitude iterations
2
70107
4
59787
8
95958
16
129782
32
128047
64
130236
128
140427
256
122163
512
115772
1024
130717
2048
117249
4096
138466

やはりはじめは不安定だが、
16くらいからは一定の数値を
保っている

まとめ

Undocumentedな仕様や挙動
であっても、ブラウザの
テストコードは
ちゃんとあったりする

=> 仕様だけではなく、
実装にもとづく挙動が
理解できる

ファイル名も説明的で、
HTML/JSで書かれているので
再現も簡単

=> ブラウザのテストコード
を読んでいくことで、
JavaScriptを書く人間に
とっても学びがある

おまけ

WebKitはリポジトリ全体で
27万もファイルがあるので
grepなどがイチイチ辛い

- git status: 1-2分
- git grep: 10分弱

対策1:
ソースコードを部分的に
ダウンロードする

対策2:
maxvodesという
カーネルパラメータの値を
上げる

edwardkenfox.com/blog/
browser-test-code-for-jsers/