1.從輸入url到得到html的詳細過程

• 瀏覽器根據DNS伺服器得到域名的IP地址
• 向這個IP的機器傳送http請求
• 伺服器收到、處理並返回請求
• 瀏覽器得到返回的內容

2.window.onload和DOMContentLoaded的區別

window.addEventListener('load',function(){
    // 頁面全部資源載入完才會執行，包括圖片、視訊等
})
window.addEventListener('DOMContentLoaded',function(){
    // DOM渲染完即可執行，此時圖片、視訊還沒載入完
})

對於第一點，首先要明白幾點：

• 載入資源的形式
  1.輸入url（或跳轉頁面）載入html，比如輸入網址跳轉至頁面
  2.載入html的靜態資源，比如<script>、<img>、<link>等載入資源
• 載入一個資源的過程
  1.瀏覽器根據DNS伺服器得到域名的IP地址
  2.向這個IP的機器傳送http(s)請求
  3.伺服器收到，處理並返回http請求，比如返回圖片或html程式碼等
  4.瀏覽器得到返回內容
• 瀏覽器渲染頁面的過程
  1.根據HTML結構生產DOM Tree（只是一個DOM結構，沒有樣式）
  2.根據CSS生產CSSOM(CSS Object model)（只是一個樣式結構）
  3.將DOM和CSSOM整合
  成RenderTree(渲染樹)
  4.根據RenderTree開始渲染和展示
  5.遇到<script>時，會執行並阻塞渲染(遇到JS會阻塞渲染，因為JS有權利改變DOM結構，所以得規定先後順序)

思考：為何要把css放在head中？

如果不把css放在head中，會導致多次渲染，嚴重影響使用者體驗同時會損耗效能。CSS一定要放在head中，等body裡面的東西出來前就要載入完.