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

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.