【js基礎】之頁面加載、性能優化

1.頁面加載

1. 加載一個資源的過程

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

2. 瀏覽器渲染頁面的過程

   • 根據 HTML 結構生成 DOM Tree
   • 根據 CSS 生成 CSSOM
   • 將 DOM 和 CSSOM 整合成 RenderTree
   • 根據 RenderTree 開始渲染和展現
   • 遇到 <script> 時，會執行並阻塞渲染
3. window.onload 和 DOMContentLoaded 的區別

window.addEventListener('load',function(){
    // 頁面的所有資源加載完纔會執行，包括圖片、視頻等。
})

document.addEventListener('DOMContentLoaded',function{
    // DOM 渲染完便可執行，此時圖片、視頻可能尚未加載完。
})

2.性能優化

1. 加載資源優化

   • 靜態資源的壓縮合並
   • 靜態資源緩存
   • 使用 CDN 讓資源加載更快
   • 使用 SSR(server side rendering) 後端渲染，數據直接輸出到 HTML 中

2. 渲染優化

   • CSS 放在前面，JS 放後面
   • 懶加載（圖片懶加載、下拉加載更多）
   • 減小 DOM 查詢，對 DOM 查詢做緩存
   • 減小 DOM 操做，多個操做盡可能合併在一塊兒執行（document.createDocumentFragment()）
   • 事件節流（keyup時調用查詢，只查詢最後一次）
   • 儘早執行操做（如DOMContentLoaded）