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

Transcript

1. 1.

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

2. 2.

   Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,

   AWS - Vue.js, HTTP/2, WebAssembly
3. 3.

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

4. 4.

   None
5. 5.

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

6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

   WebKitͷιʔείʔυ֓؍

10. 10.

    LayoutTests

11. 11.

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

12. 12.

    1. DOM

13. 13.

    LayoutTests/dom/level2/core/ setAttributeNS10.html

14. 14.

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

15. 15.

    ϒϥ΢βͰ։͘

16. 16.

    SUCCESS!

17. 17.

    2. Security

18. 18.

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

19. 19.

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

20. 20.

    ϒϥ΢βͰ։͘

21. 21.

    PASS!

22. 22.

    3. Performance #1

23. 23.

    LayoutTests/perf/array-nested- loop.html

24. 24.

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

25. 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. 26.

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

27. 27.

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

28. 28.

    2. Performance #2

29. 29.

    LayoutTests/perf/document- contains.html

30. 30.

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

31. 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. 32.

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

33. 33.

    ·ͱΊ

34. 34.

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

35. 35.

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

36. 36.

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

37. 37.

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

38. 38.

    ͓·͚

39. 39.

    WebKit͸ϦϙδτϦશମͰ 27ສ΋ϑΝΠϧ͕͋ΔͷͰ grepͳͲ͕ΠνΠνਏ͍

40. 40.

    - git status: 1-2෼ - git grep: 10෼ऑ

41. 41.

    ରࡦ1: ιʔείʔυΛ෦෼తʹ μ΢ϯϩʔυ͢Δ

42. 42.

    ରࡦ2: maxvodesͱ͍͏ Χʔωϧύϥϝʔλͷ஋Λ ্͛Δ

43. 43.

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