Comment utiliser modernizr responsable

Utiliser Modernizr responsable: stratégies pour améliorer les performances du site Web

Modernizr, une bibliothèque JavaScript qui peut détecter si le navigateur prend en charge des fonctionnalités spécifiques. Cependant, pour éviter de ralentir le site Web, assurez-vous de l'utiliser avec prudence. Cet article explore comment utiliser Modernizr de manière responsable, ainsi que d'autres bibliothèques similaires telles que jQuery.

Pourquoi faire attention à la charge de Modernizr?

Une question clé: êtes-vous prêt à attendre les secondes pour accéder à la page Web? Si la réponse est non, vos visiteurs aussi. Les temps de chargement longs affecteront directement l'expérience utilisateur et entraîneront une perte de visiteurs. Par conséquent, même si vous poursuivez des fonctionnalités intéressantes, vous devez prendre en compte les performances du site Web.

La clé est de savoir comment charger. De nombreux fichiers JavaScript sont exécutés après le chargement de la page, et les mettre dans est dénué de sens et bloquera le rendu de la page. Les grands scripts sont placés dans et les visiteurs doivent attendre que le script se charge avant de pouvoir voir le contenu de la page.

Modernizr est utilisé pour détecter les fonctionnalités modernes telles que les transitions et les transformations CSS. À l'exception des circonstances particulières, ces caractéristiques ne sont pas nécessaires pour afficher le contenu de la page. La plupart du temps, Modernizr peut être chargé à la fin de au lieu de .

L'optimisation n'est pas seulement pour une seule ressource

Si une page Web utilisant Modernizr se charge lentement, le simple chargement de la bibliothèque est peut-être suffisant pour résoudre le problème des performances. Une approche responsable signifie une attention particulière chaque fois que vous incluez un fichier JavaScript ou d'autres grandes ressources. L'optimisation d'une seule ressource peut ne pas être évidente, mais l'optimisation de toutes les ressources peut améliorer considérablement les performances.

Clarifier les besoins

Assurez-vous de clarifier les exigences avant d'utiliser Modernizr. Modernizr propose de nombreux tests, mais tous les tests ne sont pas utiles pour votre projet. Le site officiel de Modernizr fournit des outils de construction personnalisés, vous ne pouvez sélectionner que les tests nécessaires pour générer des versions personnalisées plus petites, réduisant ainsi le temps de téléchargement.

Il est recommandé d'utiliser la version complète de Modernizr pendant la phase de développement du projet et de régénérer une version personnalisée lors de sa sortie. Une meilleure approche consiste à utiliser des outils d'automatisation tels que Grunt-Modernizr, qui analyse vos fichiers CSS et JavaScript, découvre toutes les fonctionnalités utilisées et génère des versions modernizr personnalisées correspondantes.

Tous les tests ne sont pas nécessaires

Par exemple, Modernizr peut tester si le navigateur prend en charge l'attribut text-shadow CSS. S'il n'est pas pris en charge, cette propriété sera ignorée et ne provoquera pas la chute du site Web. Par conséquent, à moins que text-shadow ne soit essentiel à votre site Web (par exemple, pour améliorer la lisibilité au texte), le test peut ne pas être nécessaire.

Pour les situations où un schéma de secours est nécessaire, vous devez toujours le tester, mais tous les schémas de secours ne nécessitent pas Modernizr. Certains schémas de secours CSS ne nécessitent pas de tests eux-mêmes.

html5shiv utilisé pour prendre en charge les éléments HTML5 dans les anciennes versions d'Internet Explorer. Modernizr peut l'inclure, mais vous n'en avez pas besoin si vous n'êtes pas compatible avec IE plus ancien. Il est recommandé d'utiliser html5shiv, mais il n'a pas à être chargé par modernizr.

Certaines fonctions peuvent retarder le chargement

La plupart des fonctionnalités modernizr peuvent être retardées de chargement en bas de la page. Cela n'empêche pas les utilisateurs de voir le contenu de la page, mais affiche d'abord le contenu de base, puis charge l'expérience améliorée.

Cependant, certaines fonctionnalités, telles que html5shiv, doivent être placées dans pour être chargées avant de rendre des éléments HTML5. Mais vous pouvez optimiser comment il se charge par le biais de commentaires conditionnels ou de scripts en ligne pour réduire les demandes HTTP.

décider de placer le modernizr dans dépend de la structure et de la fonctionnalité de votre page. Si les résultats des tests n'affectent pas la disposition de la page, vous pouvez retarder le chargement.

considération d'efficacité

Tout en mettant Modernizr au bas de la page peut améliorer le temps de chargement, Paul Irish souligne que de nombreux tests modernizr (en particulier les tests CSS) peuvent provoquer des refloges, ce qui a permis au navigateur de recalculer le style, ce qui peut compenser les avantages du chargement du chargement .

Cela dépend de la complexité de votre arbre Dom. Dans le cas d'arbres DOM plus simples, l'exécution du test est plus rapide. Il est recommandé d'effectuer des tests pour évaluer le temps d'exécution sous différents navigateurs et versions. Les versions personnalisées peuvent réduire les tests inutiles et améliorer encore l'efficacité.

Résumé

Cet article explore comment utiliser Modernizr de manière responsable et comment choisir le bon emplacement de chargement dans différentes situations. Quelle que soit la méthode que vous choisissez, les téléchargements de ressources inutiles doivent être minimisés pour offrir aux utilisateurs une bonne expérience, en particulier lorsque la connexion réseau est lente. Cette approche de développement responsable ne concerne pas seulement Modernizr, mais aussi pour d'autres bibliothèques telles que JQuery. Éviter le téléchargement de données inutiles est un principe que chaque développeur doit suivre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!