這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
網路拉取資源是多執行緒的，但是dom樹的操作都是在一個執行緒中的，所以網頁資源的決議、js加載、dom樹渲染都是一個執行緒執行，所以就會執行緒任務就會相互搶占，先來先執行，而當瀏覽器加載html檔案時，會自上而下加載，我們先看一下下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <style> #app { width: 100px; height: 100px; background-color: red; } </style> <script> alert('代碼的script'); </script> // alert('src的script'); <script src="https://www.cnblogs.com/smileZAZ/archive/2023/02/20/test.js"></script> </head> <body> <div id="app"></div> </body> </html>由于html檔案的加載自上而下的，所以不管傳入的腳本script是代碼還是鏈接，都是先寫先加載，可能我們會問問什么style沒有加載，不是沒有加載，而是已經決議并加載了，因為對css進行決議會
生成cssom規則樹，然后需要結合DOM樹構建渲染樹，而我們的dom元素是命名在body標簽中定義，由于當前決議的是head標簽，這階段還沒有渲染dom，所以一般在html中操作dom的時機都是在body中的，
在上面例子，我們有沒有發現在決議html檔案程序中，但執行script腳本之前是不是有一段時間在加載，其實是在加載link資源，也就是css資源，等css資源執行完畢后才會執行后面script，這就是
CSS阻塞，這里阻塞了其后面的js陳述句的執行，
而style標簽引入的樣式是不會阻塞瀏覽器渲染也不會阻塞DOM決議，但是可能會出現閃屏現象（使用transition影片時）， 上面只是在head標簽中引入樣式，如果是在body標簽中引入樣式，css是否也會阻塞？
-
在link引入前后定義DOM元素：css加載會阻塞后面DOM元素的渲染，以及前面元素的css樣式渲染，
<body>
<button >test1</button>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div>test2</div>
</body>
-
在link引入前后引入腳本：在link引入樣式前執行腳本，在link引入樣式后執行版本，我們會發現link會阻塞后面腳本的執行，需要等css資源加載完畢才會執行，
我們都知道在html中加載資源除了css，還有js資源加載，既然看了有CSS資源加載阻塞，是不是也有js阻塞？是的，script引入與使用分為兩種方式：head中引入、body中引入，
-
在head標簽中引入script：如果是head中引入腳本是不能直接操作DOM渲染，因為DOM還沒有加載與渲染，那么有辦法可以解決嗎？其實是有的，使用
defer（延遲執行，等DOM決議完成再執行JS腳本）和async（異步執行，保證DOM樹和JS腳本并行執行），
<head>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/02/20/a.js" defer></script>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/02/20/a.js" async></script>
</head>
- 在body標簽中引入script： 當引入的script腳本后下載并決議完成后，才去加載后面DOM元素，但是script腳本不會影響腳本執行前的DOM元素渲染，所以一般把所有腳本都會丟到
</body>前，
<body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <div>test</div> </body>
所以一般是把引入式（鏈接）放在head標簽內，行內式一般是放在body內，
本文轉載于:
https://juejin.cn/post/7199994978977120316
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544493.html
標籤：其他