性能優化-css，js的加載與執行

前端性能優化

css，js的加載與執行

javascript是單線程的

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

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工具分析頁面的加載過程