Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSerのための ブラウザコードリーディング (テスト編)
Search
Edward Fox
April 28, 2017
Programming
3
2.4k
JSerのための ブラウザコードリーディング (テスト編)
Meguro.es x Gotanda.js #1 in Drecom
https://meguroes.connpass.com/event/49543/
Edward Fox
April 28, 2017
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
740
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
98
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Programming
See All in Programming
All About Angular's New Signal Forms
manfredsteyer
PRO
0
140
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Advance Your Career with Open Source
ivargrimstad
0
520
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Gamification - CAS2011
davidbonilla
81
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
How to Think Like a Performance Engineer
csswizardry
27
2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Ace a Technical Interview
jacobian
280
24k
Become a Pro
speakerdeck
PRO
29
5.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
It's Worth the Effort
3n
187
28k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
JSerͷͨΊͷ ϒϥβίʔυϦʔσΟϯά ʢςετฤʣ EDWARD FOX @Meguro.es x Gotanda.js #1 2017/04/28
Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,
AWS - Vue.js, HTTP/2, WebAssembly
લճͷMeguro.esͰ ͜ΜͳΛͤͯ͞Β͍· ͨ͠
None
ϒϥβͷΠϯεϖΫλʹ console.logͱೖྗͨ͠༰ ͕࣮ࡍʹදࣔ͞ΕΔ·Ͱ
ࠓճ͏ͪΐ͍ ࣮ફతͳΛ͠·͢
1. ຊ൪ڥͰΤϥʔ͕ى͖ͨ 2. ௐࠪͯ͠શવΘ͔ΒΜ 3. WebKitͷϦϙδτϦͰgrep 4. ςετίʔυʹώοτͨ͠
ςετίʔυΛಡΜͰ͍͘ͱ ৭ʑͱֶͼ͕͋ͬͨͷͰ ͍͔ͭ͘Λհ
WebKitͷιʔείʔυ֓؍
LayoutTests
1. DOM 2. Security 3. Performance #1 4. Performance #2
1. DOM
LayoutTests/dom/level2/core/ setAttributeNS10.html
ظ͢Δಈ࡞: > setAttributeʹෆਖ਼ͳจࣈ ྻΛ͢ͱ InvalidCharacterError͕ ্͕Δ͜ͱ
ϒϥβͰ։͘
SUCCESS!
2. Security
LayoutTests/security/ contentSecurityPolicy/image- with-blob-url-blocked-by-img- src-star.html
ظ͢Δಈ࡞: > ϖʔδʹ”image-src *”ͷ CSPϔομ͕ଘࡏ͢Δ߹ɺ blob URLΛ௨ͯ͡࡞͞Εͨ ը૾ͷಡΈࠐΈ͕ ϒϩοΫ͞ΕΔ͜ͱ
ϒϥβͰ։͘
PASS!
3. Performance #1
LayoutTests/perf/array-nested- loop.html
ظ͢Δಈ࡞: > ωετ͞Εͨྻͷ ܁Γฦ͠ॲཧͷ࣌ؒܭࢉྔ͕ O(n^2)Ͱ૿Ճ͢Δ͜ͱ
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
͡Ίͷํ͕҆ఆ ͠ͳ͍͕ɺ16Ҏ߱ظ ௨ΓͷύϑΥʔϚϯεྼԽ͕ ݟΒΕΔ
҆ఆ͠ͳ͍ཧ༝: ϒϥβͷJITίϯύΠϧʹ ͷ͔ͬΔ·Ͱͷϥάʁ ʢৄ͍͠ਓڭ͍͑ͯͩ͘͞ʣ
2. Performance #2
LayoutTests/perf/document- contains.html
ظ͢Δಈ࡞: > document.contains() ͷ ࣌ؒܭࢉྔ͕O(1)Ͱ͋Δ͜ͱ
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
Γ͡Ίෆ҆ఆ͕ͩɺ 16͘Β͍͔ΒҰఆͷΛ อ͍ͬͯΔ
·ͱΊ
Undocumentedͳ༷ڍಈ Ͱ͋ͬͯɺϒϥβͷ ςετίʔυ ͪΌΜͱ͋ͬͨΓ͢Δ
=> ༷͚ͩͰͳ͘ɺ ࣮ʹͱͮ͘ڍಈ͕ ཧղͰ͖Δ
ϑΝΠϧ໊આ໌తͰɺ HTML/JSͰॻ͔Ε͍ͯΔͷͰ ࠶ݱ؆୯
=> ϒϥβͷςετίʔυ ΛಡΜͰ͍͘͜ͱͰɺ JavaScriptΛॻ͘ਓؒʹ ͱֶͬͯͼ͕͋Δ
͓·͚
WebKitϦϙδτϦશମͰ 27ສϑΝΠϧ͕͋ΔͷͰ grepͳͲ͕ΠνΠνਏ͍
- git status: 1-2 - git grep: 10ऑ
ରࡦ1: ιʔείʔυΛ෦తʹ μϯϩʔυ͢Δ
ରࡦ2: maxvodesͱ͍͏ ΧʔωϧύϥϝʔλͷΛ ্͛Δ
edwardkenfox.com/blog/ browser-test-code-for-jsers/