Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Meguro.es x Gotanda.js #1 in Drecom

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

Edward Fox

April 28, 2017
Tweet

More Decks by Edward Fox

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ϒϥ΢βͰ։͘

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ϒϥ΢βͰ։͘

    View full-size slide

  16. 3. Performance #1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 2. Performance #2

    View full-size slide

  23. LayoutTests/perf/document-
    contains.html

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide