js延迟加载的几种方法(性能优化defer、async)
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度)
主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。
解题思路 :
1.defer属性
<script src="file.js" defer> </script>
浏览器会并行下载 file.js和其它有 defer 属性的script,而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了,超过10多年了!Firefox从 3.5 开始支持defer属性 。
浏览器会异步的下载该文件并且不会影响到后续DOM
的渲染,并行进行(异步);
defer
脚本会在文档渲染完毕后,DOMContentLoaded
事件调用前执行。
文档解析时,遇到设置了defer
的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析&渲染完毕后,会等到所有的defer
脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded
事件。
注:所有的defer脚本保证是按顺序依次执行的。
2.async属性
<script src="file.js" async> </script>
async属性是HTML5新增的。作用和defer类似 加载和渲染后面元素过程将和script的加载和执行并行进行(异步),但是它将在加载完成后立即执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
async
脚本会在加载完毕后执行。
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有IE 都支持异步加载。
注释:有多种执行外部脚本的方法:
- 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本加载完将被执行)
- 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本会阻断页面的解析
推荐的应用场景
defer
如果你的脚本代码依赖于页面中的DOM
元素(文档是否解析完毕),或者被其他脚本文件依赖。
例:
- 评论框
- 代码语法高亮
polyfill.js
async
如果你的脚本并不关心页面中的DOM
元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。
例:
- 百度统计
如果不太能确定的话,用defer
总是会比async
稳定。。。
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延迟加载的几种方法(性能优化defer、async)相关推荐
- js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
- 关于js延迟加载的几种方法
1.defer 用途:表明脚本在执行时不会影响页面的构造.也就是说,脚本会被延迟到整个页面都解析完毕之后再执行. <!DOCTYPE html> <html> <head ...
- 标题:ASP.NET几种进行性能优化的方法及注意问题
正文: 网站的性能对于ASP.NET程序开发人员来说非常重要.一个优秀的网站虽然有美观的页面设计,完善的服务功能,但是打开网页时有长时间的延迟,用户最终将会无法忍受.尤其对于大型的电子商务网站而言,每 ...
- 动态修改dom node的两种方法性能比较
Created by Jerry Wang, last modified on Sep 25, 2014 测试代码: <html> <script src="C:\User ...
- [Unity]角色头顶血条的实现的几种方法以及优化拓展
1.UGUI 的 Image 1.1biliboard广告板中使用update函数 1.1.1在角色头顶的血条 参考资料2,biliboard广告板中使用update函数.如果场景中含有update函 ...
- 50种方法巧妙优化SQL Server数据库(转载)
50种方法巧妙优化SQL Server数据库 查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3. ...
- C#中判断空字符串的3种方法性能分析【月儿原创】
C#中判断空字符串的3种方法性能分析 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.28 3种方法分别是:string ...
- 动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
- C#中判断空字符串的3种方法性能分析
3种方法分别是:string a=""; 1.if(a=="") 2.if(a==String.Empty) 3.if(a.Length==0) 3种方法都是等 ...
最新文章
- Tarjan算法学习笔记
- 目标检测-基于Pytorch实现Yolov3(1)- 搭建模型
- 对quake3源代码的学习与研究初步的计划
- Python单元测试去哪儿了?
- 缓解数据包丢失对WAN的影响是当务之急—Vecloud微云
- js弹性运动滑动的菜单
- 如何给linux目录加密码,怎么只给一个文件夹的内容加密?
- Oracle-索引分裂研究
- [转贴]壮观啊!实拍中国最美公路
- win10解压安装mysql缺少MSVCR120.dll文件的问题
- 【时间序列】时间序列数据的缺失填补方法总结
- C. Minimum Ties (构造)
- Python:百分制转五分制
- IOS 后台运行 播放音乐
- choco设置后续软件默认安装路径
- 【学习笔记】深蓝学院-三维点云处理
- [渝粤教育] 西南科技大学 投资项目评估 在线考试复习资料
- 腾讯通 admin.php,配置RTX腾讯通升级使用SQL Server数据库
- 计算机论文答辩代码讲解,计算机专业毕业论文答辩的程序讲解
- WOFOST模型Matlab,一种WOFOST-PAR耦合模型建立方法与流程
热门文章
- Boost PFC变换器双闭环控制,Matlab/Simulink仿真模型。
- 2011-2019年地级市数字经济数据(含stata代码)
- fpga控制sdram存储器的读写2:sdram初始化
- C++learning
- OSChina 周三乱弹 —— 您的好友,苏菲利普亲王已经上线。
- 推荐 :一文盘点数据行业的动态演变(附链接)
- 我被喷上了热门,这其实反映了当今面试的一种现状
- H5游戏要怎样增加趣味性
- script标签写在哪里好?
- 多种方法解决Error querying database. Cause: java.sql.SQLException: No value specified for parameter 1