前端性能優化 --- css和js的裝載與執行

前端性能優化學習筆記三

一個網站在瀏覽器端是如何進行渲染的呢?

這裏寫圖片描述

HTML渲染過程的一些特點

順序執行、併發加載

用戶輸入網址(假設是個html頁面,並且是第一次訪問),瀏覽器向服務器發出請求,服務器返回html文件,瀏覽器根據詞法分析從上往下解析html
發現<head>標籤內有一個<link>標籤引用外部CSS文件,瀏覽器又發出CSS文件的請求,服務器返回這個CSS文件。
發現<body>標籤內有一個<img>標籤引用外部圖片文件,瀏覽器又發出圖片文件的請求,服務器返回這個圖片文件。
發現<body>標籤內有一個<src>標籤引用外部JS文件,瀏覽器又發出JS文件的請求,服務器返回這個JS文件。
併發上限各瀏覽器有差異,chrome爲5個

css阻塞

css head中阻塞頁面的渲染
css阻塞js的執行
css不阻塞外部腳本的加載

js阻塞

直接引入的js阻塞頁面的渲染
js不阻塞資源的加載
js順序執行,阻塞後續js邏輯的執行

依賴關係

頁面渲染依賴於css的加載
js的執行順序的依賴關係
js邏輯對於dom節點的依賴關係

js引入方式

直接引入
defer
async
異步動態引入js

加載和執行的一些優化點

css 樣式表置頂
用 link 代替 import
js 腳本置底
合理使用 js 的異步加載能力

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章