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.3k
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
520
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
55
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
470
Repro basketball club
edwardkenfox
0
200
Introduction to UX Optimizer
edwardkenfox
0
76
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
240
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
100
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
310
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
980
Other Decks in Programming
See All in Programming
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
CSC307 Lecture 11
javiergs
PRO
0
240
CSC307 Lecture 10
javiergs
PRO
0
310
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
CSC307 Lecture 09
javiergs
PRO
1
500
英語
s_shimotori
1
220
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
RailsConf 2023
tenderlove
16
720
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Navigating Team Friction
lara
181
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
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/