---
# System prepended metadata

title: 網站基礎
tags: [學習心得, web]

---


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

![image alt](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*bxJMihQHmBCrLLCjCOTPZA.png)
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 三方交握取的資訊。
    ![image alt](https://w3c.hexschool.com/img/63ei5f.jpg)
    [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

* 總結 :

![image alt](https://w3c.hexschool.com/img/154386m.jpg)
[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 來存取。想要存取跨來源資源必須在某些特定情況下才被允許。
    ![image alt](https://miro.medium.com/v2/resize:fit:640/format:webp/1*2OD4i1N4B7aPDzZGRMEi8Q.png)
    [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 也都無法被讀取，會回報錯誤

    



