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
   

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. WebKitͷιʔείʔυ֓؍
   

   View Slide

10. LayoutTests
    

    View Slide

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

    View Slide

12. 1. DOM
    

    View Slide

13. LayoutTests/dom/level2/core/
    setAttributeNS10.html
    

    View Slide

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

    View Slide

15. ϒϥ΢βͰ։͘
    

    View Slide

16. SUCCESS!
    

    View Slide

17. 2. Security
    

    View Slide

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

    View Slide

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

    View Slide

20. ϒϥ΢βͰ։͘
    

    View Slide

21. PASS!
    

    View Slide

22. 3. Performance #1
    

    View Slide

23. LayoutTests/perf/array-nested-
    loop.html
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

28. 2. Performance #2
    

    View Slide

29. LayoutTests/perf/document-
    contains.html
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

33. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. ͓·͚
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide