前端性能優化
css,js的加載與執行
javascript是單線程的javascript
一個網站在瀏覽器是如何進行渲染的呢?css
html頁面加載渲染的過程
html
html渲染過程的一些特色
css阻塞
- css head中阻塞頁面的渲染
- css阻塞js的執行
- css不阻塞外部腳本的加載
js阻塞
- 直接引入的js阻塞頁面的渲染
- js不阻塞資源的加載
- js順序執行,阻塞後續js邏輯的執行
依賴關係
- 頁面渲染依賴於css的加載
- js的執行順序的依賴關係
- js邏輯對於DOM節點的依賴關係
js引入方式
- 直接引入
- defer
- async
- 異步動態引入js
加載和執行的一些優勢
- css樣式表置頂
- 用link代替import
- js腳本置地
- 合理使用js的異步加載能力
可使用Chrome瀏覽器的performance工具分析頁面的加載過程前端