Ленивая загрузка и предварительная загрузка

внешний интерфейс сервер JavaScript

1. Ленивая загрузка

1. Что такое ленивая загрузка

Отложенная загрузка также называется отложенной загрузкой, что означает отложенную загрузку изображений на длинных веб-страницах. Это хороший способ оптимизировать производительность веб-страницы.. Изображения за пределами видимой области не загружаются, пока пользователь не прокрутит их. Это противоположно предварительной загрузке изображений, использование ленивой загрузки на длинных веб-страницах ускорит загрузку веб-страниц. В некоторых случаях это также может помочь снизить нагрузку на сервер. Он часто используется в сценариях веб-сайтов электронной коммерции с большим количеством изображений и длинных страниц.

2. Зачем использовать ленивую загрузку

  • Может улучшить пользовательский опыт, можно также представить, когда пользователь открывает длинную страницу, такую ​​как мобильный телефон Taobao, если все изображения на странице должны быть загружены из-за большого количества изображений и длительного времени ожидания, пользователь неизбежно будет жаловаться, что серьезно повлияет на пользовательский опыт.
  • Уменьшить загрузку недопустимых ресурсов, что позволяет значительно снизить нагрузку и трафик на сервер, а также снизить нагрузку на браузер.
  • Предотвращение одновременной загрузки слишком большого количества ресурсов заблокирует загрузку js., влияющие на нормальное использование веб-сайта.

3. Принцип ленивой загрузки

Сначала задайте для атрибута src изображения на странице пустую строку, а в атрибуте data-original задается реальный путь к изображению, Когда страница прокручивается, нам нужно прослушивать событие прокрутки.В обратном вызове события прокрутки мы можем судить, входит ли наше отложенное изображение в видимую область.Если изображение находится в видимой области, установите атрибут src для изображение в значение data-original. , что включает ленивую загрузку.

4. Шаги реализации ленивой загрузки

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style>
      .image-item {
	    display: block;
	    margin-bottom: 50px;
	    height: 200px;//一定记得设置图片高度
	}
    </style>
</head>
<body>
<img src="" class="image-item" lazyload="true"  data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/12.png"/>
<script>
var viewHeight =document.documentElement.clientHeight//获取可视区高度
function lazyload(){
var eles=document.querySelectorAll（'img[data-original][lazyload]'）
Array.prototype.forEach.call(eles,function(item,index){
var rect
if(item.dataset.original==="")
   return
rect=item.getBoundingClientRect()// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
if(rect.bottom>=0 && rect.top < viewHeight){
!function(){
  var img=new Image()
  img.src=item.dataset.original
  img.onload=function(){
    item.src=img.src
    }
item.removeAttribute（"data-original"）//移除属性，下次不再遍历
item.removeAttribute（"lazyload"）
   }()
  }
 })
}
lazyload()//刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
document.addEventListener（"scroll"，lazyload)
</script>
</body>
</html>

2. Предварительная загрузка

1. Что такое предварительная загрузка

Предварительная загрузка ресурсов — это еще один метод оптимизации производительности, который мы можем использовать, чтобы заранее информировать браузер о том, что определенные ресурсы могут быть использованы в будущем.Предварительная загрузка — это просто загрузка всех необходимых ресурсов в локальный заранее, чтобы ресурсы можно было напрямую извлечь из кеша позже, когда они потребуются..

2. Зачем использовать предварительную загрузку

Перед полной загрузкой веб-страницы загружается некоторый основной контент, чтобы предоставить пользователям лучший опыт и сократить время ожидания. В противном случае, если содержимое страницы слишком велико, страница без технологии предзагрузки будет долгое время отображаться пустой, пока не загрузится весь контент.

3. Несколько способов добиться предварительной загрузки

  • Используйте HTML-теги

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

  • Использование объектов изображения

<script src="./myPreload.js"></script>

//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 обеспечивает согласованный способ предварительной загрузки содержимого для использования в приложениях в 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);
}

3. Сравнение ленивой загрузки и предварительной загрузки

Оба являются эффективными способами повышения производительности страницы.Основное различие между ними заключается в том, что один из них загружается раньше, а другой медленно или даже не загружается. Ленивая загрузка оказывает определенное влияние на внешний интерфейс сервера, в то время как предварительная загрузка увеличивает нагрузку на внешний интерфейс сервера..

Если вы хотите узнать больше о способах оптимизации производительности страницы, нажмитеКакие существуют способы оптимизации производительности страницы

4. Справочные статьи

Подробное объяснение ленивой загрузки и предварительной загрузки (js)

Ленивая загрузка и предварительная загрузка

Категории