後端與前端的差異

前端

將資料呈現給使用者，搜集使用者資料的部分，前端怎麼做，會直接影響使用者體驗，餐廳比喻就是前台依據客人需求點菜，準備交給內場

• HTML, CSS, JavaScript
• 頁面互動、資料溝通，網頁上寫的程式，一定都是 JavaScript

後端

儲存、處理資料和實作服務功能的部分，後端服務通常不會直接跟使用者接觸到，最重要大概是保障資料，確保服務穩定且正確，餐廳比喻就是內場收到訂單要出餐

假設我今天去 Google 首頁搜尋框打上：JavaScript 並且按下 Enter，請說出從這一刻開始到我看到搜尋結果為止發生在背後的事情。

1. 首先進到 Google 首頁

要進入首頁，就會先透過「 https://www.google.com 」向 DNS server 詢問他的 IP 位置，在得到 Google IP 位置後就會跳轉到 Google 首頁

• https://www.google.com/ ： 網址稱為 URL ，有點像網路世界的門牌地址，網路中要訪問所有資源都是透過 URL 當作路徑去取得內容
• google.com ： 就是他的網域，通常會取一個相關且好記的名稱
• IP 位置 ：網路世界中，分配給使用網際協定裝置的數字標籤，代表主機的地址，具有唯一性，像 Google 的實際位置就是「 172.217.27.132 」，透過名字（網域）和地址（ URL ）去找到喜歡的人的電話號碼（ IP ）
• DNS : 查詢 Domain Name 和 IP 對應資料的伺服器

這邊重點： 藉由地址 ( URL ) 跟名字 ( 網域 ) ，去找到喜歡的人的電話號碼 ( IP )

2. 在首頁搜尋框輸入關鍵字

按下 Enter 後，輸入的「 JavaScript 」字串會被處理成 HTTP 請求格式 （ request ），發送給瀏覽器，瀏覽器收到客戶端的 request 後，傳送給 Google 網頁所在的伺服器

3. 後端處理請求

而 Google 後端伺服器收到使用者發出的 request 後，會以使用者想要的請求去後端資料庫進行搜尋，之後會將搜索結果回報給後端伺服器，後端伺服器會處理成和前端約定的格式回傳到前端伺服器 ( response )

• 若使用者有登入且使用無痕模式， Google 後端將不會將該筆搜尋紀錄存取到用戶的歷史搜尋

4. 前端將處理好的 HTML ，交給瀏覽器處理

前端伺服器將 response 處理成 HTML 字符串格式，傳給瀏覽器，瀏覽器解析 HTML 文件構建 DOM 樹，接著解析 CSS 文件構建渲染樹，瀏覽器開始佈局渲染樹並繪製到屏幕上，生成我們所看到的網頁內容