後端與前端的差異


Posted by 小小碼農 on 2021-04-17

前端

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

  • 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 文件構建渲染樹,瀏覽器開始佈局渲染樹並繪製到屏幕上,生成我們所看到的網頁內容


#back-end #Front-End







Related Posts

指令啟動專案

指令啟動專案

那些年不懂的JS - Scope 範疇

那些年不懂的JS - Scope 範疇

版本控制 - GitHub實作

版本控制 - GitHub實作


Comments