Html `lien rel =' dns-préfetch '` optimisation
Link rel = "DNS-Prefetch" est une méthode d'optimisation frontale légère qui convient aux scénarios où les pages se réfèrent à plusieurs ressources tierces ou CDN. Lorsqu'une page Web utilise des ressources externes telles que Google Fonts, Statistics Scripts, Alliance JS ou plusieurs noms de domaine CDN, vous pouvez réduire le temps de requête DNS en résolvant le nom de domaine à l'avance. La bonne façon de l'utiliser est d'ajouter: dans le HTML, mais il doit éviter les abus et être prioritaire aux noms de domaine qui doivent être chargés plus tard. La différence entre celle-ci et la préconnexion est que ce dernier établit également des connexions TCP et TLS. Les deux peuvent être utilisés en combinaison, dans l'ordre en premier DNS-Prefetch, puis préconnecter. D'autres points d'attention ne comprennent pas l'ajouter au site principal, les effets mobiles plus évidents et le support limité pour les outils de test. L'utilisation rationnelle peut apporter des améliorations de performances stables.
Pour le mettre directement dans le point clé: link rel="dns-prefetch"
est une méthode d'optimisation frontale légère mais facilement négligée, en particulier adapté aux scénarios où la page fait référence à plusieurs ressources ou CDN tiers.

Quand dois-je utiliser dns-prefetch
Si votre page Web fait référence à des ressources externes, telles que les polices Google, les scripts statistiques, AD Alliance JS, ou utilise plusieurs domaines CDN pour distribuer des fichiers statiques, vous pouvez envisager d'ajouter cette balise.
La résolution DNS est la première étape d'un navigateur à charger une page, et la résolution est généralement lancée avant de demander une ressource. Grâce à dns-prefetch
, vous pouvez dire au navigateur à l'avance: "J'utiliserai ces noms de domaine plus tard, aidez-moi à les résoudre d'abord." De cette façon, lorsque vous avez vraiment besoin de charger, vous pouvez gagner le temps d'une requête DNS.

Scénarios applicables courants:
- La page fait référence à plusieurs ressources avec différents noms de domaine
- Les CDN publics sont utilisés (comme Fonts.gstatic.com, cdn.jsdelivr.net)
- Il existe de nombreux plug-ins tiers, tels que le système de commentaires, le bouton de partage et les scripts enterrés
Comment l'utiliser correctement
L'utilisation est très simple, il suffit d'ajouter une ligne de code similaire à ce qui suit dans la zone de HTML:

<link rel = "dns-préfetch" href = "// example.com">
Faites attention à certains détails:
- La partie protocole peut être omise, et il est plus courant de commencer par
//
- Ne vous en abusez pas, trop augmentera le fardeau du navigateur
- La priorité est donnée pour définir des pré-parses pour les noms de domaine qui "ne seront chargés que plus tard mais doivent être utilisés"
Par exemple, si vous utilisez Google Fonts, vous pouvez ajouter une ligne à la tête:
<link rel = "dns-préfetch" href = "// fonts.gstatic.com">
De cette façon, le navigateur analysera le nom de domaine à l'avance lorsqu'il est inactif, accélérant la vitesse de chargement de la police.
Différences de preconnect
Beaucoup de gens confondrent dns-prefetch
et preconnect
. En fait, bien qu'ils soient toutes des méthodes d'optimisation, ils font des choses différentes:
-
dns-prefetch
ne fait qu'une seule chose: analyser l'IP correspondant au nom de domaine à l'avance -
preconnect
va plus loin, non seulement la résolution DNS, mais établit également des connexions TCP et même des poignées de main TLS.
Donc, si vous êtes sûr qu'un nom de domaine sera bientôt utilisé, il sera préférable d'utiliser directement preconnect
. Mais s'il est juste "peut-être utilisé", il est plus sûr d'utiliser dns-prefetch
.
Les deux peuvent être utilisés ensemble, généralement l'ordre est d'abord dns-prefetch
, puis preconnect
:
<link rel = "dns-préfetch" href = "// example.com">
Certains points faciles à ignorer
- N'ajoutez pas au site principal actuel : le navigateur a automatiquement fait la résolution DNS du site principal et l'ajout ne sera pas nécessaire
- Les terminaux mobiles sont plus efficaces : dans l'environnement du réseau mobile, le retard de résolution DNS est beaucoup plus élevé que celui du bureau, et le traitement précoce peut améliorer l'expérience
- La prise en charge des outils de test est limitée : certains outils d'analyse des performances n'indiquent pas spécifiquement si DNS-Prefetch est efficace et ne peut observer que la recherche DNS pour la réduction par la chronologie.
Fondamentalement, c'est tout. Cela ne semble pas compliqué, mais dans les projets réels, en particulier sur les pages de chargement multi-ressources, une utilisation raisonnable peut en effet apporter un effet d'optimisation faible mais stable.
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

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

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

Clothoff.io
Dissolvant de vêtements AI

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 !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Il s'agit d'un élément au niveau du bloc, utilisé pour diviser de grandes zones de contenu de bloc; Il s'agit d'un élément en ligne, adapté à l'emballage de petits segments de fragments de texte ou de contenu. Les différences spécifiques sont les suivantes: 1. Occuper exclusivement une ligne, une largeur et une hauteur, des marges intérieures et extérieures peuvent être définies, qui sont souvent utilisées dans des structures de mise en page telles que les en-têtes, les barres latérales, etc.; 2. N'enveloppez pas les lignes, n'occupez que la largeur du contenu et sont utilisés pour le contrôle du style local tel que la décoloration, le gras, etc.; 3. En termes de scénarios d'utilisation, il convient à l'organisation de mise en page et de structure de la zone globale, et est utilisé pour les ajustements de style à petite échelle qui n'affectent pas la disposition globale; 4. Lors de la nidification, il peut contenir des éléments et les éléments au niveau du bloc ne doivent pas être imbriqués à l'intérieur.

LinkRel = "Preload" est une technologie qui optimise les performances de chargement de page et est utilisée pour charger les ressources critiques à l'avance. Son objectif principal est de hiérarchiser le chargement des ressources essentielles au rendu de l'écran d'accueil, telles que les polices, les clés CSS / JS et les images d'écran d'accueil. Faites attention à l'utilisation: 1. Définissez correctement l'attribut AS pour spécifier le type de ressource; 2. Évitez les abus et empêchez une utilisation excessive de la bande passante; 3. Assurez-vous que les ressources seront réellement utilisées, sinon elle entraînera un gaspillage de demandes; 4. Ajouter un attribut de crossorigin aux ressources inter-domaines. Une méthode d'écriture incorrecte telle que l'absence d'attribut AS entraînera une précharge invalide. L'utilisation rationnelle peut améliorer l'efficacité du chargement des pages, sinon elle peut être contre-productive.

Pour commencer rapidement avec HTML, il vous suffit de maîtriser quelques balises de base pour créer un squelette Web. 1. La structure de la page est essentielle et, qui est l'élément racine, contient des méta-informations et est la zone d'affichage du contenu. 2. Utilisez le titre. Plus le niveau est élevé, plus le nombre est petit. Utilisez des balises pour segmenter le texte pour éviter de sauter le niveau. 3. Le lien utilise des balises et correspond aux attributs HREF, et l'image utilise des balises et contient des attributs SRC et Alt. 4. La liste est divisée en listes non ordonnées et listes commandées. Chaque entrée est représentée et doit être imbriquée dans la liste. 5. Les débutants n'ont pas à forcer la mémorisation de toutes les balises. Il est plus efficace de les écrire et de les vérifier pendant que vous écrivez. Maître la structure, le texte, les liens, les images et les listes pour créer des pages Web de base.

Shadowdom est une technologie utilisée dans la technologie des composants Web pour créer des sous-arbres DOM isolés. 1. Il permet la monture d'une structure DOM indépendante sur les éléments HTML ordinaires, avec ses propres styles et comportements, et n'affecte pas le document principal; 2. Créé via JavaScript, comme l'utilisation de la méthode attachshadow et la définition du mode à ouvrir; 3. Lorsqu'il est utilisé en combinaison avec HTML, il a trois caractéristiques principales: la structure claire, l'isolement de style et la projection de contenu (fente); 4. Les notes incluent le débogage complexe, le contrôle de la portée du style, les frais généraux de performances et les problèmes de compatibilité du cadre. En bref, Shadowdom fournit des capacités d'encapsulation natives pour construire des composants d'interface utilisateur réutilisables et non polluants.

❌oucannotnesttagssisideanothertagbecauseit’sinvalidhtml; browsersautomatiquematethethefirstbeforeOpiningtheenxt, résultant de laparateParagraphs.

La méthode de placement de style doit être sélectionnée selon la scène. 1. En ligne convient à la modification temporaire des éléments uniques ou du contrôle JS dynamique, tels que la couleur du bouton change avec le fonctionnement; 2. CSS interne convient aux projets avec quelques pages et une structure simple, ce qui est pratique pour la gestion centralisée des styles, tels que les paramètres de style de base des pages de connexion; 3. La priorité est donnée à la réutilisation, à la maintenance et aux performances, et il est préférable de diviser les fichiers CSS de liaison externe pour les grands projets.

ThenameattributeinaninputTagisUsesedToentifyyInput whentheformmissubmited; itSasaTheKeyInTheKey-ValuepairsentTotheServer, WhereTheUser'sinputisthevalue.1.Wenaformmissubmited, thereAmatTrributeBeCheseke

TheHTMLdownloadattributeallowsuserstodownloadfilesdirectlyfromalinkbyusingthetag.Toimplementit,adddownloadtotheanchortag,suchasDownloadPDF,orspecifyacustomfilenamelikeDownloadasmy-document.pdf.1.Itworksbestwithsame-originURLsandcommonfiletypeslikePDF
