JSerのためのブラウザコードリーディング（テスト編）

by Edward Fox

Slide 1

Slide 1 text

JSerͷͨΊͷ ϒϥ΢βίʔυϦʔσΟϯά ʢςετฤʣ EDWARD FOX @Meguro.es x Gotanda.js #1 2017/04/28

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

લճͷMeguro.esͰ͸ ͜Μͳ࿩Λͤͯ͞΋Β͍· ͨ͠

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ϒϥ΢βͷΠϯεϖΫλʹ console.logͱೖྗͨ͠಺༰ ͕࣮ࡍʹදࣔ͞ΕΔ·Ͱ

Slide 6

Slide 6 text

ࠓճ͸΋͏ͪΐ͍ ࣮ફతͳ࿩Λ͠·͢

Slide 7

Slide 7 text

1. ຊ൪؀ڥͰΤϥʔ͕ى͖ͨ 2. ௐࠪͯ͠΋શવΘ͔ΒΜ 3. WebKitͷϦϙδτϦͰgrep 4. ςετίʔυʹώοτͨ͠

Slide 8

Slide 8 text

ςετίʔυΛಡΜͰ͍͘ͱ ৭ʑͱֶͼ͕͋ͬͨͷͰ ͍͔ͭ͘Λ঺հ

Slide 9

Slide 9 text

WebKitͷιʔείʔυ֓؍

Slide 10

Slide 10 text

LayoutTests

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

1. DOM

Slide 13

Slide 13 text

LayoutTests/dom/level2/core/ setAttributeNS10.html

Slide 14

Slide 14 text

ظ଴͢Δಈ࡞: > setAttributeʹෆਖ਼ͳจࣈ ྻΛ౉͢ͱ InvalidCharacterError͕ ্͕Δ͜ͱ

Slide 15

Slide 15 text

ϒϥ΢βͰ։͘

Slide 16

Slide 16 text

SUCCESS!

Slide 17

Slide 17 text

2. Security

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ظ଴͢Δಈ࡞: > ϖʔδʹ”image-src *”ͷ CSPϔομ͕ଘࡏ͢Δ৔߹ɺ blob URLΛ௨ͯ͡࡞੒͞Εͨ ը૾ͷಡΈࠐΈ͕ ϒϩοΫ͞ΕΔ͜ͱ

Slide 20

Slide 20 text

ϒϥ΢βͰ։͘

Slide 21

Slide 21 text

PASS!

Slide 22

Slide 22 text

3. Performance #1

Slide 23

Slide 23 text

LayoutTests/perf/array-nested- loop.html

Slide 24

Slide 24 text

ظ଴͢Δಈ࡞: > ωετ͞Εͨ഑ྻͷ ܁Γฦ͠ॲཧͷ࣌ؒܭࢉྔ͕ O(n^2)Ͱ૿Ճ͢Δ͜ͱ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

͸͡Ίͷํ͸਺஋͕҆ఆ ͠ͳ͍͕ɺ16Ҏ߱͸ظ଴ ௨ΓͷύϑΥʔϚϯεྼԽ͕ ݟΒΕΔ

Slide 27

Slide 27 text

҆ఆ͠ͳ͍ཧ༝: ϒϥ΢βͷJITίϯύΠϧʹ ͷ͔ͬΔ·Ͱͷϥάʁ ʢৄ͍͠ਓڭ͍͑ͯͩ͘͞ʣ

Slide 28

Slide 28 text

2. Performance #2

Slide 29

Slide 29 text

LayoutTests/perf/document- contains.html

Slide 30

Slide 30 text

ظ଴͢Δಈ࡞: > document.contains() ͷ ࣌ؒܭࢉྔ͕O(1)Ͱ͋Δ͜ͱ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

΍͸Γ͸͡Ί͸ෆ҆ఆ͕ͩɺ 16͘Β͍͔Β͸Ұఆͷ਺஋Λ อ͍ͬͯΔ

Slide 33

Slide 33 text

·ͱΊ

Slide 34

Slide 34 text

Undocumentedͳ࢓༷΍ڍಈ Ͱ͋ͬͯ΋ɺϒϥ΢βͷ ςετίʔυ͸ ͪΌΜͱ͋ͬͨΓ͢Δ

Slide 35

Slide 35 text

=> ࢓༷͚ͩͰ͸ͳ͘ɺ ࣮૷ʹ΋ͱͮ͘ڍಈ͕ ཧղͰ͖Δ

Slide 36

Slide 36 text

ϑΝΠϧ໊΋આ໌తͰɺ HTML/JSͰॻ͔Ε͍ͯΔͷͰ ࠶ݱ΋؆୯

Slide 37

Slide 37 text

=> ϒϥ΢βͷςετίʔυ ΛಡΜͰ͍͘͜ͱͰɺ JavaScriptΛॻ͘ਓؒʹ ͱͬͯ΋ֶͼ͕͋Δ