js实现延迟加载的几种方法详解

　　

<强>这是一个面试经常问到的问题:js的延迟加载方法(js的延迟加载有助于提高页面的加载速度)

　　

主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。

　　

解题思路:

　　

<强> 1.推迟属性

　　

<代码> & lt;脚本src=" https://www.yisu.com/zixun/file.js " defer>& lt;/script>

　　

浏览器会并行下载文件。js和其它有推迟属性的脚本,而不会阻塞页面后续处理. def属性在IE 4.0中就实现了,超多过10年了! Firefox 3.5从开始支持推迟属性。

　　

注:所有的推迟脚本保证是按顺序依次执行的。

　　

<强> 2.异步属性

　　

<代码> & lt;脚本src=" https://www.yisu.com/zixun/file.js " async>& lt;/script>

　　

异步属性是HTML5新增的。作用和推迟类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload事件之前完成。

　　

Firefox3.6, Opera 10.5, ie9和最新的Chrome和Safari都支持异步属性。可以同时使用异步和推迟,这样即4之后的所有IE都支持异步加载。

　　

<强> 3。动态创建DOM方式(使用的最多)

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　函数downloadJSAtOnload () { 　　var=document.createElement元素(“脚本”); 　　元素。src=" https://www.yisu.com/zixun/defer.js "; 　　document.body.appendChild(元素); 　　} 　　如果(window.addEventListener)//添加监听事件 　　窗口。addEventListener(“负载”,downloadJSAtOnload、虚假);//事件在冒泡阶段执行 　　else if (window.attachEvent) 　　window.attachEvent (onload downloadJSAtOnload); 　　其他的 　　窗口。onload=downloadJSAtOnload; 　　& lt;/script> 　　 　　

PS:这里插一句<代码> addEventListener() 也是常考的知识点之一:

　　

,,,addEventListener()方法用于向指定元素添加事件句柄。

　　

,,,使用removeEventListener()方法来移除addEventListener()方法添加的事件句柄。

　　

,,,语法:<代码>元素。addEventListener(事件、功能、useCapture)

　　
    　　<李>,,,,,,,事件(必须)字符串,指定事件名。注意:不要使用”“前缀,例如,使用“点击”,而不是使用“onclick。” 　　<李>,,,,,,,函数(必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如,“点击”事件属于MouseEvent(鼠标事件)对象。 　　<李>,,,,,,,useCapture(可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【真实:事件句柄在捕获阶段执行;错误的:默认,事件句柄在冒泡阶段执行】李 　　
　　 　　 　　& lt; p>该实例使用addEventListener()方法来向按钮添加点击事件。;/p> 　　& lt;按钮id=" myBtn "在点我& lt;/button> 　　& lt; p id=把菔尽弊４? lt;/p> 　　& lt; script> 　　. getelementbyid (“myBtn”)。addEventListener(“点击”,函数(){ 　　. getelementbyid(“演示”)。innerHTML=癏ello World”; 　　})； 　　& lt;/script> 　　 　　

<>强效果如图:

　　

js实现延迟加载的几种方法详解

　　

<>强4。使用Jquery的getScript()方法

　　 　　 　　美元.getScript (“outer.js函数(){//回调函数,成功获取文件后执行的函数 　　console.log(“脚本加载完成”) 　　}); 　　 　　

从源码可以看的出,这个方法最后还是调用了<代码> jQuery.ajax() 来请求了js文件的。

　　

<强> 5。使用setTimeout延迟方法的加载时间

　　

延迟加载js代码,给网页加载留出时间

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　函数(){ 　　$ . post(“/主/登录”,{pwd名称:用户名:密码},函数(){ 　　alert (“Hello World !”); 　　}） 　　} 　　$(函数(){ 　　setTimeout(“()”, 1000年);//延迟1秒 　　}） 　　& lt;/script> 　　 　　

<强> 6。让js最后加载

　　

例如引入外部js脚本文件时,如果放入html的头中,则页面加载前该js脚本就会被加载入页面,而放入身体中,则会按照页面从上倒下的加载顺序来运行javascript的代码~ ~ ~所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度。

js实现延迟加载的几种方法详解