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