Optimisation des performances frontales - optimisez un grand nombre de chargements d'images et de chargements d'images volumineuses (avec un schéma d'implémentation de chargement paresseux)

Un chargement d'images trop nombreuses ou trop volumineuses entraîne un chargement lent de la page; trop d'images entraînent trop de requêtes au serveur, des images trop volumineuses entraînent une longue période pour chaque requête, ce qui oblige les utilisateurs à attendre longtemps.

1. Un grand nombre de solutions d'optimisation du chargement d'images

1. Services d'image et services d'application séparés (pensez du point de vue d'un architecte)

Pour le serveur, les images sont toujours les ressources système les plus consommatrices. Si le service d’image et le service d’application sont placés sur le même serveur, le serveur d’application se plantera facilement en raison de la charge d’E / S élevée des images. un grand nombre d'images sur le site Web Lors des opérations de lecture et d'écriture, il est recommandé d'utiliser un serveur d'images.

Les navigateurs ont une limite sur le nombre de demandes simultanées de ressources sous le même nom de domaine en même temps, généralement entre 2 et 6, et les demandes qui dépassent la limite seront bloquées. Certains navigateurs traditionnels ont HTTP 1.1 et HTTP 1.0 Le nombre maximum des connexions simultanées est montré dans la figure

2. Schéma de compression d'image

Nous pouvons utiliser des logiciels tiers pour compresser, la résolution ne changera pas après la compression et l'œil nu ne sera pas déformé;
les images utilisées dans notre projet seront essentiellement compressées puis téléchargées.

3. Chargement paresseux de l'image

Le chargement différé des images signifie que pendant le processus de rendu de la page, les images ne seront pas chargées en une seule fois, mais seront chargées en cas de besoin. Par exemple, lorsque la barre de défilement défile jusqu'à une certaine position, un événement est déclenché pour charger l'image. .
Pour optimiser la redistribution, vous pouvez d'abord définir des espaces réservés

Plan de réalisation un

document.documentElement.clientHeight//获取屏幕可视区域的高度
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
element.offsetTop//获取元素相对于文档顶部的高度

Si: clientHeight + scroolTop> offsetTop, l'image entre dans la zone visible, elle est demandée.

Emprunter une photo: lien d'origine

Code:

<script>
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>

Plan de mise en œuvre deux

getBoundingClientRect()//获取元素的大小及位置

Lorsque nous faisons défiler vers le bas, la valeur bound.top deviendra de plus en plus petite, c'est-à-dire que la distance entre l'image et le haut de la zone visible deviendra également de plus en plus petite, donc lorsque bound.top == clientHeight, cela signifie que le patch de sol Il est sur le point d'entrer dans la zone visuelle, tant que nous faisons défiler, l'image entrera dans la zone visuelle, nous devons donc demander des ressources. En d'autres termes, lorsque bound.top <= clientHeight, l'image est dans la zone visible.

Code:

var imgs = document.querySelectorAll('img');

        //用来判断bound.top<=clientHeight的函数，返回一个bool值
        function isIn(el) {
            var bound = el.getBoundingClientRect();
            var clientHeight = window.innerHeight;
            return bound.top <= clientHeight;
        } 
        //检查图片是否在可视区内，如果不在，则加载
        function check() {
            Array.from(imgs).forEach(function(el){
                if(isIn(el)){
                    loadImg(el);
                }
            })
        }
        function loadImg(el) {
            if(!el.src){
                var source = el.dataset.src;
                el.src = source;
            }
        }
        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            check();
        }

4. Lorsqu'il y a beaucoup de petites images

Vous pouvez utiliser Sprite, icônes de police, base64, etc., ce qui peut réduire efficacement le nombre de connexions

5.http2 résout la limite de connexion

http2 n'a qu'une seule connexion à un site. Chaque requête est un flux et chaque requête est divisée en plusieurs trames binaires. Les trames de différents flux peuvent être entrelacées pour réaliser le multiplexage. Cela résout le problème de la limite de connexion

Deuxièmement, l'image est trop grande pour charger le plan d'optimisation

Transmission et rendu lents

1. S'il s'agit d'un album photo ou autre, il peut être préchargé. Lors de l'affichage de la photo actuelle, chargez ses photos précédentes et suivantes
2. Lors du chargement, vous pouvez d'abord charger une vignette avec un taux de compression très élevé pour améliorer l'expérience utilisateur, cliquez sur puis ou après le chargement pour afficher l'image claire
3. L'utilisation de JPEG progressif améliorera l'expérience utilisateur.
   Article de
   référence Baseline JPEG
   

La

méthode de stockage JPEG progressif est différente

4. Si la zone d'affichage est plus petite que la taille réelle de l'image, elle peut d'abord être compressée à une taille appropriée sur le serveur

Lien vers cet article: https://blog.csdn.net/qq_39903567/article/details/115290905