Un guide pour débutant pour les polyfills de navigateur HTML5

Points clés

• Polyfill est un outil qui permet aux développeurs d'utiliser ces fonctionnalités dans des navigateurs plus âgés qui ne prennent pas en charge les fonctionnalités Web modernes, garantissant que les utilisateurs de ces navigateurs peuvent toujours accéder et utiliser le site Web sans perdre de fonctionnalités ou d'expérience.
• Polyfill.io est un projet open source qui fournit la bibliothèque Polyfill à la demande, permettant aux développeurs d'utiliser les dernières normes tout en maintenant la compatibilité avec les navigateurs plus anciens. Il lit l'en-tête HTTP d'agent utilisateur et fournit uniquement le polyfill nécessaire, réduisant ainsi les ballonnements de navigateurs modernes.
• Bien que Polyfill aide à permettre des fonctionnalités modernes dans les navigateurs plus anciens, il a également des inconvénients potentiels, tels que l'augmentation du poids de la page Web, ce qui peut ralentir le temps de chargement; à son objectif prévu la fonctionnalité de Polyfill, entraînant des incohérences ou des erreurs.

Les pages Web se développent rapidement. De nouveaux frameworks, outils et même langues émergent les uns après les autres. Cependant, de nombreux développeurs estiment qu'ils doivent aller de l'avant à la vitesse la plus lente des utilisateurs. Les navigateurs modernes sont «à feuilles persistantes» - ils sont automatiquement mis à jour en arrière-plan, ne nécessitent aucune demande d'autorisation et ont fait de grands progrès dans l'amélioration de nouvelles API.

Cependant, même les navigateurs modernes n'implémentent pas toutes les fonctions en même temps. Il est frustrant de lire des articles sur les technologies de pointe dans le développement moderne et de constater que ces technologies ne seront pas disponibles pour les années à venir. Peut-être avez-vous vérifié les données d'analyse du site Web et constaté qu'il y a encore des utilisateurs utilisant IE9? Devriez-vous écrire du code comme vous l'avez fait en 2011, ou tout déléguer à jQuery ou à un cadre? Il y a une autre option. C'est-à-dire polyfill .

Qu'est-ce que le polyfill? Pourquoi en avons-nous besoin?

Remy Sharp a inventé ce terme dans un livre et un article de blog de 2009. Si cette fonctionnalité existe dans le navigateur, PolyFill permet au navigateur d'effectuer ses opérations; Ils remplissent la vulnérabilité des navigateurs plus anciens, les fonctionnalités manquantes que nous voulons utiliser aujourd'hui. Il utilise du code non natif pour copier les API natives.

Quelles sont les fonctions manquantes dont nous parlons?

En 2009, ECMAScript version 5 a été publiée. C'est une avance énorme et radicale pour la langue. ECMAScript 2015 a également apporté des mises à jour majeures similaires. À l'avenir, les améliorations de cette langue seront progressives et se produiront chaque année. C'est une période passionnante, avec de nouvelles fonctionnalités constamment ajoutées à la langue. En plus du langage central lui-même, il existe diverses API pour les plates-formes DOM et Web. Pour mettre en évidence les différences entre les navigateurs modernes et plus anciens, voici une comparaison de la dernière version Chrome à Internet Explorer 9 (certaines entreprises sont toujours avec regret soutien obligatoire). Il existe également un tableau montrant la prise en charge de Ecmascript 6. La deuxième table remonte uniquement à IE 11, et comme vous pouvez le voir, il prend en charge presque aucune fonctionnalité ES6. C'est beaucoup de fonctions manquantes ...

polyfill et traduction

Par conséquent, il est clair dans le tableau ci-dessus que nous devons traduire notre code. Il faut votre nouvelle syntaxe brillante et sort ECMAScript 5 à l'ancienne. Si vous souhaitez utiliser les fonctions Arrow, Async / Await, Rest and Spread Paramètres, Classes, etc. Dans votre code, vous devez utiliser des outils comme Babel pour traduire votre code ES6 en ES5. Cependant, vous ne pouvez pas polyfurer la syntaxe de JavaScript. Alors que Babel convertit vos fonctions flèches en fonctions régulières, Polyfill ajoute des méthodes à la portée globale et aux prototypes natifs. Babel fournit son propre polyfill ES6, qui sur le site Web de Babel dit qu'il fournit "de nouveaux objets intégrés tels que Promise ou Faiblemap, des méthodes statiques telles que Array.from ou Object.Assign, des méthodes d'instance telles que Array.prototype.Clures, et Fonctions du générateur. "Babel Polyfill peut donc nous fournir toutes les fonctionnalités ES6 que nous voulons. Mais ça manque beaucoup. Peut-être que vous utilisez l'API classlist pour ajouter et supprimer des classes, ou utiliser MatchMedia pour les requêtes multimédias, mais vous devez toujours prendre en charge IE9. Heureusement, il existe un service qui fournit tout couvertures de polyfill Babel, et plus encore.

Simplifiez votre vie avec polyfill.io

Polyfill.io est un projet open source développé par le Financial Times. Il reçoit actuellement jusqu'à 204 millions de demandes par jour et s'appelle une «bibliothèque de spécifications de Polyfill». Ce système de polyfill à la demande vous permet de parcourir puis-je utiliser , en haussant les épaules, en utilisant les dernières normes, et toujours compatible avec les anciens navigateurs.

Idéalement, nous ne devons que les fonctions de polyfill que nous avons réellement utilisées et n'envoient que les polyfills dont un navigateur particulier a réellement besoin. Polyfill.io peut répondre aux deux besoins. Le service lit l'en-tête HTTP d'agent utilisateur afin qu'il ne sert que le contenu nécessaire, plutôt que de fournir des fichiers gonflés aux navigateurs modernes. Le nouveau navigateur recevra des fichiers presque vides, et l'ancienne version d'IE recevra beaucoup de code. Vous pouvez réduire le poids du code envoyé à l'ancienne machine en spécifiant la liste des fonctionnalités que vous utilisez dans la chaîne de requête. S'il est omis, un ensemble de valeurs par défaut sera utilisé. L'utilisation du service nécessite une demande HTTP bloquante supplémentaire, mais à mon avis, sa facilité d'utilisation en vaut la peine. L'ingénieur de Google Philip Walton a sa propre perspective sur le polyfill et les performances, ce qui mérite d'être lu si vous vous inquiétez des demandes supplémentaires.

Qu'est-ce que cela ne couvre pas?

polyfill.io est très complet, et il comprend certaines API de navigateur de pointe telles que Fetch et Promises. Cependant, il existe de nombreux polyfills qui vous permettent d'essayer d'utiliser de nouvelles technologies. La chose la plus excitante est peut-être les composants Web, une progression du développement frontal potentiellement révolutionnaire qui offre une encapsulation de style et des fonctionnalités faciles à utiliser. Le support croisé de navigateur arrive enfin. Google pousse dur leur projet polymère, qui est essentiellement un framework JavaScript construit sur un grand polyfill. Cependant, les composants Web ne doivent pas être équivalents à ce cadre, car les composants Web lui-même ont un grand potentiel. Vous pouvez utiliser des composants sans polymère, mais la portée complète de l'API n'a pas encore été copiée. L'API des animations Web fournit un moyen efficace sans bibliothèque de créer des animations à l'aide de JavaScript. Le support du navigateur n'est pas encore très bon, mais Shim est suffisamment fiable pour que j'ai utilisé cette technologie pour les animations sur tous les sites de production dans lesquels j'ai été impliqué. Il offre deux options - une pour remplir les fonctionnalités actuellement disponibles dans certains navigateurs. Une autre fonctionnalité qui n'a pas encore été finalisée, ce qui m'a amené à mon dernier sujet ...

"Proyfills": tests API émergents

et prolyfills - une cale spéculative pour l'API qui peut apparaître .

Les caractéristiques inédites de Polyfill deviennent de plus en plus courantes comme preuve de concept et sont intéressantes pour essayer des technologies de pointe pour le développement frontal. Peut-être souhaitez-vous tester les recommandations observables inspirées de la populaire bibliothèque RXJS? Il y a un prolyfill pour cela. Essayer de nouvelles technologies est l'une des parties les plus excitantes d'être développeur.

Conclusion

c'est tout. Nous avons appris ce que sont les polyfills, pourquoi ils sont nécessaires, comment extraire les polyfills dont vous pourriez avoir besoin de Polyfill.io, et comment Polyfill n'a pas encore publié de fonctionnalités. Mais et toi? Utilisez-vous uniquement des fonctionnalités linguistiques disponibles dans tous les navigateurs que vous prenez en charge? Ou avez-vous écrit du code moderne, puis utilisé Polyfill pour le faire fonctionner dans des navigateurs plus âgés? Quel est le navigateur le plus ancien que vous ayez besoin pour soutenir? Veuillez me le faire savoir dans les commentaires ci-dessous.

Cet article a été évalué par des pairs par Graham Cox. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!

FAQ sur HTML5 Cross-Browser Polyfill

Quel est le but de l'utilisation du polyfill html5 croixur?

HTML5 Cross-Browser Polyfill est utilisé pour permettre des fonctionnalités Web modernes dans des navigateurs plus anciens qui ne les soutiennent pas eux-mêmes. Ils agissent comme des fonctions de secours, offrant les mêmes fonctionnalités que les navigateurs modernes. Cela garantit que les utilisateurs de navigateurs plus anciens peuvent toujours accéder et utiliser l'application du site Web ou du Web sans perdre de fonctionnalité ou d'expérience.

Comment implémenter Polyfill dans mon projet Web?

La mise en œuvre de Polyfill dans un projet Web se compose de plusieurs étapes. Tout d'abord, vous devez déterminer la fonctionnalité que vous souhaitez polyfill. Ensuite, vous devez trouver un polyfill approprié pour fournir la fonctionnalité. Cela peut être fait en recherchant en ligne une bibliothèque ou un référentiel de polyfill. Une fois que vous avez trouvé le polyfill approprié, vous pouvez l'inclure dans votre projet en l'ajoutant au fichier HTML à l'aide de balises de script.

Quels sont les problèmes ou les inconvénients potentiels de l'utilisation de polyfill?

Bien que les polyfills soient très utiles, ils ont des inconvénients potentiels. L'un des principaux problèmes est la performance. Polyfill ajoute un poids supplémentaire à la page, ce qui peut ralentir le temps de chargement et affecter négativement l'expérience utilisateur. De plus, tous les polyfills ne sont pas les mêmes. Certains peuvent ne pas copier complètement ou avec précision ce qu'ils sont conçus pour être des polyfills, ce qui peut entraîner des incohérences ou des erreurs.

Comment choisir le bon polyfill pour mes besoins?

Choisissez le bon polyfill dépend de plusieurs facteurs. Tout d'abord, vous devez considérer ce que vous essayez polyfill et trouver un polyfill qui reproduit avec précision sa fonctionnalité. Vous devez également considérer les navigateurs que vous souhaitez cibler et vous assurer que Polyfill les prend en charge. Enfin, vous devriez considérer la taille et les performances des polyfills car ceux-ci peuvent affecter le temps de chargement et les performances globales de votre site Web.

Puis-je créer mon propre polyfill?

Oui, vous pouvez créer votre propre polyfill. Cela implique d'écrire un script qui vérifie si le navigateur prend en charge une certaine fonctionnalité et le fournit si le navigateur ne le fait pas. Cependant, la création de votre propre polyfill peut être complexe et longue, et il est souvent plus facile et plus efficace d'utiliser un polyfill existant.

Quelles sont les bibliothèques ou les ressources populaires disponibles pour trouver des polyfills?

Il existe plusieurs bibliothèques et ressources populaires disponibles pour trouver des polyfills. Ceux-ci incluent Polyfill.io, qui fournit un service qui renvoie automatiquement les polyfillages requis par le navigateur; Modernizr Library, qui contient une série de polyfills;

Comment tester si Polyfill fonctionne correctement?

Le test Polyfill comprend la vérification si les fonctionnalités qu'elle est conçues pour fournir correctement dans le navigateur que vous souhaitez cibler. Cela peut être fait en utilisant l'outil de test du navigateur ou en testant manuellement la fonctionnalité dans différents navigateurs. Si la fonction fonctionne comme prévu, Polyfill fonctionne correctement.

peut être utilisé en polyfill avec des cadres JavaScript tels que React ou Angular?

Oui, le polyfill peut être utilisé avec des frameworks JavaScript tels que React ou Angular. En fait, ces cadres recommandent souvent et nécessitent même certains polyfills pour une compatibilité et des performances optimales. Le processus de mise en œuvre de Polyfill à l'aide de ces cadres est similaire à la mise en œuvre de Polyfill dans un projet Web ordinaire.

Le polyfill est-il une solution à long terme aux problèmes de compatibilité du navigateur?

Polyfill ressemble plus à une solution à court terme au problème de compatibilité du navigateur. Ils sont utilisés pour combler les lacunes de support du navigateur pour certaines fonctionnalités jusqu'à ce que le navigateur rattrape et les prend en charge en nativement. Alors que les navigateurs continuent d'évoluer et de mettre à jour, la demande de certains polyfills diminuera.

Quelle est la différence entre le polyfill et la cale?

Polyfill et SHIM sont tous deux utilisés pour fournir des fonctionnalités de sauvegarde pour les fonctionnalités qui ne sont pas prises en charge par le navigateur. Cependant, Shim fournit généralement des fonctionnalités de secours pour les API manquantes en utilisant différentes API existantes, tandis que Polyfill fournit de nouvelles implémentations que le navigateur peut utiliser comme si elle était native.

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!