$30 off During Our Annual Pro Sale. View Details »

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

Edward Fox
April 28, 2017
Programming
3
2.1k

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

See All by Edward Fox
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
32
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
330
Repro basketball club
edwardkenfox
0
95
Introduction to UX Optimizer
edwardkenfox
0
45
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
190
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
83
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
230
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
810
window.windowとは何か / What is window window
edwardkenfox
1
150

Other Decks in Programming

See All in Programming
JavaScript Testing Framework: Under the Hood(JSConfJP2022)
yoshiaki_togami
0
1.2k
KubeCon + CNCon Europe 2022 Recap ~ Istio Today and Tomorrow: Sidecars and Beyond
ksudate
0
120
Javaの入門が終わったら何の勉強をすればいいの？ / what should we study after language
kishida
5
28k
ぱっと見犬猫っぽいAWSアーキテクチャ図を Amazon Rekognitionで判定しよう
kzkmaeda
0
250
Hands-on Native ESM @ JSConf JP 2022
qnighy
0
2.3k
OMO Package of App Unity
appunity
0
430
Isolated Development
vrallev
0
290
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
40k
Rust meets Mobile
smileykeith
0
180
RuboCop Under a Microscope
koic
8
1.2k
How To 脆弱性対応
cmkomuro
0
270
LintオタクによるLint解説 / Introduction to Lints
orgachem
20
5.7k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Happy Clients
brianwarren
89
5.7k
Documentation Writing (for coders)
carmenintech
49
2.8k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Pencils Down: Stop Designing & Start Developing
hursman
113
10k
Three Pipe Problems
jasonvnalue
89
8.8k
Docker and Python
trallard
27
1.8k
How to train your dragon (web standard)
notwaldorf
64
4.1k
The Invisible Customer
myddelton
111
12k
In The Pink: A Labor of Love
frogandcode
132
21k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Web development in the modern age
philhawksworth
197
9.5k

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/