前端
將資料呈現給使用者,搜集使用者資料的部分,前端怎麼做,會直接影響使用者體驗,餐廳比喻就是前台依據客人需求點菜,準備交給內場
- 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 文件構建渲染樹,瀏覽器開始佈局渲染樹並繪製到屏幕上,生成我們所看到的網頁內容