javascript中延迟加载的7种方法实现

更新时间：2025年01月13日 11:10:55 作者：baoeni

在web前端开发中,性能优化一直是一个非常重要的话题,JavaScript中延迟加载的方式有很多种,本文就来介绍了javascript中延迟加载的7种方法实现,具有一定的参考价值,感兴趣的可以了解一下

1. DOM

head append script tag

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

<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里面。

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

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

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 属性(缺点是不能控制加载的顺序)

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

到此这篇关于javascript中延迟加载的7种方法实现的文章就介绍到这了,更多相关javascript 延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js用正则表达式筛选年月日的实例方法
在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法，对此有兴趣的朋友们可以学习下。
2021-01-01
老生常谈遮罩层滚动条的问题
小编遇到的问题是在弹出层后面的遮罩层，因为有滚动条，导致滚动条下面不可视区域没有遮罩层。下面就为大家介绍一下解决方法
2016-04-04
js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）
这篇文章主要为大家详细介绍了QQ面板拖拽效果，探秘慕课网DOM事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
基于Electron实现桌面应用开发代码实例
这篇文章主要介绍了基于Electron实现桌面应用开发代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
JavaScript中new操作符使用详解
new操作符是JavaScript中创建对象实例的重要方式,理解new操作符的工作原理对于掌握JavaScript的面向对象编程至关重要,本文将详细介绍new操作符的原理及实现,感兴趣的小伙伴跟着小编一起来看看吧
2024-11-11
JavaScript实现PC端横向轮播图
这篇文章主要为大家详细介绍了JavaScript实现PC端横向轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
JavaScript实现楼层效果
这篇文章主要为大家详细介绍了JavaScript实现楼层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
在knockoutjs 上自己实现的flux(实例讲解)
下面小编就为大家分享一篇在knockoutjs 上自己实现的flux方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
js打造数组转json函数
这里给大家分享的是一段使用js实现数组转换成json的函数代码，代码简洁易懂，并附上了使用方法，小伙伴们拿去试试。
2015-01-01
JS重载实现方法分析
这篇文章主要介绍了JS重载实现方法,结合实例形式分析了javascript重载的实现与使用方法,需要的朋友可以参考下
2016-12-12