JS延迟加载,也便是等页面加载完成之后再加载Javascript文件

为什么让JS实现延迟加载?

js的延迟加载有助于提高页面的加载速率。

html5延迟加载网页前端JS延伸加载的方法有哪些 CSS
(图片来自网络侵删)

Js延迟加载的办法有哪些?一样平常有以下几种办法:

·defer属性

·async属性

·动态创建DOM办法

·利用jQuery的getScript方法

·利用setTimeout延迟方法

·让JS末了加载

1、defer属性

HTML 4.01为<script>标签定义了defer属性。
标签定义了defer属性元素中设置defer属性,即是见告浏览器立即下载,但延迟实行标签定义了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属性类似,都用于改变处理脚本的行为。
同样,只适用于外部脚本文件。
标签定义了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) ;elsewindow. onload =downloadJSAtOnload;</script>4、利用jQuery的getScript()方法

$.getScript("outer.js" , function(){//回调函数,成功获取文件后实行的函数console.log(“脚本加载完成")});5、利用setTimeout延迟方法的加载韶光延迟加载js代码,给网页加载留出更多韶光

<script type="text/javascript" >function A(){$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){alert("Hello");});}$(function (){setTimeout('A()', 1000);//延迟1秒})</script>6、让JS末了加载

把js外部引入的文件放到页面底部,来让js末了引入,从而加快页面加载速率例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码。
以是我们可以把js外部引入的文件放到页面底部,来让js末了引入,从而加快页面加载速率。

上述方法2也会偶尔让你收到Google页面速率测试工具的“延迟加载javascript”警告。
以是这里的办理方案将是来自Google帮助页面的推举方案。

//这些代码应被放置在</body>标签前(靠近HTML文件底部)<script type= "text/javascript">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;</script>

这段代码意思等到全体文档加载完后,再加载外部文件“defer.js”。

利用此段代码的步骤:

6.1)复制上面代码

6.2)粘贴代码到HTML的标签前 (靠近HTML文件底部)

6.3)修正“defer.js”为你的外部JS文件名

6.4)确保文件路径是精确的。
例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。

把稳:

这段代码直到文档加载完才会加载指定的外部js文件。
因此,不应该把那些页面正常加载须要依赖的javascript代码放在这里。
而该当将JavaScript代码分成两组。
一组是因页面须要而立即加载的javascript代码,其余一组是在页面加载后进行操作的javascript代码(例如添加click事宜。