前端效能優化 --- 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 的非同步載入能力
相關文章
- 前端效能優化：細說JavaScript的載入與執行前端優化JavaScript
- 前端效能優化（JS/CSS優化，SEO優化）前端優化JSCSS
- 前端css效能優化前端CSS優化
- js程式碼優化 提高執行效能JS優化
- Java 執行緒與同步的效能優化Java執行緒優化
- 效能優化之html、css、js三者的載入順序優化HTMLCSSJS
- javascript執行緒及與執行緒有關的效能優化JavaScript執行緒優化
- 前端效能優化—js程式碼打包前端優化JS
- 前端效能優化——延遲載入和非同步載入前端優化非同步
- 【前端效能優化】vue效能優化前端優化Vue
- 前端效能優化 --- 懶載入&預載入前端優化
- 【前端優化】js圖片懶載入及優化前端優化JS
- 前端效能優化原理與實踐前端優化
- sql語句執行順序與效能優化（1）SQL優化
- 前端優化系列 – JS混淆引入效能天坑前端優化JS
- 前端優化系列 - JS混淆引入效能天坑前端優化JS
- Javascript的裝載和執行JavaScript
- 前端效能優化前端優化
- 前端進階（12） – css 的弱化與 js 的強化前端CSSJS
- Cookbook：優化 Vue 元件的執行時效能優化Vue元件
- [web效能優化] - 使用線上工具對html、js、css進行壓縮Web優化HTMLJSCSS
- 前端效能優化的點前端優化
- [譯] JavaScript 是如何工作的：CSS 和 JS 動畫背後的原理 + 如何優化效能JavaScriptCSSJS動畫優化
- 前端效能優化 --- 圖片優化前端優化
- web前端效能優化Web前端優化
- 前端效能優化指南前端優化
- 前端效能優化整理前端優化
- css的載入會阻塞js執行嗎？為什麼？CSSJS
- CSS效能優化的8個技巧CSS優化
- CSS效能優化的幾個技巧CSS優化
- HTTP前端效能優化(壓縮與快取)HTTP前端優化快取
- Web程式效能優化——asm.js和WebAssemblyWeb優化ASMJS
- JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優化它們的效能JavaScriptCSSJS動畫優化
- js效能優化淺析JS優化
- 總結前端效能優化的方法前端優化
- 前端效能優化JavaScript篇前端優化JavaScript
- 前端效能優化總結前端優化
- 前端效能優化基礎前端優化