博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 延迟加载的几种方法
阅读量:6680 次
发布时间:2019-06-25

本文共 1481 字,大约阅读时间需要 4 分钟。

1. defer 属性

HTML 4.01 为 <script>标签定义了 defer属性。
用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性,等于告诉浏览器立即下载,但延迟执行。

<!DOCTYPE html>

<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
说明:虽然<script> 元素放在了<head>元素中,但包含的脚本将延迟浏览器遇到</html>标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中,延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2. 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一样,都不会阻塞其他资源下载,所以不会影响页面的加载。
缺点:不能控制加载的顺序

3.动态创建DOM方式

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload",downloadJSAtOnload);
else
window.onload =downloadJSAtOnload;
</script>
4.使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数
console.log("脚本加载完成")
});
5.使用setTimeout延迟方法
6.让JS最后加载
把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

转载于:https://www.cnblogs.com/blueball/p/10565983.html

你可能感兴趣的文章
linux技术手册
查看>>
jquery的验证formValidator
查看>>
poj 其他
查看>>
UNIX epoch -- 为什么UNIX的时间起始于1970.01.01
查看>>
推荐10个HTML5游戏网站
查看>>
ios中的动画
查看>>
在pcDuino实现AP–wifi热点共享
查看>>
mysql实时记录客户端提交的sql语句
查看>>
多线程学习笔记(五)
查看>>
pyspider爬虫学习-教程3-Render-with-PhantomJS.md
查看>>
107个常用Javascript语句
查看>>
关联表更新
查看>>
Java递归拷贝文件夹
查看>>
从Java到C++——从union到VARIANT与CComVariant的深层剖析
查看>>
java使用jeids实现redis2.6的list操作(3)
查看>>
Android简单框架会用到的基类(2)
查看>>
flask sqlalchemy多个外键引用同张表报错sqlalchemy.exc.AmbiguousForeignKeysError
查看>>
在 CentOS6 上安装 Python 2 & 3
查看>>
svnserver配置文件详解
查看>>
Mybatis之动态SQL语句
查看>>