關於html,css,js三者的加載順序問題


<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/*.css">
    <script src="js/*.js></script>
</head>

DOM文檔的加載順序是由上而下的順序加載;

1、DOM加載到link標簽

css文件的加載是與DOM的加載並行的,也就是說,css在加載時Dom還在繼續加載構建,而過程中遇到的css樣式或者img,則會向服務器發送一個請求,待資源返回后,將其添加到dom中的相對應位置中;

2、DOM加載到script標簽

由於js文件不會與DOM並行加載,因此需要等待js整個文件加載完之后才能繼續DOM的加載,倘若js腳本文件過大,則可能導致瀏覽器頁面顯示滯后,出現“假死”狀態,這種效應稱之為“阻塞效應”;會導致出現非常不好的用戶體驗;

而這個特性也是為什么在js文件中開頭需要$(document).ready(function(){})或者(function(){})或者window.onload,即是讓DOM文檔加載完成之后才執行js文件,這樣才不會出現查找不到DOM節點等問題;

js阻塞其他資源的加載的原因是:瀏覽器為了防止js修改DOM樹,需要重新構建DOM樹的情況出現;

3、解決方法

前提,js是外部腳本;

在script標簽中添加 defer=“ture”,則會讓js與DOM並行加載,待頁面加載完成后再執行js文件,這樣則不存在阻塞;

在scirpt標簽中添加 async=“ture”,這個屬性告訴瀏覽器該js文件是異步加載執行的,也就是不依賴於其他js和css,也就是說無法保證js文件的加載順序,但是同樣有與DOM並行加載的效果;

同時使用defer和async屬性時,defer屬性會失效;

可以將scirpt標簽放在body標簽之后,這樣就不會出現加載的沖突了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM