JS 會阻塞后續(xù) DOM 解析以及其它資源(如 CSS,JS 或圖片資源)的加載。CSS不阻塞DOM的加載和解析(它只阻塞DOM的渲染呈現。這里談加載),不會阻塞其它資源(如圖片)的加載,但是會阻塞 后續(xù)JS 文件的執(zhí)行(原因之一是,js執(zhí)行代碼可能會依賴到css樣式。css只阻塞執(zhí)行而不阻塞js的加載)。鑒于上面的特性,當css后面存在js的時候,css會間接地阻塞js后面資源的加載(css阻塞js,js阻塞其他資源 )。現代瀏覽器會進行 prefetch 優(yōu)化,瀏覽器在獲得 html 文檔之后會對頁面上引用的資源進行提前下載
外聯js文件使用defer屬性和asyn可以達到異步非阻塞加載的效果,由于現代瀏覽器都存在 prefetch,所以 defer, async 可能并沒有太多的用途,可以作為了解擴展知識,僅僅將腳本文件放到 body 底部(但還是在之前)就可以起到很不錯的優(yōu)化效果(遵循先解析再渲染再執(zhí)行script這個順序)。當把js放在最后的時候,其實瀏覽器將自動忽略標簽,從而自動在最后的最后補上。
瀏覽器解析
1、瀏覽器通過請求的 URL 進行域名解析,向服務器發(fā)起請求,接收文件(HTML、CSS、JS、Images等等)。2、HTML 文件加載后,開始構建 DOM Tree(DOM樹)3、CSS 樣式文件加載后,開始解析和構建 CSS Rule Tree4、Javascript 腳本文件加載后, 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree
瀏覽器渲染
1、瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree(渲染樹)2、布局階段——在屏幕上繪制渲染樹中的所有節(jié)點的幾何屬性,比如: 位置,寬高,大小等等,這個過程稱為 Flow 或 Layout 。3、繪制元素——繪制所有節(jié)點的可視屬性。4、合并渲染層——把以上繪制的所有圖層(類似于PhotoShop中的“圖層”)合并,最終輸出一張圖片