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
Web Architecture
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Inndy
May 11, 2016
Technology
430
0
Share
Web Architecture
那些在瀏覽器背後發生的大小事情
Inndy
May 11, 2016
More Decks by Inndy
See All by Inndy
工程師一定要懂的 Text Encoding
inndy
1
770
資訊安全:麻瓜的黑魔法防禦術
inndy
3
3.1k
HackmeCTF 平台背後的心酸血淚史
inndy
2
870
COSCUP 2018 Lightning Talk - 審稿好難,所以我們來寫程式吧
inndy
0
500
逆向工程:從入門到放棄
inndy
7
3.6k
HITCON 2017 Zeroday 發表會
inndy
0
1.4k
No More Crypto Fails
inndy
34
8.3k
你再共用密碼啊
inndy
1
790
CTF From Zero To One
inndy
5
5.3k
Other Decks in Technology
See All in Technology
イベントストーミングとKiroの仕様駆動開発で実現する要件の認識合わせプロセス
syobochim
7
1k
Diagnosing performance problems without the guesswork
elenatanasoiu
0
130
オンコールの負荷軽減のためのBits Assistant 活用方法 / How to Use Bits Assistant to Reduce the Workload on On-Call Staff
sms_tech
1
360
PHP と TypeScript の型システム比較:AI 時代の「型」は誰のためにあるのか? #frontend_phpcon_do / frontend_phpcon_do_2026
shogogg
1
220
エンジニアは生成AIと どのように向き合うべきか? ことばの意味という観点から
verypluming
3
310
組織の中で自分を経営する技術
shoota
0
230
Spring Boot における AOT Cache 活用テクニックと 起動時間改善事例
ntt_dsol_java
0
180
Sony_KMP_Journey_KotlinConf2026
sony
1
190
Platform engineering for developers, architects & the rest of us (AI agents)
danielbryantuk
0
160
A Harness for Behaviour: how to get AI to generate code that does what we intend, or "TDD in the age of AI"
xpmatteo
1
530
GoとSIMDとWasmの今。
askua
2
420
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.8k
Featured
See All Featured
Marketing to machines
jonoalderson
1
5.3k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
180
Site-Speed That Sticks
csswizardry
13
1.2k
Building AI with AI
inesmontani
PRO
1
1k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.3k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
260
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.5k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.5k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
190
The SEO identity crisis: Don't let AI make you average
varn
0
480
Leo the Paperboy
mayatellez
7
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Transcript
WEB ARCHITECTURE NTUST CODING CLUB
WEB ARCHITECTURE OUTLINE ▸ Server & Client ▸ HTTP? ▸
ೲӥ Enter ԏ盅咳ኞጱԪ ▸ 蝢懱㶧ਧ ▸ 礚፡ HTTP 獉
֑๐瑊 / ਮ䜛ᒒ Ӟ獤傶ԫ
CLIENT SERVER ———— 翕᪠蝫娄 ————
WEB ARCHITECTURE ਮ䜛ᒒ ▸ ֦ጱ倵薩瑊 ▸ 礓㮆 App ҁֺই物Facebook҂ ▸
curl, netcatҁLinux 瞲犤҂ ▸ request ҁNodeJS ጱ HTTP client library҂
WEB ARCHITECTURE ֑๐瑊 ▸ Apache ▸ LAMP — Linux /
Apache / MySQL / PHP ▸ nginx ▸ 斕ᰁ玕ᘒӬ穉斃盠ጱ֑๐瑊 ▸ IIS ▸ 盏敟ڊߝ牧砇蟴 ASP.NET 螀֢ࣁ Windows Ӥ
HTTP?
HYPER TEXT TRANSFER PROTOCOL HTTP WEB ARCHITECTURE
ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐
None
None
None
奾牐
WEB ARCHITECTURE ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 ▸ DNS 礚扇 ▸ 翕࣎旉矦౮
IP ֖࣎ ▸ TCP 蝫娄 ▸ ݻ֑๐瑊咳蚏 TCP 蝫娄ᥝ穩 ▸ ୌ缏 HTTP 藶穩㪔Ӭ蝑ڊ ▸ 虏౯㮉㬵፡፡ HTTP ጱ獉牦 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTURE ▸ Routing ▸ 䲆礯䌘䛑 / 碝ᄤጱ敟誢᪠ኧ ▸ Controller
/ Script / CGI ▸ ݢ胼ฎӞ㮆 php 䲆礯牧犖ݢ胼ฎ NodeJS ጱ纷ୗ ▸ 蜴ࢧ HTTP ࢧ䛑妔ਮ䜛ᒒ ▸ 匍ࣁ֦ݢ犥፡ک Google Ḓ殷ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧ֑๐瑊ਠ౮ጱ
WEB ARCHITECTURE ▸ 倵薩瑊ӥ斉ٌ犢虻碘 (瑽粙, CSS, ...) ▸ 叨ኞๅग़ጱ HTTP
藶穩 ▸ HTML 礕砻樄ত向ڊ翕殷 ▸ JavaScript 砻樄ত᪒ JavaScript 纷ୗ ▸ 匍ࣁ֦ݢ犥ࣁ Facebook Ӥ咳䔂ԧ牦 ᮎ犚ࣁೲӥ ENTER ԏ盅咳ኞጱԪ眐 蝡犚Ԫ眐᮷ฎኧਮ䜛ᒒਠ౮ጱ
WEB ARCHITECTURE HTTP 藶穩 GET / HTTP/1.1\r\n Host: localhost\r\n Accept:
text/html\r\n \r\n
WEB ARCHITECTURE HTTP/1.1 200 OK\r\n Content-Length: 45\r\n Content-Type: text/html\r\n \r\n
<html><body><h1>Hello, Web</h1></body></html> HTTP ࢧ䛑