從輸入URL到頁面展示發生了什麼
- DNS域名解析：將域名解析爲ip地址
- TCP連接：三次握手
- 發送HTTP請求
- 服務器處理請求並返回HTTP報文
- 瀏覽器解析渲染頁面
- TCP連接斷開：四次揮手
服務器處理請求階段的具體過程：
首先瀏覽器發送過來的請求先經過控制器，控制器進行邏輯處理和請求分發，接着會調用模型，這一階段模型會獲取 redis db 以及 MySQL 的數據，獲取數據後將渲染好的頁面，響應信息會以響應報文的形式返回給客戶端，最後瀏覽器通過渲染引擎將網頁呈現在用戶面前
瀏覽器解析渲染頁面的具體過程：
- 根據HTML解析出DOM樹
根據HTML的內容，將標籤按照結構解析成DOM樹，在生成DOM樹時採用深度遍歷，在構建DOM樹的過程中如果遇到js腳本，會暫停DOM樹的構建，直到js腳本執行完 - 根據CSS生成CSS規則樹
在構建CSS規則樹時js執行會暫停，在CSS規則樹構建完成之前瀏覽器不會進行渲染。 - 根據DOM樹和CSS規則樹，生成渲染樹
當DOM樹和CSS規則樹構建好之後，瀏覽器纔會開始構建渲染樹。精簡CSS可以加快CSS規則樹的生成速度，從而加快頁面的響應速度。 - 根據渲染樹計算每一個節點的信息
計算出節點的位置和尺寸，進行佈局，在佈局完成後，如果有某部分發生的變化影響了佈局，就要倒回去重新渲染（重排/迴流）。 - 根據計算好的信息繪製頁面
前端性能優化
減少請求數量
文件合併、圖片處理（雪碧圖、使用字體圖標代替圖片）、減少重定向（如果一定要使用就使用永久重定向301）、使用緩存（強緩存或者協商緩存）、不使用css@import、避免使用空的src和href
減小資源大小
壓縮（html、css、js、圖片）、使用webp格式的圖片、開啓GZIP
優化網絡連接
使用CDN、使用DNS預解析（DNS Prefetch）、並行連接、持久連接、管道化連接
優化資源加載
資源加載的位置（css在head中，js在body底部，先外鏈後本頁）、資源加載的時機（異步script標籤，模塊按需加載，使用資源預加載preload和資源預讀取prefetch，使用資源懶加載）