Maison interface Web js tutoriel Une brève analyse des compétences de préchargement js/lazy chargement_javascript

Une brève analyse des compétences de préchargement js/lazy chargement_javascript

May 16, 2016 pm 04:35 PM
js 延迟加载 预加载

Pré-chargeur Il existe généralement deux méthodes courantes de préchargement : xhr et l'insertion dynamique de nœuds. L'insertion dynamique de nœuds est la méthode de chargement asynchrone la plus simple et la plus répandue. Ensuite, les fichiers chargés à l'aide de la méthode de nœud inséré dynamiquement seront exécutés immédiatement après le chargement. D'une part, l'exécution de javascript occupera le processus d'exécution du navigateur js, et d'autre part. D'un autre côté, cela peut modifier la structure de la page et l'exécution de CSS est plus susceptible de modifier la page entière. Bien que la méthode xhr n'exécutera pas le script, en raison de restrictions dans le même domaine

La méthode du chargeur paresseux est très utile sur certains sites Web contenant de nombreuses images. Les images en dehors de la zone visible du navigateur ne seront pas chargées tant que l'utilisateur n'a pas fait défiler la page jusqu'à l'endroit où elles se trouvent, donc pour les sites Web contenant de nombreuses images. des pages Web plus longues, elles peuvent se charger plus rapidement et économiser la bande passante du serveur. Il existe également des plugins dans les plugins jQuery pour réaliser cette fonctionnalité.

Cette technologie est utilisée dans l'espace QQ de Tencent et Weibo. Sur les sites Web avec un grand nombre de visites, cela peut relativement réduire la pression sur le serveur, et seules les requêtes sont faites lorsque l'utilisateur accède à la zone visible et au contenu suivant. Au lieu de télécharger la page entière en une seule fois, l'utilisateur attend que le contenu soit présenté pendant le processus de téléchargement.

Utilisez new Image().src dans IE pour précharger les fichiers.
D'autres navigateurs utilisent des balises document.createElement('object') insérées dynamiquement pour terminer le chargement.

Description :
1. La raison pour laquelle new Image().src ne peut pas être utilisé dans ff est que ff implémente un cache séparé pour les images. Dans le même temps, Safari et Chrome ne semblent pas être mis en cache.
2. Les balises d'objet insérées dynamiquement doivent être insérées dans la partie non principale pour déclencher le chargement.
3. Dans ie7 et ie8, vous pouvez également utiliser des objets dynamiques pour charger des fichiers via du code.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Quelle est l'architecture et le principe de fonctionnement de Spring Data JPA ? Quelle est l'architecture et le principe de fonctionnement de Spring Data JPA ? Apr 17, 2024 pm 02:48 PM

SpringDataJPA est basé sur l'architecture JPA et interagit avec la base de données via le mappage, l'ORM et la gestion des transactions. Son référentiel fournit des opérations CRUD et les requêtes dérivées simplifient l'accès à la base de données. De plus, il utilise le chargement paresseux pour récupérer les données uniquement lorsque cela est nécessaire, améliorant ainsi les performances.

Quelle est la signification originale des liens dynamiques et des liens statiques sous Linux ? Quelle est la signification originale des liens dynamiques et des liens statiques sous Linux ? Feb 05, 2024 pm 05:45 PM

Comme d'habitude, posons quelques questions : Pourquoi les liens dynamiques ? Comment faire des liens dynamiques ? Qu’est-ce que la technologie de code indépendante de l’adresse ? Qu’est-ce que la technologie de liaison retardée ? Comment créer des liens explicites pendant l'exécution du programme ? Pourquoi des liens dynamiques ? L'émergence des liens dynamiques vise à résoudre certains défauts des liens statiques : économie de mémoire et d'espace disque : comme le montre la figure ci-dessous, Program1 et Program2 contiennent deux modules, Program1.o et Program2.o respectivement, et ils nécessitent tous deux la bibliothèque Lib. o module. Dans le cas d'une liaison statique, les deux fichiers cibles utilisent le module Lib.o, ils ont donc des copies dans les fichiers exécutables Program1 et program2 générés par le lien et exécutés en même temps.

Que faire si l'image HTML est trop grande Que faire si l'image HTML est trop grande Apr 05, 2024 pm 12:24 PM

Voici quelques façons d'optimiser les images HTML trop volumineuses : Optimiser la taille du fichier image : Utilisez un outil de compression ou un logiciel de retouche d'image. Utilisez des requêtes multimédias : redimensionnez dynamiquement les images en fonction de l'appareil. Implémentez le chargement différé : chargez l'image uniquement lorsqu'elle entre dans la zone visible. Utilisez un CDN : distribuez des images sur plusieurs serveurs. Utiliser un espace réservé pour l’image : affichez une image d’espace réservé pendant le chargement de l’image. Utiliser des vignettes : affiche une version plus petite de l'image et charge l'image en taille réelle en un clic.

Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées ! Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées ! Mar 06, 2024 pm 02:33 PM

Décoder les goulots d'étranglement des performances de Laravel : les techniques d'optimisation entièrement révélées ! Laravel, en tant que framework PHP populaire, offre aux développeurs des fonctions riches et une expérience de développement pratique. Cependant, à mesure que la taille du projet augmente et que le nombre de visites augmente, nous pouvons être confrontés au défi des goulots d'étranglement en matière de performances. Cet article approfondira les techniques d'optimisation des performances de Laravel pour aider les développeurs à découvrir et à résoudre les problèmes de performances potentiels. 1. Optimisation des requêtes de base de données à l'aide du chargement différé d'Eloquent Lorsque vous utilisez Eloquent pour interroger la base de données, évitez

Conseils d'optimisation des performances Java JPA : faites voler votre application Conseils d'optimisation des performances Java JPA : faites voler votre application Feb 19, 2024 pm 09:03 PM

Mots-clés de l'article : Optimisation des performances JavaJPA Gestion des entités ORM JavaJPA (JavaPersistance API) est un framework de mappage objet-relationnel (ORM) qui vous permet d'utiliser des objets Java pour exploiter les données dans la base de données. JPA fournit une API unifiée pour interagir avec les bases de données, vous permettant d'utiliser le même code pour accéder à différentes bases de données. De plus, JPA prend également en charge des fonctionnalités telles que le chargement paresseux, la mise en cache et la détection des données sales, qui peuvent améliorer les performances des applications. Cependant, si elles sont mal utilisées, les performances JPA peuvent devenir un goulot d'étranglement pour votre application. Voici quelques problèmes de performances courants : Problème de requête N+1 : lorsque vous utilisez des requêtes JPQL dans votre application, vous pouvez rencontrer des problèmes de requête N+1. Dans ce genre de

Comment Hibernate optimise-t-il les performances des requêtes de base de données ? Comment Hibernate optimise-t-il les performances des requêtes de base de données ? Apr 17, 2024 pm 03:00 PM

Les conseils pour optimiser les performances des requêtes Hibernate incluent : l'utilisation du chargement différé pour différer le chargement des collections et des objets associés ; l'utilisation du traitement par lots pour combiner les opérations de mise à jour, de suppression ou d'insertion ; l'utilisation du cache de deuxième niveau pour stocker les objets fréquemment interrogés en mémoire à l'aide de connexions externes HQL ; , récupérer les entités et leurs entités associées ; optimiser les paramètres de requête pour éviter le mode de requête SELECTN+1 ; utiliser des curseurs pour récupérer des données massives en blocs ; utiliser des index pour améliorer les performances de requêtes spécifiques.

Comment empêcher l'événement de chargement d'iframe Comment empêcher l'événement de chargement d'iframe Feb 19, 2024 am 08:02 AM

Comment empêcher les événements de chargement d'iframe Dans le développement Web, nous utilisons souvent des balises iframe pour intégrer d'autres pages ou contenus Web. Par défaut, lorsque le navigateur charge une iframe, l'événement de chargement est déclenché. Cependant, dans certains cas, nous pouvons souhaiter retarder le chargement d'une iframe, ou empêcher complètement l'événement de chargement. Dans cet article, nous explorerons comment y parvenir à travers des exemples de code. 1. Retarder le chargement de l'iframe Si vous souhaitez retarder le chargement de l'iframe, nous pouvons utiliser

See all articles