筆記、前後端基礎概念

| 手機、電腦，架構都是相似的

QA時間：從你輸入Google.com，到看到畫面，發生了甚麼事情?

• (Q1) Google.com 是哪裡?
• (A1) 網路世界的地址為 IP 位置，由四個數字組成，範圍從 0 ~ 255，如:8.8.8.8。每台主機都有一個IP位置，電腦溝通是用IP位置；域名 (Domain) 即網址，比起 IP 位置好讀且好記，如 : google.com，人溝通通常用域名。
• 說明 : DNS (Domain Name System)，將域名轉成 IP 位置。
  
  

一、前後端簡化版

• You send request to server, and server stores it to DB. After storing successfully, server sends response to you.
  

二、前後端基本版

• 事實上，並不是你送出請求，而是你指揮瀏覽器送出請求。After storing successfully, server sends response to you. 更細部的看，這裡的response，是html格式的檔案，透過瀏覽器顯示成人眼可閱讀的形式。
  

三、前後端完整版

• 準確地說，並不是瀏覽器送出request，而是瀏覽器請作業系統送出request，作業系統請硬體(網路卡)送出request，網路卡再對server送出請求 After storing successfully, server sends response to hardware, hardware sends response to operation system, operation system sends response to browser, and browser sends response to you.
  
  Note : 看的到的部分，為前端；server在處理的部分，為後端。
  

前端(瀏覽器)

• HTML 為內容、 CSS 為網頁裝飾、 JS 為與頁面的互動

request發到網路，會先經過 DNS SERVER， DNS 會回傳要發到的網路位置。 關於「把網域（domain）轉換成 IP 位置」這件事，我們把它稱之為 DNS 解析（resolve DNS）。 因為 「DNS Server」 要解析，所以直接用 IP 位置來表示，以避免雞生蛋、蛋生雞的問題。(假設這個 DNS server 的位置是：dns.a.com 好了，那我要發 request 去 google.com，就要先去問 dns.a.com，可是我要知道怎麼去 dns.a.com，又要問 dns.a.com)

後端

• BE request 更複雜，就會是系統架構。如:當我的 DB 壞了，SERVER 可以連去哪裡?
  

Google 首頁搜尋框打上：JavaScript 並且按下 Enter，請說出從這一刻開始到我看到搜尋結果為止發生在背後的事情( 作業檢討 W1 )

陽春版

1. 瀏覽器送出關鍵字「JavaScript」到 Google 的 Server
2. Google server 去資料庫查詢關鍵字，並且取得搜尋結果
   3.Google server 把搜尋結果回傳
   4.瀏覽器顯示搜尋結果

套入 DNS SERVER 概念，修正版(一)

假設我們電腦使用的是 Google 的 DNS

1. 瀏覽器送出關鍵字「JavaScript」到 Google 的 Server
2. 去 DNS Server（8.8.8.8）問說 google.com 在哪裡
3. DNS Server（8.8.8.8） 回傳 172.217.160.78
4. 瀏覽器發送 request 給 172.217.160.78
5. Google server 收到資料，去資料庫查詢關鍵字，並且取得搜尋結果
6. Google server 把搜尋結果回傳
7. 瀏覽器顯示搜尋結果

釐清 DNS 解析的負責人 ，修正版(二)

首先呢，以 Chrome 來說，基本上很多程式碼都是用 C 語言寫成的，而 C 語言裡面有提供一些函式，例如說：gethostbyname、getaddrinfo或是getnameinfo，就是讓你來拿到 domain 相關的資訊。

所以當我們在瀏覽器輸入 google.com 按下 enter 的時候，瀏覽器會呼叫這些程式碼並且傳入 google.com，然後 C 語言會去呼叫作業系統的東西，送出 request 然後去 DNS Server 查詢資料，再把結果回傳給瀏覽器。

先以瀏覽器為例，瀏覽器有自己的 DNS Cache。所以假設你要問的網址已經在瀏覽器的 DNS Cache 裡了，那就不會再問一次，瀏覽器就會直接知道說 Request 要發到哪個 IP 位置。Cache 如果有資料我們叫做 Hit，沒有的話叫做 Miss。

而作業系統也有自己的 DNS Cache，如果瀏覽器的快取 miss 了，就會去看作業系統的 Cache，hit 的話就把結果傳回去，一樣不會去問 DNS Server。但如果作業系統的也 miss 了，就會真的發 request 去 DNS Server，問說到底這個網域是對應到哪個 IP 位置

1. 瀏覽器送出關鍵字「JavaScript」到 google.com
2. 瀏覽器檢查 dns cache 有沒有 google.com
   有的話直接發送 request 給那個位置
   沒有的話呼叫 C 語言提供的 function（例如說 gethostbyname）
3. C 語言呼叫作業系統
4. 作業系統檢查 dns cache 有沒有 google.com
   有的話直接回傳位置
   沒有的話去 DNS Server（8.8.8.8）問說 google.com 在哪裡
5. DNS Server（8.8.8.8）回傳 172.217.160.78
6. 瀏覽器發送 request 給 172.217.160.78
7. Google server 收到資料，去資料庫查詢關鍵字，並且取得搜尋結果
8. Google server 把搜尋結果回傳
9. 瀏覽器顯示搜尋結果