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

网络编程 2024/11/16 佚名

3 1 2

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

一、延迟加载（懒加载）

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

实现延迟加载的几种方法

1. 让 js 最后加载

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

2. defer 属性

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

<!DOCTYPE html>
<html>
<head>
  <script src="/UploadFiles/2021-04-02/test1.js">

说明：

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

3. async 属性


使用方法： 为 <script>标签定义了 async属性。

用途: 不让页面等待脚本下载和执行，从而异步加载页面其他内容。




<!DOCTYPE html>
<html>
<head>
  <script src="/UploadFiles/2021-04-02/test1.js">

浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 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="/UploadFiles/2021-04-02/loading.gif">



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://www.jb51.net/article/154930.htm

【2】https://www.jb51.net/article/57579.htm



                                
                                
                                    js,延迟加载,预加载,js,延迟加载,js,,预加载 
                                华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js中延迟加载和预加载的具体使用”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

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

一、延迟加载（懒加载）

实现延迟加载的几种方法

1. 让 js 最后加载

2. defer 属性

3. async 属性

4. 动态创建 DOM 方式

5. 使用 jquery 的 getScript 方法

6.使用 setTimeout 延迟方法的加载时间

常用实例 - 图片懒加载

二、预加载

实现预加载的几种方法

1. css 实现

2. js 预加载图片

3. 使用 ajax 实现预加载

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

1、概念

2、区别

3、意义

四、参考资料

JavaScript中展开运算符及应用的实例代码

JS中箭头函数与this的写法和理解

评论“js中延迟加载和预加载的具体使用”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

一、延迟加载（懒加载）

实现延迟加载的几种方法

1. 让 js 最后加载

2. defer 属性

3. async 属性

4. 动态创建 DOM 方式

5. 使用 jquery 的 getScript 方法

6.使用 setTimeout 延迟方法的加载时间

常用实例 - 图片懒加载

二、 预加载

实现预加载的几种方法

1. css 实现

2. js 预加载图片

3. 使用 ajax 实现预加载

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

1、概念

2、区别

3、意义

四、 参考资料

JavaScript中展开运算符及应用的实例代码

JS中箭头函数与this的写法和理解

评论“js中延迟加载和预加载的具体使用”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

二、预加载

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

四、参考资料

RTX 5090要首发性能要翻倍！三星展示GDDR7显存