JavaScript 檔案載入方式

admin發表於2019-04-21
JavaScript

本文只介紹不借助於其他相關輔助工具的情況下JavaScript檔案載入的相關問題。

頁面中如果有較多或較為龐大的JavaScript檔案載入，那麼必須要考慮到效能問題。

否則可能在有些情況下會導致頁面顯示之後，影響使用者體驗。

一.阻塞現象：

在預設沒有設定其他屬性的情況下，在<head>標籤內引入外部JavaScript檔案會產生阻塞現象。

在載入與執行JavaScript程式碼的時候，其後的DOM元素的解析會被阻塞，這會延遲頁面的顯示。

如果JavaScript檔案比較龐大或者執行時間較長的話，會嚴重影響使用者體驗。

其實也很好理解，如果JavaScript載入執行與DOM解析同步進行的話，可能會產生衝突。

比如DOM已經解析渲染完畢，但是JavaScript程式碼可能會對其進行操作，這就相當於要做重複工作。

二.採用非同步載入：

如果不考慮低版本瀏覽器，那麼只要給<script>標籤新增async屬性即可實現。

這樣就實現了JavaScript檔案的非同步載入效果，不影響DOM元素的解析渲染，所以體驗會更好。

如果要相容低版本瀏覽器，比如可以使用require.js等實現非同步載入，本文不對其做詳細介紹。

還有一種比較常見的方式，就是將引入程式碼置於body底部，並且最好帶上async屬性。

雖然在老舊瀏覽器中並不是非同步載入，但是其位於底部，減小了阻塞的影響。

帶上async的好處是，當DOM解析器發現<script>引入標籤後，會採用非同步載入，不會影響CSSDOM的生成。

但是CSSDOM的生成過程會阻塞JavaScript程式碼的執行，所以程式碼的執行在CSSDOM之後。

三.程式碼例項：

上面都是純理論的介紹，下面通過程式碼例項簡單的演示一下。

非常的簡單，可能大家都在其他例項程式碼中見過響應的應用方式。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
 <title>螞蟻部落</title>
</head>
<body>
  <!-- body goes here -->
  
  <script src="main.js" async></script>
</body>
</html>

將JavaScript檔案的引入放入body的最底部，這樣的會前面DOM的解析等受影響降到最低。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="main.js" async></script>
</head>
<body>
  <!-- body goes here -->
</body>
</html>

上述程式碼在現代瀏覽器中非常適用，關於async可以參閱async與defer 屬性一章節。

相關文章