JS延迟加载的几种方法

最新推荐文章于 2024-02-18 22:23:49 发布

打杂人

最新推荐文章于 2024-02-18 22:23:49 发布

阅读量4.2k

点赞数

Web 前端乱炖专栏收录该内容

341 篇文章 3 订阅

订阅专栏

首先来介绍一下<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
window.onload = function () {  
    setTimeout(function () {  
  
        // reference to <head>    
        var head = document.getElementsByTagName('head')[0];  
  
        // a new CSS    
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel = "stylesheet";  
        css.href = "new.css";  
  
        // a new JS    
        var js = document.createElement("script");  
        js.type = "text/javascript";  
        js.src = "new.js";  
  
        // preload JS and CSS    
        head.appendChild(css);  
        head.appendChild(js);  
  
        // preload image    
        new Image().src = "new.png";  
  
    }, 1000);  
};    

2. document.write

[javascript]view plain copy
<script language="javascript" type="text/javascript">    
    function include(script_filename) {    
        document.write('<' + 'script');    
        document.write(' language="javascript"');    
        document.write(' type="text/javascript"');    
        document.write(' src="' + script_filename + '">');    
        document.write('</' + 'script' + '>');    
    }    
        
    var which_script = '1.js';    
    include(which_script);    
</script>  

3. Iframe

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

[javascript]view plain copy
window.onload = function () {  
    setTimeout(function () {  
  
        // create new iframe    
        var iframe = document.createElement('iframe');  
        iframe.setAttribute("width", "0");  
        iframe.setAttribute("height", "0");  
        iframe.setAttribute("frameborder", "0");  
        iframe.setAttribute("name", "preload");  
        iframe.id = "preload";  
        iframe.src = "about:blank";  
        document.body.appendChild(iframe);  
  
        // gymnastics to get reference to the iframe document    
        iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;  
        var doc = iframe.document;  
        doc.open(); doc.writeln("<html><body></body></html>"); doc.close();  
  
        // create CSS    
        var css = doc.createElement('link');  
        css.type = "text/css";  
        css.rel = "stylesheet";  
        css.href = "new.css";  
  
        // create JS    
        var js = doc.createElement("script");  
        js.type = "text/javascript";  
        js.src = "new.js";  
  
        // preload CSS and JS    
        doc.body.appendChild(css);  
        doc.body.appendChild(js);  
  
        // preload IMG    
        new Image().src = "new.png";  
  
    }, 1000);  
};    

4. Iframe static page

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

[javascript]view plain copy
window.onload = function () {  
    setTimeout(function () {  
  
        // create a new frame and point to the URL of the static    
        // page that has all components to preload    
        var iframe = document.createElement('iframe');  
        iframe.setAttribute("width", "0");  
        iframe.setAttribute("height", "0");  
        iframe.setAttribute("frameborder", "0");  
        iframe.src = "preloader.html";  
        document.body.appendChild(iframe);  
  
    }, 1000);  
};  

5. Ajax eval

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

6. Ajax Injection

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

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

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

打杂人

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS延迟加载的几种方法

首先来介绍一下&lt;script&gt;时能让脚本延迟和异步执行的两个属性：defer和async。Defer、Async属性defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的&lt;script&gt;就类似于将&lt;script&gt;放在body的效果。async是HTML5新增的属性，...
复制链接

扫一扫