javascript中延迟加载的7种方法实现
更新时间：2025年01月13日 11:10:55 作者：baoeni
在web前端开发中,性能优化一直是一个非常重要的话题,JavaScript中延迟加载的方式有很多种,本文就来介绍了javascript中延迟加载的7种方法实现,具有一定的参考价值,感兴趣的可以了解一下
延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：
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 如果改变span标签的是否隐藏属性,大家根据需要选择使用。2011-10-10
这篇文章主要介绍了WEEX环境搭建与入门详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
JavaScript中this指向的问题是面试中常常会问到的，所以本文就来通过一些简单的示例为大家详细讲讲，文中的示例代码讲解详细，需要的可以参考一下2023-04-04
这篇文章主要为大家详细介绍了js实现右键菜单栏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS实现移动端触屏拖拽功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了详解async/await 异步应用的常用场景，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
随着Nodev7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await,这篇文章主要给大家介绍了关于对async/await的理解和用法,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了javascript实现去除HTML标签的方法,涉及javascript正则替换相关操作技巧,需要的朋友可以参考下2016-12-12
这里给大家分享的是本人近期学习与使用javascript之后总结出来的一些经验和心得，虽然目前只有5点，但以后会慢慢更新，希望对大家能有所帮助。2015-01-01
我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。2011-08-08
最新评论