加載資源的形式
- 輸入url(跳轉(zhuǎn)頁面) 加載html
- 加載html的靜態(tài)資源
- 瀏覽器根據(jù)DNS服務(wù)器得到域名的ip地址
- 向這個ip的機器發(fā)送http/https請求
- 服務(wù)器收到處理返回http請求
- 瀏覽器得到返回的內(nèi)容
瀏覽器渲染頁面的過程
- 根據(jù)html結(jié)構(gòu)生成Dom樹
- 根據(jù)css生成cssom
- 將Dom和cssom整合形成Render樹
- 根據(jù)render樹開始渲染和展示
- 遇到<script>時會執(zhí)行并阻塞渲染
windows.onload
頁面全部資源加載完才會執(zhí)行，包括圖片、視頻
DOMContentLoaded
dom渲染完加載執(zhí)行，不管其他資源
性能優(yōu)化
原則：
- 多使用內(nèi)存、緩存或者其他方法
- 減少cpu計算，較少的網(wǎng)絡(luò)請求
前端性能優(yōu)化著手點
- 加載頁面和靜態(tài)資源
- 靜態(tài)資源的壓縮合并
- 靜態(tài)資源的緩存
- 使用cdn讓資源加載更快
- 使用ssr服務(wù)器端渲染，數(shù)據(jù)直接輸出到html中
- 頁面渲染
- css放在前面，js放后面
- 懶加載（圖片懶加載，下拉加載更多）
- 減少dom查詢，對dom查詢做緩存
- 減少dom操作，多個操縱盡量合并在一起執(zhí)行
- 事件節(jié)流
- 盡早執(zhí)行操作如DOMContentLoaded
