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

Meguro.es x Gotanda.js #1 in Drecom

https://meguroes.connpass.com/event/49543/

Transcript

1. JSerͷͨΊͷ ϒϥ΢βίʔυϦʔσΟϯά ʢςετฤʣ EDWARD FOX @Meguro.es x Gotanda.js #1 2017/04/28
2. Edward Fox - Developer @ Repro Inc. - RoR, JavaScript, AWS - Vue.js, HTTP/2, WebAssembly
3. લճͷMeguro.esͰ͸ ͜Μͳ࿩Λͤͯ͞΋Β͍· ͨ͠
5. ϒϥ΢βͷΠϯεϖΫλʹ console.logͱೖྗͨ͠಺༰ ͕࣮ࡍʹදࣔ͞ΕΔ·Ͱ
6. ࠓճ͸΋͏ͪΐ͍ ࣮ફతͳ࿩Λ͠·͢
7. 1. ຊ൪؀ڥͰΤϥʔ͕ى͖ͨ 2. ௐࠪͯ͠΋શવΘ͔ΒΜ 3. WebKitͷϦϙδτϦͰgrep 4. ςετίʔυʹώοτͨ͠
8. ςετίʔυΛಡΜͰ͍͘ͱ ৭ʑͱֶͼ͕͋ͬͨͷͰ ͍͔ͭ͘Λ঺հ
9. WebKitͷιʔείʔυ֓؍
10. LayoutTests
11. 1. DOM 2. Security 3. Performance #1 4. Performance #2
12. 1. DOM
13. LayoutTests/dom/level2/core/ setAttributeNS10.html
14. ظ଴͢Δಈ࡞: > setAttributeʹෆਖ਼ͳจࣈ ྻΛ౉͢ͱ InvalidCharacterError͕ ্͕Δ͜ͱ
15. ϒϥ΢βͰ։͘
16. SUCCESS!
17. 2. Security
18. LayoutTests/security/ contentSecurityPolicy/image- with-blob-url-blocked-by-img- src-star.html
19. ظ଴͢Δಈ࡞: > ϖʔδʹ”image-src *”ͷ CSPϔομ͕ଘࡏ͢Δ৔߹ɺ blob URLΛ௨ͯ͡࡞੒͞Εͨ ը૾ͷಡΈࠐΈ͕ ϒϩοΫ͞ΕΔ͜ͱ
20. ϒϥ΢βͰ։͘
21. PASS!
22. 3. Performance #1
23. LayoutTests/perf/array-nested- loop.html
24. ظ଴͢Δಈ࡞: > ωετ͞Εͨ഑ྻͷ ܁Γฦ͠ॲཧͷ࣌ؒܭࢉྔ͕ O(n^2)Ͱ૿Ճ͢Δ͜ͱ
25. 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
26. ͸͡Ίͷํ͸਺஋͕҆ఆ ͠ͳ͍͕ɺ16Ҏ߱͸ظ଴ ௨ΓͷύϑΥʔϚϯεྼԽ͕ ݟΒΕΔ
27. ҆ఆ͠ͳ͍ཧ༝: ϒϥ΢βͷJITίϯύΠϧʹ ͷ͔ͬΔ·Ͱͷϥάʁ ʢৄ͍͠ਓڭ͍͑ͯͩ͘͞ʣ
28. 2. Performance #2
29. LayoutTests/perf/document- contains.html
30. ظ଴͢Δಈ࡞: > document.contains() ͷ ࣌ؒܭࢉྔ͕O(1)Ͱ͋Δ͜ͱ
31. 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
32. ΍͸Γ͸͡Ί͸ෆ҆ఆ͕ͩɺ 16͘Β͍͔Β͸Ұఆͷ਺஋Λ อ͍ͬͯΔ
33. ·ͱΊ
34. Undocumentedͳ࢓༷΍ڍಈ Ͱ͋ͬͯ΋ɺϒϥ΢βͷ ςετίʔυ͸ ͪΌΜͱ͋ͬͨΓ͢Δ
35. => ࢓༷͚ͩͰ͸ͳ͘ɺ ࣮૷ʹ΋ͱͮ͘ڍಈ͕ ཧղͰ͖Δ
36. ϑΝΠϧ໊΋આ໌తͰɺ HTML/JSͰॻ͔Ε͍ͯΔͷͰ ࠶ݱ΋؆୯
37. => ϒϥ΢βͷςετίʔυ ΛಡΜͰ͍͘͜ͱͰɺ JavaScriptΛॻ͘ਓؒʹ ͱͬͯ΋ֶͼ͕͋Δ
38. ͓·͚
39. WebKit͸ϦϙδτϦશମͰ 27ສ΋ϑΝΠϧ͕͋ΔͷͰ grepͳͲ͕ΠνΠνਏ͍
40. - git status: 1-2෼ - git grep: 10෼ऑ
41. ରࡦ1: ιʔείʔυΛ෦෼తʹ μ΢ϯϩʔυ͢Δ
42. ରࡦ2: maxvodesͱ͍͏ Χʔωϧύϥϝʔλͷ஋Λ ্͛Δ
43. edwardkenfox.com/blog/ browser-test-code-for-jsers/