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

网络编程 2024/12/22 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

延迟加载（懒加载）和预加载是常用的 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,,预加载 
                                
                                    标签：
                                        js,延迟加载,预加载,js,延迟加载,js,,预加载
                                     

                                极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无js中延迟加载和预加载的具体使用的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

一、延迟加载（懒加载）

实现延迟加载的几种方法

1. 让 js 最后加载

2. defer 属性

3. async 属性

4. 动态创建 DOM 方式

5. 使用 jquery 的 getScript 方法

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

常用实例 - 图片懒加载

二、预加载

实现预加载的几种方法

1. css 实现

2. js 预加载图片

3. 使用 ajax 实现预加载

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

1、概念

2、区别

3、意义

四、参考资料

js,延迟加载,预加载,js,延迟加载,js,,预加载

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

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

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

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

一、延迟加载（懒加载）

实现延迟加载的几种方法

1. 让 js 最后加载

2. defer 属性

3. async 属性

4. 动态创建 DOM 方式

5. 使用 jquery 的 getScript 方法

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

常用实例 - 图片懒加载

二、 预加载

实现预加载的几种方法

1. css 实现

2. js 预加载图片

3. 使用 ajax 实现预加载

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

1、概念

2、区别

3、意义

四、 参考资料

js,延迟加载,预加载,js,延迟加载,js,,预加载

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

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

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

二、预加载

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

四、参考资料