js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度)
主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。
解题思路 :
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方式 (使用的最多)
<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>
PS: 这里插一句 addEventListener()
也是常考的知识点之一:
addEventListener()
方法用于向指定元素添加事件句柄。使用
removeEventListener()
方法来移除addEventListener()
方法添加的事件句柄。语法:element.addEventListener(event, function, useCapture)
- event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
- function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
- useCapture (可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【true:事件句柄在捕获阶段执行; false:默认,事件句柄在冒泡阶段执行】
例如:
<p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function()
{document.getElementById("demo").innerHTML = "Hello World";
});
</script>
效果如图:
4.使用Jquery的getScript()方法
$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数console.log("脚本加载完成")});
从源码可以看出,这个方法最后还是调用了jQuery.ajax()
来请求了js文件的。
5.使用setTimeout延迟方法的加载时间
延迟加载js代码,给网页加载留出时间
<script type="text/javascript">function A(){$.post("/lord/login",{name:username,pwd:password},function(){alert("Hello World!");})}$(function (){setTimeout("A()",1000); //延迟1秒})
</script>
6.让js最后加载
例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度。
上述方法5,6也会偶尔让你收到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”。
使用此段代码的步骤:
- 复制上面代码
- 粘贴代码到HTML的标签前 (靠近HTML文件底部)
- 修改“defer.js”为你的外部JS文件名
- 确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。
注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。
参考博客:
js延迟加载的几种方法
js延迟加载的几种方法相关推荐
- 关于js延迟加载的几种方法
1.defer 用途:表明脚本在执行时不会影响页面的构造.也就是说,脚本会被延迟到整个页面都解析完毕之后再执行. <!DOCTYPE html> <html> <head ...
- js延迟加载的几种方法(性能优化defer、async)
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
- 动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
- node.js取参四种方法req.body,req.params,req.param,req.body
node.js取参四种方法req.body,req.params,req.param,req.body 参考:https://my.oschina.net/u/2519530/blog/535309 ...
- 实现动态加载JS脚本有4种方法
转自:微点阅读 https://www.weidianyuedu.com 实现动态加载JS脚本有4种方法: 1.直接document.write 这里重新温习Document.write()的用法, ...
- JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.有助于提高页面加载速度. 一般有以下几种方式: 1:defer 属性,async 属性 2:动态创建DOM方式 3:使用jQu ...
- 优化JS代码的34种方法(上)
1. 含有多个条件的if语句 //longhand if(x === 'abc' || x === 'def' || x === 'ghi' || x == 'jkl'){//logic }//sho ...
- html怎么遍历数组,js遍历数组有多少种方法
如果你看完了你会体会到一个人能有多无聊,这东西都能看完!!?? 大概js有以下几种循环遍历的方法: 1 let arr = ['aaa','bbb','ccc'] 2 let obj = {a:'aa ...
- 判断JS数据类型的四种方法
在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示: 基本类型:String.Number.Boolean.Symbol.Undefined.N ...
最新文章
- 解决wubi安装ubuntu时要下载系统映像文件问题
- [20150205]分析函数ntile.txt
- IEnumerable是否应该实现IEnumerable接口
- [BZOJ 2555] SubString
- VS2005解决方案的目录结构
- Linux网络状态工具ss命令操作详解
- 10个典型实用的PHP代码片段
- C++中文版本primer 第二章变量和基本类型 学习笔记
- 圳不完全启示录之初来乍到----2
- const指针和指向const对象的指针
- 织梦新建顶级栏目打不开,解决办法
- Pow(x, n) leetcode
- windbg使用教程: 具体实例
- Java基础,不需要复杂语句,使用for循环实现求出1~100之间的奇数和以及偶数和,超级简单
- 100个2022实用微信小程序源码分享
- 创建Web站点的欢迎页面
- 发送RST报文的几种可能的情况
- foxmail发邮件时总提示接收密码错误是怎么回事
- FFplay序列号分析
- Android 与 Chrome OS 中针对大屏幕设备的更新