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

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Ͱ͸ ͜Μͳ࿩Λͤͯ͞΋Β͍· ͨ͠

4. None

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/