js延迟加载方法
1.defer属性
<script src="file.js" defer> </script>
浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。
注：所有的defer脚本保证是按顺序依次执行的。
2.async属性
<script src="file.js" async> </script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。
3.动态创建DOM方式 (使用的最多)
| 12345678910111213 | ``function` `downloadJSAtOnload() {`` ``var` `element = 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; |
|---|
PS： 这里插一句addEventListener()<span> </span>也是常考的知识点之一：
addEventListener() 方法用于向指定元素添加事件句柄。
使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法：`element.addEventListener(event, function, useCapture)`
-
event （必须）字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。 -
function （必须）指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。 -
useCapture （可选）布尔值，指定事件是否在捕获或冒泡阶段执行。【true：事件句柄在捕获阶段执行； false：默认，事件句柄在冒泡阶段执行】
| 12345678 | `该实例使用 addEventListener() 方法来向按钮添加点击事件。 点我 ````document.getElementById("myBtn").addEventListener("click", function(){"demo").innerHTML = "Hello World";``});``` |
|---|
效果如图：
4.使用Jquery的getScript()方法
| 123 | $.getScript(``"outer.js"``,``function``(){``//回调函数，成功获取文件后执行的函数`` ``console.log(``"脚本加载完成"``)``}); |
|---|
从源码可以看出，这个方法最后还是调用了jQuery.ajax()来请求了js文件的。
5.使用setTimeout延迟方法的加载时间
延迟加载js代码，给网页加载留出时间
| 12345678910 | ``function` `A(){`` ``$.post(``"/lord/login"``,{name:username,pwd:password},``function``(){`` ``alert(``"Hello World!"``);`` ``})`` ``}`` ``$(``function` `(){`` ``setTimeout(``"A()"``,1000); ``//延迟1秒`` ``}) |
|---|
6.让js最后加载
例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。
上述方法5,6也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
| 123456789101112 | //这些代码应被放置在标签前(接近HTML文件底部) `` ``function downloadJSAtOnload() {`` ``var element = 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;``` |
|---|
这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。
使用此段代码的步骤：
-
复制上面代码 -
粘贴代码到HTML的标签前 (靠近HTML文件底部) -
修改“defer.js”为你的外部JS文件名 -
确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。
注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。
若有不足请多多指教！希望给您带来帮助！