您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“html,css,js三者的加載順序是什么”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“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)加載的沖突了。
以上是“html,css,js三者的加載順序是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。