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


Posted in Javascript onJanuary 19, 2019

这是一个面试经常问到的问题: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)

  1.         event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
  2.         function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
  3.         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>

效果如图:

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

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”。

使用此段代码的步骤:

  1.     复制上面代码
  2.     粘贴代码到HTML的标签前 (靠近HTML文件底部)
  3.     修改“defer.js”为你的外部JS文件名
  4.     确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

若有不足请多多指教!希望给您带来帮助!

总结

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

Javascript 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 #Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 #Javascript
js的各种数据类型判断的介绍
Jan 19 #Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 #Javascript
Vuex中的State使用介绍
Jan 19 #Javascript
为什么要使用Vuex的介绍
Jan 19 #Javascript
Vue核心概念Getter的使用方法
Jan 18 #Javascript
You might like
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python 实现return返回多个值
2019/11/19 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
集体婚礼证婚词
2014/01/13 职场文书
公司活动邀请函
2014/01/24 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2019同学聚会主持词
2019/05/06 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis
SQL Server实现分页方法介绍
2022/03/16 SQL Server