JS延迟加载的几种方法


首先来介绍一下<script>时能让脚本延迟和异步执行的两个属性:defer和async。

Defer、Async属性

  • defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body的效果。
  • async是HTML5新增的属性,IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载,也就是说当浏览器遇到async属性的<script>时浏览器加载css一样是异步加载的。

支持async属性的浏览器貌似没什么问题,但是defer属性在各个浏览器中支持程度有点不同。测试代码如下

<script type="text/javascript" defer>
    alert('defer')
</script>
<script type="text/javascript">
    alert('script')
</script>
<script type="text/javascript">
    window.onload = function(){
        alert('onload')
    }
</script>
        

延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载,一般有一下几个方法:

1. DOM

head append script tag

[javascript] view plain copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // reference to <head>    
  5.         var head = document.getElementsByTagName('head')[0];  
  6.   
  7.         // a new CSS    
  8.         var css = document.createElement('link');  
  9.         css.type = "text/css";  
  10.         css.rel = "stylesheet";  
  11.         css.href = "new.css";  
  12.   
  13.         // a new JS    
  14.         var js = document.createElement("script");  
  15.         js.type = "text/javascript";  
  16.         js.src = "new.js";  
  17.   
  18.         // preload JS and CSS    
  19.         head.appendChild(css);  
  20.         head.appendChild(js);  
  21.   
  22.         // preload image    
  23.         new Image().src = "new.png";  
  24.   
  25.     }, 1000);  
  26. };    
2. document.write

[javascript] view plain copy
  1. <script language="javascript" type="text/javascript">    
  2.     function include(script_filename) {    
  3.         document.write('<' + 'script');    
  4.         document.write(' language="javascript"');    
  5.         document.write(' type="text/javascript"');    
  6.         document.write(' src="' + script_filename + '">');    
  7.         document.write('</' + 'script' + '>');    
  8.     }    
  9.         
  10.     var which_script = '1.js';    
  11.     include(which_script);    
  12. </script>  
3. Iframe

 

和第一种类似,但是script tag是放到iframe的document里面。

[javascript] view plain copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // create new iframe    
  5.         var iframe = document.createElement('iframe');  
  6.         iframe.setAttribute("width""0");  
  7.         iframe.setAttribute("height""0");  
  8.         iframe.setAttribute("frameborder""0");  
  9.         iframe.setAttribute("name""preload");  
  10.         iframe.id = "preload";  
  11.         iframe.src = "about:blank";  
  12.         document.body.appendChild(iframe);  
  13.   
  14.         // gymnastics to get reference to the iframe document    
  15.         iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;  
  16.         var doc = iframe.document;  
  17.         doc.open(); doc.writeln("<html><body></body></html>"); doc.close();  
  18.   
  19.         // create CSS    
  20.         var css = doc.createElement('link');  
  21.         css.type = "text/css";  
  22.         css.rel = "stylesheet";  
  23.         css.href = "new.css";  
  24.   
  25.         // create JS    
  26.         var js = doc.createElement("script");  
  27.         js.type = "text/javascript";  
  28.         js.src = "new.js";  
  29.   
  30.         // preload CSS and JS    
  31.         doc.body.appendChild(css);  
  32.         doc.body.appendChild(js);  
  33.   
  34.         // preload IMG    
  35.         new Image().src = "new.png";  
  36.   
  37.     }, 1000);  
  38. };    

4. Iframe static page

 

直接把需要加载东西放到另一个页面中

[javascript] view plain copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // create a new frame and point to the URL of the static    
  5.         // page that has all components to preload    
  6.         var iframe = document.createElement('iframe');  
  7.         iframe.setAttribute("width""0");  
  8.         iframe.setAttribute("height""0");  
  9.         iframe.setAttribute("frameborder""0");  
  10.         iframe.src = "preloader.html";  
  11.         document.body.appendChild(iframe);  
  12.   
  13.     }, 1000);  
  14. };  

5. Ajax eval

用ajax下载代码,然后用eval执行

 

6. Ajax Injection

用ajax下载代码,建立一个空的script tag,设置text属性为下载的代码

 

7. async 属性(缺点是不能控制加载的顺序)

<script src="" async="true"/>

HTML5 为 <script>标签定义了 async属性。与defer属性类似,都用于改变处理脚本的行为。同样,只适用于外部脚本文件。 
目的:不让页面等待脚本下载和执行,从而异步加载页面其他内容

异步脚本一定会在页面 load 事件前执行。 
不能保证脚本会按顺序执行。

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>  

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载。 
缺点:不能控制加载的顺序


让JS最后加载

把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

 

参考:

http://www.phpied.com/the-art-and-craft-of-postload-preloads/ 

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

转自:http://www.cnblogs.com/human/archive/2013/11/12/3419724.html



Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值