javascript腳本加載

時間 2019-11-17

原文原文鏈接

一、延遲腳本javascript

腳本會被延遲到整個頁面都解析完畢後再運行。html

1 <!DOCTYPE html>
2 <html>
3 <head> 
4 <script type="text/javascript" defer="defer" src="test1.js"></script>
5 <script type="text/javascript" defer="defer" src="test2.js"></script>
6 </head>
7 <body>
8 </body>
9 </html>

其中包含的腳本要延遲到瀏覽器遇到</html>標籤後再執行。html5規範中要求延遲腳本按照他們出現的前後順序執行，可是，現實中並不是這樣，因此，咱們編程時最好包含一個延遲腳本。爲了更好的兼容瀏覽器，將延遲腳本放在頁面底部仍然是最好的選擇html5

二、異步腳本java

這是html5屬性，應該當即下載腳本，但不妨礙頁面其餘工做，建議異步腳本不要在頁面加載期間修改DOM編程

<!DOCTYPE html>
<html>
<head> 
<script type="text/javascript" async src="test1.js"></script>
<script type="text/javascript" async src="test2.js"></script>
</head>
<body>
</body>
</html>

標記爲async的腳本不保證按照他們出現的前後順序執行瀏覽器

三、建立script，插入到DOM中，加載完畢後callBackapp

 1 var script = document.createElement_x("script") 
 2 script.type = "text/javascript"; 
 3 if (script.readyState){ //IE 
 4 script.onreadystatechange = function(){ 
 5 if (script.readyState == "loaded" || 
 6 script.readyState == "complete"){ 
 7 script.onreadystatechange = null; 
 8 callback(); 
 9 } 
10 }; 
11 } else { //Others: Firefox, Safari, Chrome, and Opera 
12 script.onload = function(){ 
13 callback(); 
14 }; 
15 } 

16 document.body.appendChild(script);

四、同步加載缺點異步

默認狀況javascript是同步加載的，也就是javascript的加載時阻塞的，後面的元素要等待javascript加載完畢後才能進行再加載，對於一些意義不是很大的javascript，若是放在頁頭會致使加載很慢的話，是會嚴重影響用戶體驗的async

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。