懒加载和预加载

hedzr 发布于2019-08-23 12:19 / 2911人阅读

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

一、懒加载 1.什么是懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

2.为什么要用懒加载

能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。

减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，
当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

4.懒加载实现步骤



    
    Lazyload

二、预加载 1.什么是预加载

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

3.实现预加载的几种办法

使用HTML标签

使用Image对象

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

var xmlhttprequest=new XMLHttpRequest()；
xmlhttprequest.onreadystatechange=callback；
xmlhttprequest.onprogress=progressCallback；
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true）；
xmlhttprequest.send()；
function callback(){
  if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
    var responseText=xmlhttprequest.responseText；
  }else{
     console.log("Request was unsuccessful:"+xmlhttprequest.status）；
  }
}
function progressCallback(e){
e=e || event；
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}

使用PreloadJS库

PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。

//使用preload.js
var queue=new createjs.LoadQueue()；//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
])；
function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}

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

两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！

四、参考文章

详解懒加载和预加载(js)

懒加载和预加载

GPU云服务器云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98309.html

懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
前端性能优化--懒加载和预加载

摘要：集合中有等属性文档各种高度视口的大小文档的大小文档的大小预加载标签懒加载代码实现 html Document css .image-item ...

loostudy 2019-08-23 15:27 评论0 收藏0
深度解析之异步加载和预加载

摘要：当然并不是所有的页面需要用到的外部域名都需要做这样的域名解析，浏览器默认会解析超链接属性的里面的域名，并且你的网站域名还不能是，如果是，则需要设置请求头或加入一段强制开启域名解析的标签。废话：异步加载和预加载一直都是前端优化必备技能之一，今天我们就来深度解析一下常用的几个关键点。异步加载废话不多说，任何长篇大论的教程都抵不过一张清晰明了的高清大图来得好： showImg(http...

qpal 2019-08-02 16:10 评论0 收藏0