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

2023-07-06 19:06:03 134

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

一、延迟加载（懒加载）

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

实现延迟加载的几种方法

1.让js最后加载

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

说明：

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

说明：
- 浏览器会立即下载脚本，但不妨碍页面中的其他操作，加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。
- 这个过程是异步的，它们将在onload事件之前完成。
- 所有的defer脚本不能控制加载的顺序。。
- asyncr属性只适用于外部脚本文件。
4.动态创建DOM方式
```
//这些代码应被放置在标签前(接近HTML文件底部)

functiondownloadJSAtOnload(){
varelement=document.createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if(window.addEventListener)
window.addEventListener("load",downloadJSAtOnload,false);
elseif(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"）

用途:通过HTTPGET请求载入并执行JavaScript文件。
```
//加载并执行test.js：
$.getScript("test.js");
//加载并执行test.js，成功后显示信息
$.getScript("test.js",function(){
alert("Scriptloadedandexecuted.");
});
```
6.使用setTimeout延迟方法的加载时间

用途:延迟加载js代码，给网页加载留出时间
```
functionA(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("HelloWorld!");
})
}
$(function(){
setTimeout("A()",1000);//延迟1秒
})
```
常用实例-图片懒加载

原理：一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
```
functionlazyload(){
varvisible;
$('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（），延迟预加载时间，直到页面加载完毕。
```
functionpreloader(){
if(document.images){
varimg1=newImage();
varimg2=newImage();
varimg3=newImage();
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";
}
}
functionaddLoadEvent(func){
varoldonload=window.onload;
if(typeofwindow.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(){
//XHRtorequestaJSandaCSS
varxhr=newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.js');
xhr.send('');
xhr=newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.css');
xhr.send('');
//preloadimage
newImage().src="http://domain.tld/preload.png";
},1000);
};
```
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

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

1、概念

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

2、区别
- 两种技术的本质：两者的行为相反，一个是提前加载，一个是迟缓甚至不加载。
- 懒加载会对前端有一定的缓解压力作用，预加载则会增加前端的压力。
3、意义

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

四、参考资料

【1】https://www.nhooo.com/article/154930.htm
【2】https://www.nhooo.com/article/57579.htm

到此这篇关于js中延迟加载和预加载的具体使用的文章就介绍到这了,更多相关js中延迟加载和预加载内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

一、延迟加载（懒加载）

实现延迟加载的几种方法

1.让js最后加载

4.动态创建DOM方式

5.使用jquery的getScript方法

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

常用实例-图片懒加载

二、预加载

实现预加载的几种方法

1.css实现

2.js预加载图片

3.使用ajax实现预加载

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

1、概念

2、区别

3、意义

四、参考资料

热门推荐

随机推荐