Comment optimiser HTML pour accélérer les pages Web

Évidemment HTML, "script public" masqué La clé pour réduire les temps de téléchargement des pages Web est de trouver des moyens de réduire la taille des fichiers. Lorsque plusieurs pages partagent du contenu, vous pouvez envisager de séparer ces parties communes séparément. Par exemple : nous pouvons écrire un programme de script utilisé par plusieurs pages HTML dans un fichier .js indépendant, puis appeler HTML brut dans la page comme suit, et utiliser le "script commun"

La clé pour réduire le temps de téléchargement des pages Web est d'essayer de réduire la taille du fichier. Lorsque plusieurs pages partagent du contenu, vous pouvez envisager de séparer ces parties communes séparément. Par exemple : nous pouvons écrire un script utilisé par plusieurs pages HTML dans un fichier .js indépendant, puis l'appeler dans la page comme suit :

De cette façon, les fichiers publics ne doivent être téléchargés qu'une seule fois, puis entrer dans le tampon. La prochaine fois que la page html contenant le fichier public sera à nouveau appelée, le temps de téléchargement sera considérablement réduit.
Laissez le contenu de la feuille de style travailler de manière souterraine
CSS est un décorateur HTML, et une belle page Web ne peut s'en passer. Il existe de nombreuses façons de référencer CSS dans les pages HTML, et différentes méthodes conduisent à des efficacités différentes. Habituellement, nous pouvons extraire le code de contrôle de style défini entre , l'enregistrer dans un fichier .css distinct, puis utiliser la balise ou la balise @import dans la page HTML.
​                                                                                             
Veuillez noter 2 points :

1. Il n'est pas nécessaire d'inclure la balise

2. défini dans la section HEAD de la page HTML.

Deux façons d'économiser une mémoire précieuse Minimiser l'espace mémoire occupé par les pages HTML est un moyen efficace d'accélérer le téléchargement des pages. À cet égard, il y a 2 questions qui nécessitent une attention particulière :

1. Utiliser le même langage de script Les pages HTML sont indissociables du support des programmes de script Nous intégrons souvent plusieurs langages de script​​dans la page, tels que JavaScript et VBScript. Cependant, je me demande si vous l’avez remarqué : cet usage mixte ralentit la vitesse d’accès de la page. La raison est la suivante : pour interpréter et exécuter plusieurs codes de script, plusieurs moteurs de script doivent être chargés en mémoire. Par conséquent, essayez d’utiliser le même langage de script pour écrire du code dans la page.

2. Utilisez IFrame avec habileté Avez-vous déjà utilisé la balise N'utilisez qu'un seul IFRAME. Lorsque la souris pointe sur un nouveau thème, il suffit de modifier l'attribut SRC de l'élément IFRAME. De cette façon, un seul document d'aperçu reste en mémoire à tout moment.


Sélectionnez les attributs de positionnement de l'animation Lorsque vous naviguez sur Internet tous les jours, vous verrez certainement de nombreux effets d'animation. Par exemple, un mignon petit lapin va et vient sur la page... La technologie de base pour obtenir cet effet est le positionnement CCS. Habituellement, nous utilisons les deux propriétés element.style.left et element.style.top pour atteindre l'objectif de positionnement graphique. Cependant, cela posera quelques problèmes : l'attribut gauche renvoie une chaîne et contient l'unité de mesure (telle que 100 px). Par conséquent, pour définir de nouvelles coordonnées de position, vous devez d'abord traiter la valeur de retour de chaîne, puis l'attribuer, comme suit : ​                                 dimstringLeft,intLeft
stringLeft=element.style.left
intLeft=parseInt(stringLeft)
intLeft=intLeft 10
element.style.left=intLeft;
Vous devez sentir qu'il est nécessaire d'écrire un code aussi compliqué pour faire une telle chose. Existe-t-il un moyen plus simple ?

Regardez ces 4 attributs : posLeft, posTop, posWidth et posHeight, qui correspondent à la valeur en points de la valeur de retour de la chaîne correspondante. Bon, réécrivons le code en utilisant ces propriétés pour obtenir les fonctions implémentées par le code ci-dessus :
element.style.posLeft =10
Le code est plus court et plus rapide !
Contrôle en boucle de plusieurs animations
Lorsqu'il s'agit de créer des effets d'animation, bien sûr, l'utilisation de minuteries est indissociable. La méthode habituelle consiste à utiliser window.setTimeout pour positionner en continu les éléments sur la page. Cependant, s’il y a plusieurs animations à afficher sur la page, est-il nécessaire de définir plusieurs minuteries ? La réponse est non ! La raison est simple : la fonction de minuterie consomme beaucoup de ressources système précieuses. Mais on peut toujours contrôler plusieurs animations sur la page. L'astuce consiste à utiliser une boucle. Dans la boucle, la position de l'animation correspondante est contrôlée en fonction de différentes valeurs de variables. Un seul appel de fonction window.setTimeout() est utilisé dans toute la boucle.
La visibilité est plus rapide que l'affichage
Faire apparaître et disparaître des images peut créer des effets intéressants. Il existe deux manières d'y parvenir : utiliser l'attribut de visibilité CSS ou l'attribut d'affichage. Pour les éléments positionnés de manière absolue, le dialogue et la visibilité ont le même effet. La différence entre les deux est que l'élément défini sur display:none n'occupera plus l'espace du flux documentaire, tandis que l'élément défini sur visibilité:hidden conservera toujours sa position d'origine.
Mais si vous souhaitez traiter des éléments positionnés de manière absolue, il sera plus rapide d'utiliser la visibilité.
Commencez petit
Un conseil important lors de la rédaction de pages Web DHTML est le suivant : commencez petit. Lorsque vous écrivez une page DHTML pour la première fois, veillez à ne pas essayer d'utiliser toutes les fonctionnalités DHTML que vous connaissez dans la page. Vous pouvez utiliser une seule nouvelle fonctionnalité à la fois et observer attentivement les changements qui en résultent. Si vous constatez une baisse de performances, vous pourrez rapidement découvrir pourquoi.
DEFER des scripts
DEFER est un "héros méconnu" parmi les fonctions puissantes des programmes de script. Vous ne l'avez peut-être jamais utilisé, mais après avoir lu l'introduction ici, je pense que vous ne pouvez pas vous en passer. Il indique au navigateur que le segment de script contient du code qui n'a pas besoin d'être exécuté immédiatement et, utilisé conjointement avec l'attribut SRC, il peut également provoquer le téléchargement de ces scripts en arrière-plan et l'affichage du contenu au premier plan. à l'utilisateur normalement.
Enfin, veuillez noter deux points :
1. N'appelez pas la commande document.write dans un segment de script de type différé, car document.write produira un effet de sortie direct.
2. De plus, n'incluez aucune variable ou fonction globale utilisée par le script d'exécution immédiate dans le segment de script différé.
Maintenir la cohérence de la casse pour la même URL
Nous savons tous que les serveurs UNIX sont sensibles à la casse, mais saviez-vous : le tampon d'Internet Explorer traite également les chaînes majuscules et minuscules différemment. Par conséquent, en tant que développeur Web, vous devez vous rappeler de conserver la cohérence des majuscules des chaînes d’URL pour le même lien à différents endroits. Sinon, différentes sauvegardes de fichiers du même emplacement seront stockées dans la mémoire tampon du navigateur, ce qui augmentera également le nombre de demandes de téléchargement de contenu à partir du même emplacement. Ceux-ci réduisent sans aucun doute l’efficacité de l’accès au Web. N'oubliez donc pas : pour les URL situées au même emplacement, veuillez conserver la casse de la chaîne d'URL dans les différentes pages.

Laissez les balises avoir un début et une fin
Lorsque nous écrivons le nôtre ou visualisons le code HTML d'autres personnes, nous devons avoir rencontré la situation où le les balises ont un début et une fin. Par exemple :
​                  

Exemples de tags sans tête et sans queue

• Le premier
  
• Le deuxième
  
• Le troisième
  UL>
  Évidemment, les trois balises de fermeture
sont manquantes dans le code ci-dessus. Mais cela n’empêche pas sa bonne exécution. En HTML, il existe d'autres balises de ce type, telles que FRAME, IMG et P.
Mais ne soyez pas paresseux, veuillez écrire complètement la balise de fermeture. Cela normalisera non seulement le format du code HTML, mais accélérera également la vitesse d'affichage de la page. Parce qu'Internet Explorer ne prendra pas le temps de déterminer où se termine un paragraphe ou un élément de liste.
​                  

Exemples de marques de début et de fin





• Le premier
🎜>
• Troisième

OK, ce qui précède répertorie 10 techniques de traitement pour accélérer les pages HTML. Il est très simple de les décrire, mais ce n'est qu'en comprenant et en maîtrisant vraiment leur essence et en tirant des conclusions à partir d'un exemple que vous pourrez écrire des programmes plus rapides et meilleurs.                                                                                                          

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!