前端性能優化
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工具分析頁面的加載程序
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/89990.html
標籤:其他
上一篇:性能優化-圖片優化
下一篇:性能分析-重繪與回流
