Optimiser le code HTML pour accélérer le chargement des pages Web

Les développeurs web doivent-ils maîtriser des technologies de composants complexes pour accélérer l’accès aux pages HTML ? La réponse est : pas nécessairement ! En fait, il existe de nombreuses techniques pour HTML et DHTML qui sont simples et faciles à utiliser. Que vous soyez un vétéran hautement qualifié ou un débutant en programmation, il est essentiel de les comprendre.

Évidemment HTML, "script commun" caché

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 programme de script utilisé par plusieurs pages HTML dans un fichier .js indépendant, puis l'appeler dans la page comme suit :

07e8890b109f087a56f323d63eee2cbb< ;/script>

De cette façon, le fichier public ne doit être téléchargé 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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927, l'enregistrer dans un fichier .css distinct, puis utiliser la balise 3e76e57fc5dd9b761bdd2082385f4936 ou la balise @import dans la page HTML.

c9ccee2e6ea535a969eb3f532ad9fe89

@import url("mysheet1.css");

531ac245ce3e4fe3d50054a55f265927


Veuillez noter deux points : 1. Il n'est pas nécessaire d'inclure la balise c9ccee2e6ea535a969eb3f532ad9fe89 dans le fichier .css 2. Les balises @import et LINK doivent être définies 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, deux problèmes nécessitent une attention particulière :

1. Utiliser le même langage de script

Les pages HTML sont indissociables de la prise en charge des programmes de script. Nous intégrons souvent plusieurs types de scripts dans. la page. Langages de script, 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 36879df9ec853b781d355f37a71b3fa0 C'est une fonctionnalité très intéressante. Si vous souhaitez inclure le contenu de la deuxième page dans un document HTML, la méthode habituelle consiste à utiliser la balise 16a3272e017844f82176ca6782b05081 Mais avec 36879df9ec853b781d355f37a71b3fa0, tout devient plus simple. Par exemple, pour développer une page d'aperçu d'un document, vous pouvez placer une série de sujets à gauche et un IFRAME à droite qui contient le document à prévisualiser ; lorsque la souris passe sur chaque lien de sujet à gauche, un nouvel IFRAME est créé ; créé à droite. Aperçu du document. Ce faisant, l’efficacité du code est sans aucun doute efficace, mais en même temps elle entraîne un traitement lourd et finalement une vitesse lente.

Ce n’est pas grave, nous avons une solution : il suffit d’utiliser 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 left renvoie une chaîne et contient l'unité de mesure (telle que 100 px). Par conséquent, pour définir une nouvelle coordonnée de position, vous devez d'abord traiter la valeur de retour de la chaîne, puis l'attribuer, comme suit :

dim stringLeft, intLeft

stringLeft = element.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 ? Bien sûr! Veuillez regarder ces 4 propriétés : posLeft, posTop, posWidth et posHeight, qui correspondent à la valeur en points de la valeur de retour de chaîne correspondante. D'accord, utilisez ces attributs pour réécrire le code afin d'implémenter la fonction implémentée 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 très 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 de documents, 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 des effets de sortie directs.

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 que : les tampons d'Internet Explorer sont également traités différemment. chaînes minuscules. 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.

Lorsque les étiquettes ont le début et la fin
Lors de l'écriture ou de la visualisation du code HTML d'autrui, nous devons avoir rencontré l'étiquetage et aucune queue. Par exemple :
De toute évidence, il manque trois balises de fermeture cbf331b4cac0bfbcf2a714e444b23b14 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.

  <P>有头无尾标记举例 
     <UL> 
     <LI>第一个
     <LI>第二个
     <LI>第三个
     </UL>

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 perdra pas de temps à déterminer où se termine un paragraphe ou un élément de liste.
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 l'essence et en tirant des conclusions à partir d'un exemple que vous pourrez écrire des programmes plus rapides et meilleurs.

 <P>有头有尾标记举例</P> 
     <UL> 
     <LI>第一个</LI> 
     <LI>第二个</LI> 
     <LI>第三个</LI> 
     </UL>

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!