js中延迟加载和预加载的具体使用


Posted in Javascript onJanuary 14, 2021

延迟加载(懒加载)和预加载是常用的 web 优化的手段。。

一、延迟加载(懒加载)

原理: 当在真正需要数据的时候,才真正执行数据加载操作。
目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法: 把 js 外部引入的文件放到页面底部
用途: 让 js 最后引入,从而加快页面加载速度
说明:
流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后面,当页面结构和样式全部渲染完成再执行 js,提升用户体验

2. defer 属性

使用方法: 为 <script>标签定义了 defer属性。
用途: 让脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行

<!DOCTYPE html>
<html>
<head>
  <script src="test1.js" defer="defer"></script>
  <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

说明:

  • 虽然<script>元素放在了<head>元素中,但包含的脚本将延迟浏览器遇到</html>标签后再执行。
  • 当浏览器解析到 script 脚本,有 defer 时,浏览器会并行下载有 defer 属性的 script,而不会阻塞页面后续处理。
  • 所有的 defer 脚本保证是按顺序依次执行的。(但实际上延迟脚本并不一定会按照顺序执行,因此最好只包含一个延迟脚本)
  • defer 属性只适用于外部脚本文件。

3. async 属性

使用方法: 为 <script>标签定义了 async属性。
用途: 不让页面等待脚本下载和执行,从而异步加载页面其他内容。

<!DOCTYPE html>
<html>
<head>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行进行,这个过程是异步的。它们将在 onload 事件之前完成。

说明:

  • 浏览器会立即下载脚本,但不妨碍页面中的其他操作,加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。
  • 这个过程是异步的,它们将在 onload 事件之前完成。
  • 所有的 defer 脚本不能控制加载的顺序。。
  • asyncr 属性只适用于外部脚本文件。

4. 动态创建 DOM 方式

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
  function downloadJSAtOnload() {
    varelement = 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>

5. 使用 jquery 的 getScript 方法

使用方法:

Query.getScript(url,success(response,status))
  • url(必写):将要请求的 URL 字符串
  • success(response,status)(可选):规定请求成功后执行的回调函数。

其中的参数
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

用途: 通过 HTTP GET 请求载入并执行 JavaScript 文件。

//加载并执行 test.js:
$.getScript("test.js");
//加载并执行 test.js ,成功后显示信息
$.getScript("test.js", function(){
 alert("Script loaded and executed.");
});

6.使用 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>

常用实例 - 图片懒加载

原理: 一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的 src 属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的 src 赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给 src 赋值。

<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >
function lazyload(){
 var visible;
 $('img').each(function () {
 if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判断图片是否需要懒加载
  visible = $(this).offset().top - $(window).scrollTop(); //图片距离顶部的距离
  if ((visible > 0) && (visible < $(window).height())) {// 判断图片是否在可视区域
    visible = true;// 图片在可视区域
  } else {
    visible = false;// 图片不在可视区域
  }
  if (visible) {
    $(this).attr('src', $(this).attr('lazy-src'));
  }
 }
 });
}
 // 打开页面触发函数
 lazyload();
 // 滚屏时触发函数
 window.onscroll =function(){
 lazyload(imgs);
 }

二、 预加载

原理: 提前加载图片,当用户需要查看时可直接从本地缓存中渲染
目的: 牺牲前端性能,换取用户体验,使用户的操作得到最快的反映。

实现预加载的几种方法

1. css 实现

原理: 可通过 CSS 的background 属性 将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变 ,当它们在 Web 页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }

#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

2. js 预加载图片

原理: 通过写函数进行预加载。将该脚本封装入一个函数中,并使用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。

function preloader() {
  if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img1.src = "http://domain.tld/path/to/image-001.gif";
    img2.src = "http://domain.tld/path/to/image-002.gif";
    img3.src = "http://domain.tld/path/to/image-003.gif";
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);

3. 使用 ajax 实现预加载

原理: 使用 Ajax 实现图片预加载的方法,利用 DOM,不仅仅预加载图片,还会预加载 CSS、JavaScript 等相关的东西

window.onload = function() {
  setTimeout(function() {
    // XHR to request a JS and a CSS
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send('');
    xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.css');
    xhr.send('');
    // preload image
    new Image().src = "http://domain.tld/preload.png";
  }, 1000);
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000 毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。

三、 懒加载与预加载的对比

1、概念

延迟加载也叫懒加载: 当在真正需要数据的时候,才真正执行数据加载操作。
预加载:提前加载,当用户需要查看时可直接从本地缓存中渲染

2、区别

  • 两种技术的本质:两者的行为相反,一个是提前加载,一个是迟缓甚至不加载。
  • 懒加载会对前端有一定的缓解压力作用,预加载则会增加前端的压力。

3、意义

懒加载的主要目的是优化前端性能,减少请求数或延迟请求数。
预加载是牺牲前端性能,换取用户体验,使用户的操作得到最快的反映。

四、 参考资料

【1】https://3water.com/article/154930.htm
【2】https://3water.com/article/57579.htm

到此这篇关于js中延迟加载和预加载的具体使用的文章就介绍到这了,更多相关js中延迟加载和预加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
JS中箭头函数与this的写法和理解
Jan 14 #Javascript
JavaScript this关键字的深入详解
Jan 14 #Javascript
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
Python内置函数OCT详解
2016/11/09 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python多继承原理与用法示例
2018/08/23 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python logging添加filter教程
2019/12/24 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
如何理解Python中的变量
2020/06/01 Python
python 生成器需注意的小问题
2020/09/29 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
行政总经理岗位职责
2013/12/05 职场文书
校庆活动方案
2014/03/31 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript