Faules Laden
1.1 Was ist Lazy Loading?
Das verzögerte Laden, auch als verzögertes Laden bezeichnet, bezieht sich auf das verzögerte Laden von Bildern auf langen Webseiten und ist ein guter Weg, um die Leistung von Webseiten zu optimieren. Bevor der Benutzer zu ihnen blättert, werden Bilder außerhalb des sichtbaren Bereichs nicht geladen. Dies ist das Gegenteil von Bildvorladen. Durch verzögertes Laden auf langen Webseiten wird das Laden der Webseite beschleunigt. In einigen Fällen kann dies auch dazu beitragen, die Serverlast zu verringern. Es wird häufig in der Szene von E-Commerce-Websites mit vielen Bildern und langen Seiten verwendet.
1.2 Warum Lazy Loading verwenden?
- Dies kann die Benutzererfahrung verbessern. Stellen Sie sich vor, wenn ein Benutzer eine lange Seite wie Taobao auf einem Mobiltelefon öffnet und alle Bilder auf der Seite geladen werden müssen, beschwert sich der Benutzer unweigerlich über die große Anzahl von Bildern und die lange Wartezeit. Beeinträchtigen Sie ernsthaft die Benutzererfahrung.
- Reduzieren Sie das Laden ungültiger Ressourcen, was den Druck und den Datenverkehr des Servers erheblich verringern und den Browser entlasten kann.
- Um zu verhindern, dass zu viele Ressourcen gleichzeitig geladen werden, wird das Laden von js blockiert und die normale Nutzung der Website beeinträchtigt.
- Fordern Sie Bildressourcen erst an, nachdem das Bild den sichtbaren Bereich betreten hat
1.3 Umsetzungsprinzip
Setzen Sie zuerst das src-Attribut des Bildes auf der Seite auf eine leere Zeichenfolge, und der tatsächliche Pfad des Bildes wird im Attribut data-original festgelegt. Hören Sie sich den Bildlauf an und rufen Sie beim Rückruf des Bildlaufereignisses auf, ob unser verzögert geladenes Bild eingegeben werden kann Wenn im sichtbaren Bereich das Bild im sichtbaren Bereich mit dem src-Attribut des Bildes als Wert des Datenoriginals festgelegt wird, kann ein verzögertes Laden erreicht werden.
<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"/>
<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>4. Vorladen
4.1 Was ist Vorladen
Das Vorladen von Ressourcen ist eine weitere Technik zur Leistungsoptimierung, mit der wir den Browser darüber informieren können, dass bestimmte Ressourcen möglicherweise in Zukunft verwendet werden. In einfachen Worten bedeutet das Vorladen, dass alle erforderlichen Ressourcen im Voraus in die lokale Anforderung geladen werden, sodass bei einem späteren Bedarf Ressourcen direkt aus dem Cache abgerufen werden, um die Benutzererfahrung zu verbessern.
4.2 Warum Vorspannung verwenden?
Bevor alle Webseiten geladen werden, werden einige Hauptinhalte geladen, um den Benutzern eine bessere Benutzererfahrung zu bieten und die Wartezeit zu verkürzen. Wenn der Inhalt einer Seite zu groß ist, bleibt die Seite ohne Vorladetechnologie lange Zeit leer, bis der gesamte Inhalt geladen ist.
Wenn Sie beispielsweise bei der Implementierung eines Gewinnkarussells zu dieser Registerkarte wechseln, müssen Sie sie durch das Gewinnerbild ersetzen. Wenn keine Vorladung erfolgt, wird möglicherweise ein weißer Bildschirm angezeigt, wenn dieser Moment vergeht, und der Effekt ist sehr schlecht.
4.3 Implementierungsmethode
- Verwenden Sie HTML-Tags
- Verwenden Sie das Bildobjekt
- Die Verwendung des XMLHttpRequest-Objekts gibt zwar domänenübergreifende Probleme, steuert jedoch den Vorladevorgang genau
- Verwenden Sie die PreloadJS-Bibliothek
3. Vergleich von Lazy Loading und Preloading
Beide sind effektive Möglichkeiten, um die Leistung der Seite zu verbessern. Der Hauptunterschied zwischen den beiden besteht darin, dass sie im Voraus geladen werden und die andere langsam oder nicht geladen ist. Das verzögerte Laden hat einen gewissen Stressabbau am vorderen Ende des Servers, und das Vorladen erhöht den Druck am vorderen Ende des Servers .
