关于js延迟加载的几种方法

1.defer

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

<!DOCTYPE html>
<html>
<head>//浏览器会立即下载，但延迟执行。<script src="defer1.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

defer会在执行完成之后进行执行。defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2.async

目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。同样，只适用于外部脚本文件。

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

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

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

缺点：不能控制加载的顺序

3.动态创建DOM方式

我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

<script type="text/javascript">  function downloadJS() {  var element = document.createElement("script");  element.src = "test.js";  document.body.appendChild(element);  } //三种事件模型，DOM0,DOM2,IEif (window.addEventListener)  window.addEventListener("load",downloadJS, false);  else if (window.attachEvent)  window.attachEvent("onload",downloadJS);  else window.onload =downloadJS;
</script>

4.使用setTimeout延迟方法

setTimeout(function(){window.location.reload();
},3000);

5.让JS最后加载

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

关于js延迟加载的几种方法相关推荐

js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
js延迟加载的几种方法（性能优化defer、async）
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
node.js取参四种方法req.body,req.params,req.param,req.body
node.js取参四种方法req.body,req.params,req.param,req.body 参考:https://my.oschina.net/u/2519530/blog/535309 ...
实现动态加载JS脚本有4种方法
转自:微点阅读 https://www.weidianyuedu.com 实现动态加载JS脚本有4种方法: 1.直接document.write 这里重新温习Document.write()的用法, ...
JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.有助于提高页面加载速度. 一般有以下几种方式: 1:defer 属性,async 属性 2:动态创建DOM方式 3:使用jQu ...
优化JS代码的34种方法（上）
1. 含有多个条件的if语句 //longhand if(x === 'abc' || x === 'def' || x === 'ghi' || x == 'jkl'){//logic }//sho ...
html怎么遍历数组,js遍历数组有多少种方法
如果你看完了你会体会到一个人能有多无聊,这东西都能看完!!?? 大概js有以下几种循环遍历的方法: 1 let arr = ['aaa','bbb','ccc'] 2 let obj = {a:'aa ...
判断JS数据类型的四种方法
在 ECMAScript 规范中,共定义了 7 种数据类型,分为基本类型和引用类型两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...