周末加班敲代碼的時用到了<script>標簽，突然想到了一個問題：別的自測專案里面<script>我把他放在了不同位置，這里應該會對代碼的執行與渲染后影響吧？于是今天專門進行了查詢，趁機總結以下：
html 檔案的解釋方式&順序：
預備知識：（需要簡單理解同步/異步的區別）
同步，是所有的操作都做完，才回傳給用戶結果，即寫完資料庫之后，在相應用戶，用戶體驗不好，
異步，不用等所有操作等做完，就相應用戶請求，即先相應用戶請求，然后慢慢去寫資料庫，用戶體驗較好，
- html檔案的執行，從上到下解釋
- 解釋程序中遇到 <link>,<img> 標簽就會異步進行加載/下載，然后繼續向下進行代碼的解釋
- 遇到<script> 標簽時情況相反，此時會開始同步請求JS檔案，然后逐句執行JS檔案中的代碼，知道所有代碼執行完再繼續進行html剩余代碼的解釋
<script>標簽引起的問題And位置的影響：
- 解決<script>同步執行導致html腳本解釋的阻塞問題：
- 方法一 => 將<script>放在<body>的最后一部分
- 給<script>標簽添加 defer 屬性；用法：
<script type="text/javascript"
defer="defer">
defer 作用：屬性規定是否對腳本執行進行延遲，直到頁面加載為止，（注意：局限于IE瀏覽器;詳細請參考=>請點擊這里）
當然也有缺點：就是如果多個JS腳本的時候沒法確定腳本的執行先后順序
- <script>位置的影響：
預備知識：（瀏覽器的作業流程）
決議html檔案成DOM樹 => 決議CSS生成CSSDOM樹 => CSSDOM樹和DOM樹結合形成Rending Tree => Layout => 渲染
- 將<script>放在<head></head>之間，使其在主頁和其他代碼之前預先裝載，可以實作例如：*.js 檔案的提前呼叫
- 將<script>放在<body></body>之間，則頁面加載后運行（注意放在<body></body>中的位置，這里推薦放在最后）
小結：
- 在head里面，所有的function函式只加載不執行，執行的話是在某件事觸發之后（如果有變數的初始化，會導致報錯）
- 在body里面直接加載并執行
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115135.html
標籤：Html/Css
上一篇：flex布局
下一篇：HTML入門基礎