web-dev-qa-db-fra.com

Pourquoi utiliser le schéma d'URI de données?

Fondamentalement, la question se trouve dans le titre.

Beaucoup de gens ont eu la question de savoir comment créer un URI de données et des problèmes à l'intérieur.

Ma question est pourquoi utiliser l'URI de données?

Quels sont les avantages de faire:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Plus de faire:

<img src="dot.png" alt="Red dot" />

Je comprends que l'on a moins de surcharge du côté serveur (peut-être), mais quels sont les réels avantages/inconvénients à utiliser l'URI de données ?

49
Naftali aka Neal

Selon Wikipedia :

Avantages:

  • Le trafic de requête et d'en-tête HTTP n'est pas requis pour les données incorporées, donc les URI de données consomment moins de bande passante chaque fois que la surcharge de codage du contenu en ligne en tant qu'URI de données est plus petite que la surcharge HTTP. Par exemple, le codage base64 requis pour une image de 600 octets de long serait de 800 octets, donc si une requête HTTP nécessitait plus de 200 octets de surcharge, l'URI de données serait plus efficace.

  • Pour transférer de nombreux petits fichiers (moins de quelques kilo-octets chacun), cela peut être plus rapide. TCP les transferts ont tendance à démarrer lentement. Si chaque fichier nécessite une nouvelle connexion TCP, la vitesse de transfert est limitée par le temps d'aller-retour plutôt que par la bande passante disponible) L'utilisation de HTTP keep-alive améliore la situation, mais ne résout pas entièrement le goulot d'étranglement.

  • Lors de la navigation sur un site Web HTTPS sécurisé, les navigateurs Web exigent généralement que tous les éléments d'une page Web soient téléchargés via des connexions sécurisées, ou l'utilisateur sera averti d'une sécurité réduite en raison d'un mélange d'éléments sécurisés et non sécurisés. Sur les serveurs mal configurés, les requêtes HTTPS ont une surcharge importante par rapport aux requêtes HTTP courantes, donc l'incorporation de données dans les URI de données peut améliorer la vitesse dans ce cas.

  • Les navigateurs Web sont généralement configurés pour établir uniquement un certain nombre (souvent deux) de connexions HTTP simultanées à un domaine, de sorte que les données en ligne libèrent une connexion de téléchargement pour d'autres contenus.

  • Les environnements avec un accès limité ou restreint aux ressources externes peuvent incorporer du contenu lorsqu'il est interdit ou impossible de le référencer en externe. Par exemple, un champ d'édition HTML avancé pourrait accepter une image collée ou insérée et la convertir en URI de données pour masquer la complexité des ressources externes à l'utilisateur. Alternativement, un navigateur peut convertir (encoder) les données basées sur l'image du presse-papiers en URI de données et les coller dans un champ d'édition HTML. Mozilla Firefox 4 prend en charge cette fonctionnalité.

  • Il est possible de gérer une page multimédia comme un seul fichier. Les modèles de message électronique peuvent contenir des images (pour les arrière-plans ou les signatures) sans que l'image ne semble être une "pièce jointe".

Désavantages:

  • Les URI de données ne sont pas mis en cache séparément de leurs documents contenant (par exemple, des fichiers CSS ou HTML), donc les données sont téléchargées chaque fois que les documents contenant sont retéléchargés. Le contenu doit être ré-encodé et ré-incorporé chaque fois qu'un changement est effectué.

  • Internet Explorer à travers la version 7 (environ 15% du marché en janvier 2011), manque de support. Cependant, cela peut être surmonté en fournissant du contenu spécifique au navigateur. Internet Explorer 8 limite les URI de données à une longueur maximale de 32 Ko.

  • Les données sont incluses en tant que flux simple et de nombreux environnements de traitement (tels que les navigateurs Web) peuvent ne pas prendre en charge l'utilisation de conteneurs (tels que les parties multiples/alternatives ou les messages/rfc822) pour fournir une plus grande complexité telle que les métadonnées, la compression des données ou la négociation de contenu.

  • Les URI de données codées en Base64 sont 1/3 plus grands que leur équivalent binaire. (Cependant, cette surcharge est réduite à 2-3% si le serveur HTTP compresse la réponse à l'aide de gzip) Les URI de données compliquent le filtrage du contenu par les logiciels de sécurité.

Selon autres sources - Les URL de données sont beaucoup plus lentes sur les navigateurs mobiles.

56
Shaz

Une bonne utilisation de l'URI de données permet de télécharger du contenu qui a été généré côté client, sans avoir recours à un "proxy" côté serveur. Voici quelques exemples auxquels je peux penser:

  • enregistrer la sortie d'un élément de canevas en tant qu'image.
  • offrant le téléchargement d'une table au format CSV
  • téléchargement de sortie de tout type d'éditeur en ligne (texte, dessin, code CSS ... etc)
6
BiAiB

Principalement, je trouve cela utile si je ne peux pas (pour une raison quelconque) utiliser CSS sprites et je ne veux pas télécharger chaque petite image que j'utiliserai pour le style.

Ou pour une raison quelconque, vous ne voulez pas que quelqu'un relie l'image à partir d'une page externe. Cela peut être réalisé par d'autres méthodologies mais l'intégration fonctionne également.

Sinon, personnellement, je ne coderais pas de grandes images en photos. Il est préférable d'avoir vos médias sur un autre serveur. Un serveur sur lequel tous les logiciels liés au serveur Web peuvent ne pas être installés. Fournir simplement des médias. Meilleure utilisation des ressources.

4
antitoxic

J'ai utilisé le schéma d'URI de données dans plusieurs applications de ligne de commande (C++, Python) pour générer rapports qui incluent des tracés de données.

Avoir un seul fichier est assez pratique pour envoyer les rapports par e-mail (ou les déplacer en général). Par rapport à PDF je n'avais pas besoin d'une bibliothèque supplémentaire (autre qu'une routine d'encodage base64) et je n'ai pas besoin de prendre soin des sauts de page (et je n'ai presque jamais besoin d'imprimer ces rapports) . Habituellement, je ne mets pas ces rapports sur un serveur Web, il suffit de les afficher sur le système de fichiers local avec un navigateur.

4
Andre Holzner

Je suis d'accord avec BiAiB que la valeur réelle des URI de données rend le contenu généré côté client disponible sous forme de téléchargement de fichier sans avoir besoin d'aller-retour sur le serveur.

Un exemple pratique d'utilisation des URI de données pour "proposer le téléchargement d'une table au format CSV" est décrit sur mon blog .

À mon humble avis, l'incorporation de données d'image (ou d'une autre ressource binaire) dans un fichier HTML pour des raisons de performances est un redingue. Le gain de vitesse dû à moins de connexions HTTP est négligeable et rompt le principe niçois de séparation entre le balisage (textuel) et les ressources binaires (fichiers image, vidéos, etc.).

Je pense que le pipeline HTTP 1.1 et certaines améliorations suggérées pour HTTP sont un moyen plus propre et meilleur de gérer les problèmes de vitesse du réseau HTTP.

2
odoepner