> 學習目標，了解 Request 跟 Response 與整個瀏覽器運作原理

Source : [Brendan Fortuner](https://medium.com/@bfortuner/how-web-applications-work-4424c6fb175a)

* Client v.s. Server
Server - 提供服務的伺服器。port 80通常是HTTP的連接埠，port 443則為HTTPS的連接埠。
Client - 呈現 server 所傳來的資訊，並提供使用者本地服務的程式

* 域名解析
輸入一個網址，要如何找到正確的地址去要資料回來，這時候就要透過DNS 轉成ip ，DNS 會去詢問Name Server (分三種)
* root ( root Name Server)
* .tw ( tld Name Server)
* .com ( Authoritative Name Server)

查詢方式分: 1. Recursive（遞迴式） 2. Iterative（交談式）

* 網路請求
透過TCP/IP 三方交握取的資訊。
[Source ](https://w3c.hexschool.com/blog/8d691e4f)
[其他參考資訊](https://w3c.hexschool.com/blog/8d691e4f)

* 瀏覽器渲染
* HTML解析會變成DOM Tree
* CSS 解析完會變成 CSSOM Tree
* Javascript腳本文件加載後，通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree

* 總結 :

[Source](https://w3c.hexschool.com/blog/8d691e4f)

* 何謂localhost 127.0.0.1 , 192.168.X.X/172.X.X
localhost 就是指自己正在使用的電腦的位址，你也可以用 127.0.0.1 (保留IP地址)來代替。不管是 localhost 或是 127.0.0.1 ，指的都是自己的電腦，是不能把它發到網絡接口的。
IP 是10.0.0.0 – 10.255.255.255、172.16.0.0 – 172.31.255.255、192.168.0.0 – 192.168.255.255 這樣的 IP 稱為私用位址(private address)，只有在同一區網內的電腦才能連得到。

* 為甚麼會有CROS?
首先得先知道 同源政策 (Same Origin Policy)，是網站安全的基礎。 https://domain-a.com 只能存取自己網站裡的資源 (圖片、影片、程式碼等)，不允許網站 https://domain-b.com 來存取。想要存取跨來源資源必須在某些特定情況下才被允許。
[Source](https://medium.com/starbugs/%E5%BC%84%E6%87%82%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-same-origin-policy-%E8%88%87%E8%B7%A8%E7%B6%B2%E5%9F%9F-cors-e2e5c1a53a19)

在某些情況下跨來源是被允許的，不受同源策略限制
* 跨來源嵌入通常被允許 (embed)
像範例<script src=”…”></script>、<link rel=”stylesheet” href=”…”>、iframe、圖片 img、video 或是 @font-face object 、 embed.等等
* 跨來源寫入通常被允許 (writes)
* 跨來源讀取通常被禁止 (reads)
不能讀取 domain-b.com 的 cookie、XMLHttpRequest ，Fetch API 也都無法被讀取，會回報錯誤