詳解關(guān)于html，css，js三者的加載順序問題
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css" rel="external nofollow" > <script src="js/*.js></script> </head>
DOM文檔的加載順序是由上而下的順序加載；
1、DOM加載到link標(biāo)簽
css文件的加載是與DOM的加載并行的，也就是說，css在加載時(shí)Dom還在繼續(xù)加載構(gòu)建，而過程中遇到的css樣式或者img，則會向服務(wù)器發(fā)送一個(gè)請求，待資源返回后，將其添加到dom中的相對應(yīng)位置中；
2、DOM加載到script標(biāo)簽
由于js文件不會與DOM并行加載，因此需要等待js整個(gè)文件加載完之后才能繼續(xù)DOM的加載，倘若js腳本文件過大，則可能導(dǎo)致瀏覽器頁面顯示滯后，出現(xiàn)“假死”狀態(tài)，這種效應(yīng)稱之為“阻塞效應(yīng)”；會導(dǎo)致出現(xiàn)非常不好的用戶體驗(yàn)；
而這個(gè)特性也是為什么在js文件中開頭需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是讓DOM文檔加載完成之后才執(zhí)行js文件，這樣才不會出現(xiàn)查找不到DOM節(jié)點(diǎn)等問題；
js阻塞其他資源的加載的原因是：瀏覽器為了防止js修改DOM樹，需要重新構(gòu)建DOM樹的情況出現(xiàn)；
3、解決方法
前提，js是外部腳本；
在script標(biāo)簽中添加 defer=“ture”，則會讓js與DOM并行加載，待頁面加載完成后再執(zhí)行js文件，這樣則不存在阻塞；
在scirpt標(biāo)簽中添加 async=“ture”，這個(gè)屬性告訴瀏覽器該js文件是異步加載執(zhí)行的，也就是不依賴于其他js和css，也就是說無法保證js文件的加載順序，但是同樣有與DOM并行加載的效果；
同時(shí)使用defer和async屬性時(shí)，defer屬性會失效；
可以將scirpt標(biāo)簽放在body標(biāo)簽之后，這樣就不會出現(xiàn)加載的沖突了。
以上所述是小編給大家介紹的關(guān)于html，css，js三者的加載順序問題詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript中this指向的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
js中常用的4種模糊查詢詳解(includes()、indexOf()、search()、match())
這篇文章主要給大家介紹了關(guān)于js中常用的4種模糊查詢(includes()、indexOf()、search()、match())的相關(guān)資料,搜索可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品,所以模糊查詢和下拉匹配也成了前端必備的一個(gè)小技能,需要的朋友可以參考下2023-11-11
Whatever:hover 無需javascript讓IE支持豐富偽類
絕大部分現(xiàn)代瀏覽器支持 css 中的 :hover 偽類選擇器，可以用于所有 html 元素。2010-06-06
Threejs與Tween.js結(jié)合創(chuàng)建動(dòng)畫的詳細(xì)圖文教程
three.js和tween.js可以一起使用,實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果,包括飛線動(dòng)畫,這篇文章主要給大家介紹了關(guān)于Threejs與Tween.js結(jié)合創(chuàng)建動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2024-01-01
Javascript中匿名函數(shù)的調(diào)用與寫法實(shí)例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
IE與firefox下Dhtml的一些區(qū)別小結(jié)
IE與Mozilla下Dhtml的一些區(qū)別小結(jié)2009-12-12
JS實(shí)現(xiàn)進(jìn)度條順滑版詳細(xì)方案
最近在小程序里，做了一個(gè)類似微博刷視頻的需求，其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條，在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑，而后想查查網(wǎng)上看有沒有什么好的方案，但最終沒找到合適的。下面給大家分享JS進(jìn)度條順滑版實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
一般情況下，使用 “=” 可以實(shí)現(xiàn)賦值。但對于數(shù)組、對象、函數(shù)等這些引用類型的數(shù)據(jù)，這個(gè)符號就不好使了。這篇文章主要介紹了JavaScript 數(shù)組的深度復(fù)制解析的相關(guān)資料,需要的朋友可以參考下2016-11-11
input標(biāo)簽內(nèi)容改變的觸發(fā)事件介紹
onchange事件在內(nèi)容改變（兩次內(nèi)容有可能相等）且失去焦點(diǎn)時(shí)觸發(fā)；onpropertychange事件是實(shí)時(shí)觸發(fā)，每增加或刪除一個(gè)字符就會觸發(fā)2014-06-06
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10