一、延迟加载（懒加载）

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

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法： 把 js 外部引入的文件放到页面底部
用途: 让 js 最后引入，从而加快页面加载速度
说明:
流览器之所以会采用同步模式，通常加载 js 文件或者放   

说明：

• 虽然   

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

  说明：

  • 浏览器会立即下载脚本，但不妨碍页面中的其他操作，加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。

  • 这个过程是异步的，它们将在 onload 事件之前完成。

  • 所有的 defer 脚本不能控制加载的顺序。。

  • asyncr 属性只适用于外部脚本文件。

  4. 动态创建 DOM 方式
  

  //这些代码应被放置在标签前(接近HTML文件底部)
  
    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;
  

  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 代码，给网页加载留出时间
  

  
   function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
     alert("Hello World!");
    })
   }
   $(function (){
    setTimeout("A()",1000); //延迟1秒
   })
  

  常用实例 - 图片懒加载
  

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

  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(https://cache.yisu.com/upload/information/20210114/112/5600.png) no-repeat -9999px -9999px; }
  
  #preload-02 { background: url(https://cache.yisu.com/upload/information/20210114/112/5601.png) no-repeat -9999px -9999px; }
  
  #preload-03 { background: url(https://cache.yisu.com/upload/information/20210114/112/5602.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 = "https://cache.yisu.com/upload/information/20210114/112/5603.gif";
      img2.src = "https://cache.yisu.com/upload/information/20210114/112/5604.gif";
      img3.src = "https://cache.yisu.com/upload/information/20210114/112/5605.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 = "https://cache.yisu.com/upload/information/20210114/112/5606.png";
    }, 1000);
  };

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

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

  1、概念
  

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

  2、区别

  • 两种技术的本质：两者的行为相反，一个是提前加载，一个是迟缓甚至不加载。

  • 懒加载会对前端有一定的缓解压力作用，预加载则会增加前端的压力。

  3、意义
  

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