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
710
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
92
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
100
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
440
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Programming
See All in Programming
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.3k
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
What's new in Adaptive Android development
fornewid
0
130
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
180
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
160
Jakarta EE Meets AI
ivargrimstad
0
460
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
新しいモバイルアプリ勉強会(仮)について
uetyo
1
230
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
20
9.7k
Reactの歴史を振り返る
tutinoko
1
150
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
KATA
mclloyd
31
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Scaling GitHub
holman
461
140k
A designer walks into a library…
pauljervisheath
207
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Facilitating Awesome Meetings
lara
54
6.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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/