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

2024-11-30 21:16:24

延迟加载（懒加载）和预加载是常用的 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://www.jb51.net/article/154930.htm
【2】https://www.jb51.net/article/57579.htm

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

js实现延迟加载的几种方法

js的延迟加载有助与提高页面的加载速度,以下是延迟加载的几种方法: 1.使用setTimeout延迟方法的加载时间延迟加载js代码,给网页加载留出更多时间 <script type="text/javascript" > function A(){ $.post("/lord/login",{name:username,pwd:password},function(){ alert("Hello"); }); } $(functio
js实现延迟加载的几种方法详解

这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段. 解题思路 : 1.defer属性 <script src="file.js" defer> </scr
浅析js预加载/延迟加载

Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这
javascript实现图片延迟加载方法汇总(三种方法)

看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家
几种延迟加载JS代码的方法加快网页的访问速度

本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码复制代码代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/
JS延迟加载(setTimeout) JS最后加载

第一 JS延迟加载复制代码代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT
js中延迟加载和预加载的具体使用

延迟加载(懒加载)和预加载是常用的 web 优化的手段.. 一.延迟加载(懒加载) 原理: 当在真正需要数据的时候,才真正执行数据加载操作. 目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的实现延迟加载的几种方法 1. 让 js 最后加载使用方法: 把 js 外部引入的文件放到页面底部用途: 让 js 最后引入,从而加快页面加载速度说明: 流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后
详解在node.js中require方法的加载规则

require 方法的加载规则优先从缓存中加载核心模块路径形式的模块第三方模块一.优先从缓存中加载 main.js:执行加载a.js模块 require('./a') a.js:执行加载b.js模块,并输出a被加载了 require('./b') console.log('a.js 被加载了') b.js:输出b被加载了 console.log('b.js 被加载了') 结果: 可以看出:main去加载a.js,然后a在去加载b.js过程中,并没有打印两次 a.js被加载,Node会直
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

用JavaScript刷新上级页面和当前页面复制代码代码如下: <script type="text/javascript"> //刷新上级页面 //window.parent.main.document.location.reload(); //刷新当前页面 document.location.reload(); </script> 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方法
javascript预加载图片、css、js的方法示例介绍

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -
微信小程序实现图片预加载组件

网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.
js前端实现图片懒加载(lazyload)的两种方式

在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

由于微信小程序没有提供类似 Image 这样的 JS 对象,要实现图片的预加载要麻烦一些, wxapp-img-loader自定义组件可以在微信小程序中实现图片预加载功能. 使用 1.下载 wxapp-img-loader项目源代码(https://github.com/o2team/wxa...),将 img-loader 目录拷贝到你的项目中 2.在页面的 WXML 文件中添加以下代码,将组件模板引入 <import src="../../img-loader/img-loader.w
webpack的懒加载和预加载详解

目录正常加载懒加载预加载没有使用预加载使用预加载总结正常加载为了看的方便,index.js中的代码非常简单 console.log('index.js执行了') import { test } from './test.js' document.getElementById('btn-wrap').onclick = function () { test() } test.js console.log('test.js执行了') export function test() {
iOS开发TableView网络请求及展示预加载实现示例

目录引言传统的上拉加载更多滑动过程中预加载方法1(最简单.高效和最推荐): 方法2(自己计算实现,不推荐了): 下面是具体实现细节(此细节是针对上述方法2的) 总结引言 2022.02.11更新:新增了最简单.高效和最推荐的方法. 2020.05.25更新:对总结进行了详细的补充. 传统的上拉加载更多在iOS的开发过程中,如果用列表展示数据,此时一般的逻辑为上拉加载更多数据,配合MJRefresh就是在滑动到最底部时,触发加载更多的网络请求. 滑动过程中预加载如果希望体验好一点,那