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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
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
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
php微信开发接入
2016/08/27 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
5个很好的Python面试题问题答案及分析
2018/01/19 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Django REST 异常处理详解
2020/07/15 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
在C#中如何实现多态
2014/07/02 面试题
如何清空Session
2015/02/23 面试题
机电专业体育教师求职信
2013/09/21 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
省文明单位申报材料
2014/05/08 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
地陪导游欢迎词
2015/01/26 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
Python开发五子棋小游戏
2022/05/02 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript