一個網(wǎng)站在瀏覽器端是如何進行渲染的?
主要步驟就是圖片上這些步驟.
我們知道在html頁面中把css 文件放到用link 方式放到header 里邊, 把js 文件放到body結(jié)束之前. 這樣可以提高網(wǎng)頁的加載效率. 之前是知道需要這么寫,但是為什么需要這么寫 ? 深入理解瀏覽器端渲染的過程會理解這么寫的原理.
順序執(zhí)行梧税、并發(fā)加載(我們都知道瀏覽器解析html dom按照順序執(zhí)行,從上到下,類似于iterator.next() , html可能引入很多css 和js 資源, 這些資源是并發(fā)加載, 對于單個域名, 并發(fā)度是有限的. 需要設(shè)置 3-4 個CDN域名. 防止一個CDN達到瀏覽器并發(fā)上線)
是否阻塞 (css加載是否阻塞js加載 , css加載是否阻塞js執(zhí)行.....)
-
依賴關(guān)系 (html中的依賴關(guān)系, 比如頁面有時候閃一下 ,dom加載完畢,但是css 沒有加載完畢, 樣式從無到有這樣有一個閃一下的效果, 如果css 放到header中, 等待cssom 加載之后 生成樹 和dom 一起生成renderTree 這樣就不會有閃過的問題.....
js的執(zhí)行順序, js 的加載有兩個關(guān)鍵字. defer 和asyn
這兩個區(qū)別: defer 本身就是延遲,推遲的意思 ,待到文檔解析完成慷荔，腳本才會執(zhí)行.
async就是異步的意思,async是異步下載并立即執(zhí)行搭幻，然后文檔繼續(xù)解析.
總結(jié)一下就是: 如果不用這兩個關(guān)鍵字,那么瀏覽器遇到script 標簽就會停止html的解析, 開始下載腳本并執(zhí)行腳本. 如果腳本不依賴于任何腳本逝撬，并不被任何腳本依賴，那么則使用 defer)
image.png
看一下什么時候defer 和 asyn 運行
defer 是在DOMContentLoaded之前執(zhí)行
image.png 引入方式 (css 可以用link 或者import 引入, import 會打斷并行加載 這種方式不好.
或者在首頁里不需要把所有的js 資源加載下來. 懶加載的過程.)
瀏覽器遇到script 標簽的時候會停止文檔的解析, 所以為了盡快的把頁面呈現(xiàn)給用戶, 這里需要把js 代碼放到body結(jié)束的地方
css阻塞
- css head中阻塞頁面的渲染
- css阻塞js的執(zhí)行
- css不阻塞外部腳本的加載
怎么理解或者說怎么簡單得給記下來 ?
個人理解: 如有雷同,純屬巧合
css 和 html 分別生成tree.cssom 和 dom 然后進行render . css 理解為怎樣來加載dom, 因為css 會給dom 設(shè)置樣式. css 加載過程會阻塞頁面的渲染.把html 理解為畫筆在畫布上畫畫,css 就相當于調(diào)色板,你用畫筆沾了調(diào)色板里邊的顏料這樣才能畫. 如果你畫筆沒蘸顏料,寫不出來字,畫不出來畫, js 理解為橡皮擦 .可以擦掉你剛才畫的畫,
head中阻塞頁面的渲染 理解為畫筆蘸好了顏料才可以畫, 如果正在蘸就等著
css阻塞js的執(zhí)行 如果正在蘸顏料,時候還沒確定畫出來是什么樣子. 這時候你就橡皮擦給擦掉了 是不是不太好 ?
css不阻塞外部腳本的加載 可能你有顏料橡皮擦或者油料橡皮擦.橡皮擦可以有多個在同時準備準備著要擦,但是不能擦
js 阻塞
- 直接引入的js阻塞頁面的渲染
- js不阻塞資源的加載
- js順序執(zhí)行，阻塞后續(xù)js邏輯的執(zhí)行
還是畫畫的例子
直接引入的js阻塞頁面的渲染 畫了一半發(fā)現(xiàn),畫錯了 要擦掉,這時候就別畫了,反正要擦掉, 等著擦完了再畫吧.
js不阻塞資源的加載 你一直手在擦的時候不耽誤另一只手準備第二個橡皮擦
js順序執(zhí)行，阻塞后續(xù)js邏輯的執(zhí)行 這就好比 你吃火鍋的時候 紅油崩身上,是不是的服務(wù)員先弄個除油的給你噴好,你不能直接用水洗 , 噴好了之后你再用水洗 就洗掉了. 第一步 噴除油的 ,第二部 用水洗, 用水洗依賴于噴除油的,你不先除油 洗不掉.
這個實際中, 你用一些集成框架, 比如Jquery, 首先要先引入jquery 的包在工程里邊吧, 當然你還有自己基于Jquery寫的js 代碼在另一個文件里 . 因為瀏覽器是從上到下解析, 如果你先引入自己寫的這時候瀏覽器里邊還沒有jQuery代碼,就不對了
總體結(jié)合css 和js 哪里會阻塞 ?
四個地方:
1 最簡單的就是 一個js執(zhí)行 后邊跟一個js 執(zhí)行這個理解起來輕松一些
2: js 阻塞 頁面渲染, 需要等到橡皮擦擦完了才能接著畫
3: css 阻塞頁面渲染. 需要畫筆蘸了顏料之后才能畫.
4: css 阻塞js 的執(zhí)行: 蘸顏料的時候還沒畫,沒什么可擦的
css 和js 都有兩個阻塞.
