延迟加载JS的方式
Posted Lan.W
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了延迟加载JS的方式相关的知识，希望对你有一定的参考价值。
javascript 延迟加载就是等DOM（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好
常用延迟加载js方式有：
- 将JS放在页面底部,html页面内容从上到下按顺序加载。
- window.onload()=function()，window全局函数
- 使用setTimeout，增加延时处理，异常线程，延时时间要自己预估。
- HTML4新增的script标签属性：defer, 基本等同于在window.onload时执行
- HTML5新增的script标签属性：async， 在DOM完成加载之后，window.onload之前执行
常用defer , async。
示例：
script.js
console.log( document.getElementById('box') );index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟加载JS</title>
<script type="text/javascript" src='script.js'></script>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
</body>
</html>
效果：如下，在不加defer 或者 async放在页面顶部是获取不到这个div元素的，因为页面还没有加载出来。
调用的地方加上defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟加载JS</title>
<script defer type="text/javascript" src='script.js'></script>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
</body>
</html>
async
同样的我们把在header的引入，上面的defer换成async，如下：
<title>延迟加载JS</title>
<script async type="text/javascript" src='script.js'></script>执行效果同上面defer一样，是拿到DOM元素：div的。
defer async区别
示例：
a1.js
console.log('执行a1.js')b2.js
console.log('执行b2.js')c3.js
console.log('执行c3.js')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟加载JS</title>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
<script defer src="a1.js"></script>
<script defer src="b2.js"></script>
<script defer src="c3.js"></script>
</body>
</html>使用async
<script async src="a1.js"></script>
<script async src="b2.js"></script>
<script async src="c3.js"></script>上面放在底部下的调用3个js，使用async, defer执行效果都是一样如图：
延迟加载3个脚本，如果使用的是defer，加载脚本的时候，一定会是按照以下顺序执行：
- a1.js
- b2.js
- c3.js
使用async，也是延迟加载js脚本，但是这3个脚本执行顺序是不确定的，先完成加载先执行，如果这3个脚本有依赖关系，使用是async是不合适的。
如果无法判断用defer,async,优先使用 defer.
延迟加载js方式async与defer区别
http://t.csdn.cn/OPnUU
以上是关于延迟加载JS的方式的主要内容，如果未能解决你的问题，请参考以下文章
jQuery延迟加载(懒加载)插件 jquery.lazyload.js