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

前端性能優化

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

相關文章
相關標籤/搜索