1. 程式人生 > >前端效能優化---4.css、js 的載入與執行

前端效能優化---4.css、js 的載入與執行

1.一個網站在瀏覽器端是如何進行渲染的呢?

這裡寫圖片描述
1.我們輸入網址向伺服器傳送請求,伺服器會返回一個html的文件,
2.該html文件會被瀏覽器中的html解析器解析
3.從上到下一步一步的生成DOM樹
4.在生成DOM的過程中會解析css資源,生成css樹
5.解析js資源,由瀏覽器的v8引起進一步解析
6.css樹和DOM樹結合形成Render Tree
6.渲染出頁面

2.HTML渲染過程的一些特點

2.1順序執行、併發載入

從上向下,從外向內執行的html,
html中會引入很多的外部資源,這些外部資源都是併發載入的,所以一般會設定3,4個CDN域名,以防止阻塞

2.2是否阻塞

css:
css head中阻塞頁面的渲染
css阻塞js的執行
css不阻塞外部指令碼的載入

js:
直接引入的js阻塞頁面的渲染
js不阻塞資源的載入
js順序執行,阻塞後續js邏輯的執行

2.3依賴關係

頁面渲染依賴於css的載入
js的執行順序的依賴關係
js邏輯對於dom節點的依賴關係

2.4引入方式

直接引入
defer
async
非同步動態引入js(需要的時候再引入)