js实现延迟加载的几种方法的详细说明

这是采访中经常被问到的问题：js的延迟加载方法(js的延迟加载有助于提高页面加载速度)

它主要调查是否有任何关于程序性能的研究。项目不断追求程序的性能，通常需要在项目完成后很长一段时间才能完成。比如腾讯QQ，不断优化程序性能，让用户体验更好。性能优化的核心思想是快速，数据可以提前准备(比如缓存的使用)，按需、分段获取，这是常见的优化方法。

解题思路：

1.1 .延期属性

脚本src='http:file.js '延期/脚本

浏览器将并行下载file.js和其他具有defer属性的脚本，而不会阻塞页面的后处理。延期属性已经在IE 4.0中实现了10多年！Firefox从3.5开始就支持延迟属性。

注意：所有延迟脚本都保证按顺序执行。

2 .异步属性

脚本src='http:file.js '异步/脚本

异步属性在HTML5中是新的。功能类似于defer，但是下载后会尽快执行，所以不能保证脚本会按顺序执行。它们将在onload事件之前完成。

Firefox3.6、Opera 10.5、IE 9以及最新的Chrome和Safari都支持异步属性。异步和延迟可以同时使用，所以IE 4之后的所有IE都可以支持异步加载。

3.动态DOM创建(最常用)

脚本类型='text/javascript '函数downloadsonload(){ var element=document . createelement(' script ')；element . src=' delay . js '；document.body.appendChild(元素)；} if (window.addEventListener) //添加监听事件window.addeventlistener ('load '，downloadjsantonload，false)；//事件执行else if(窗口。attachevent)窗口。冒泡阶段的attachevent ('onload '，downloadstonload)；else window . onload=DownLoadjsatonload；/scriptPS:在这里插入addEventListener()也是经常测试的知识点之一：

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

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

语法：元素。addeventlistener(事件、函数、使用捕获)

事件(必需)字符串，指定事件名称。请注意，不使用“on”前缀。例如，使用“单击”代替“onclick”。函数(必须)指定触发事件时要执行的函数。当事件对象作为第一个参数传递到函数中时。事件对象的类型取决于具体的事件。例如，“点击”事件属于一个MouseEvent对象。UseCapture(可选)布尔值，指定事件是在捕获阶段还是冒泡阶段执行。[true:事件句柄在捕获阶段执行；True:默认情况下，事件处理程序在冒泡阶段执行]p该实例使用addEventListener()方法向按钮添加click事件。/p按钮id='myBtn '单击我/按钮p id=' demo '/p script document . getelementbyid(' MyBtn ')。addeventlistener ('click ')，function(){ document . getelementbyid(' demo ')。innerhtml=' helloworld});/脚本效果如图：

4.使用Jquery的getScript()方法

$.getscript ('outer.js '，function(){//回调函数，function console.log('脚本加载完成')})；从源代码可以看出，这个方法最终调用了jQuery.ajax()来请求js文件。

5.使用setTimeout来延迟方法的加载时间

延迟加载js代码，以便有时间加载网页

脚本类型='text/javascript '函数A(){ $。post('/lord/login '，{name:username，pwd:password}，function(){ alert('Hello World！');}) } $(function (){ setTimeout('A()'，1000)；//延迟1秒})/script6。让js最后加载

比如引入一个外部js脚本文件，如果放入html的头部，在页面加载之前会将js脚本加载到页面中，如果放入正文，会按照页面从上到下的加载顺序运行javascript代码~ ~ ~所以我们可以将从外部js引入的文件放在页面的底部，这样就可以最后引入js，从而加快页面加载。

以上方法5、6偶尔会让你收到Google页面速度测试工具发出的“延迟加载javascript”的警告。所以这里的解决方案将是谷歌帮助页面推荐的解决方案。

//这些代码应该放在/body标记之前(靠近HTML文件的底部)。脚本类型=' text/JavaScript '函数下载jsa tonload(){ varelement=document。create element(' script ')；element . src=' delay . js '；document.body.appendChild(元素)；} if(window . addeventlistener)window . addeventlistener(' load '，downloadJSAtOnload，false)；else if(window . attachevent)window . attachevent(' onload '，downloadsonload)；else window . onload=DownLoadjsatonload；/script这段代码意味着在加载外部文件“delay . js”之前要等到整个文档加载完毕。

要使用此代码：

复制上面的代码，粘贴到HTML的标签中(靠近HTML文件的底部)。修改外部js文件名的“delay . JS”，以确保文件路径正确。例如，如果只输入“delay . js”，则“delay . js”文件必须与HTML文件在同一个文件夹中。注意：在加载文档之前，这段代码不会加载指定的外部js文件。因此，页面正常加载需要依赖的javascript代码不应该放在这里。相反，JavaScript代码应该分为两组。一组是由于页面需要而立即加载的javascript代码，另一组是页面加载后操作的javascript代码(比如添加点击事件或其他东西)。这些JavaScript代码需要在页面加载后执行，应该放在外部文件中，然后导入。

如果有任何不足，请给我你的建议！希望给大家带来帮助！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接

版权声明：js实现延迟加载的几种方法的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。