L'optimisation HTML accélère les pages Web

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 un certain contenu d'ingrédient, vous pouvez envisager de séparer ces parties communes séparément. Par exemple: nous pouvons écrire des scripts utilisés par plusieurs pages HTML dans des fichiers .js indépendants, puis l'appeler dans la page comme suit:

<scriptsrc = myfile.js> </ script>

De cette façon, le fichier public ne doit être téléchargé qu'une seule fois, puis entre dans le tampon. La prochaine fois que j'appellerai la page HTML contenant à nouveau le fichier public, le temps de téléchargement sera considérablement réduit.

CSS est un habillage HTML, et une belle page Web ne peut pas être sans elle. Il existe de nombreuses façons de se référer à CSS dans les pages HTML, et l'efficacité des différentes méthodes est différente. Habituellement, nous pouvons extraire le code de contrôle de style défini entre <style> </fyle>, l'enregistrer dans un fichier .css distinct, puis le référer dans la page HTML dans la balise <ink> ou @import balise:

<style>

@importUrl (mysheet1.css);

</ style>

Veuillez noter 2 points: 1. La balise <style> ne doit pas être incluse dans le fichier .css; 2. Les balises @Import et Link doivent être définies dans la partie principale de la page HTML.

La minimisation de l'espace mémoire occupée par les pages HTML est un moyen efficace d'accélérer les téléchargements de pages. À cet égard, il y a deux problèmes auxquels faire attention:

Les pages HTML ne peuvent pas être séparées de la prise en charge des programmes de script. Nous intégrons souvent plusieurs langages de script dans les pages, telles que JavaScript et VBScript. Cependant, je ne sais pas si vous remarquez: un tel mélange ralentit la vitesse d'accès de la page. La raison en est que pour interpréter et exécuter plusieurs codes de script, plusieurs moteurs de script doivent être chargés en mémoire. Alors, essayez d'écrire du code dans la même langue de script sur la page.

Avez-vous utilisé la balise <frame>? C'est une fonctionnalité très merveilleuse. Si vous souhaitez inclure le contenu de la deuxième page dans un document HTML, la manière habituelle est d'utiliser la balise <Frameset>. Mais avec <frame>, tout devient simple. Par exemple, pour développer une page d'aperçu de document, vous pouvez placer une série de sujets à gauche et un iframe à droite, qui contient le document à prévisualiser; Lorsque la souris passe par chaque lien de sujet à gauche, créez un nouvel iframe à droite pour prévisualiser le document. Ce faisant, l'efficacité du code est sans aucun doute efficace, mais en même temps, elle conduit à un traitement lourd et finalement à une vitesse lente.

Utilisez un seul iframe. Lorsque la souris pointe vers un nouveau sujet, il vous suffit de modifier l'attribut SRC de l'élément IFRAME. De cette façon, un seul document d'aperçu restera en mémoire à tout moment.

Lorsque vous parcourez la page en ligne tous les jours, vous verrez certainement de nombreux effets d'animation. Par exemple, un petit lapin mignon marche d'avant en arrière sur la page ... La technologie de base pour réaliser cet effet est le positionnement du CCS. Habituellement, nous utilisons élément.style.left et élément.style.top pour atteindre le but du positionnement graphique. Cependant, cela crée des problèmes: la propriété gauche renvoie une chaîne et contient l'unité de mesure (comme 100px). 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 avant de pouvoir attribuer la valeur, comme suit:

dimstringleft, intleft

StringLeft = élément.style.left

intleft = parseInt (Stringleft)

intleft = intleft 10

element.style.left = intleft;

Vous sentirez certainement que vous devez écrire un code aussi complexe pour faire une telle chose. Y a-t-il un moyen plus concis? Regardez ces 4 propriétés: Posleft, Postop, Poswidth et Posheight, qui correspondent au nombre de points de la valeur de retour de la chaîne correspondante. OK, utilisez ces propriétés pour réécrire le code pour implémenter les fonctions implémentées par le code ci-dessus:

element.style.posleft = 10

Le code est plus court, mais plus rapide!

En ce qui concerne les effets d'animation, bien sûr, l'utilisation des minuteries est inséparable. La méthode habituelle consiste à utiliser Window.SetTimeout pour localiser en continu des éléments sur la page. Cependant, s'il y a plusieurs animations sur la page à afficher, avez-vous besoin de définir plusieurs minuteries? La réponse est non! La raison est simple: la fonction de minuterie consommera beaucoup de ressources système précieuses. Mais nous pouvons toujours contrôler plusieurs animations sur la page, et l'astuce consiste à utiliser une boucle. Dans la boucle, contrôlez la position de l'animation correspondante en fonction des différentes valeurs de variable, une seule fenêtre.SetTimeout () Fonction Call est utilisée dans toute la boucle.

Laissez l'image apparaître et apparaissez occasionnellement créer des effets intéressants. Il existe deux façons d'y parvenir: utiliser l'attribut de visibilité ou l'attribut d'affichage de CSS. Pour les éléments de position absolue, Diplay et la visibilité ont le même effet. La différence entre les deux est que l'élément réglé à afficher: aucun n'occupera l'espace du flux de documents, tandis que l'élément défini sur la visibilité: Hidden restera toujours dans sa position d'origine.

Mais si vous souhaitez gérer les éléments en position absolue, l'utilisation de la visibilité sera plus rapide.

Un conseil important pour rédiger une page Web DHTML est: Démarrer petit. Lorsque vous écrivez une page DHTML pour la première fois, assurez-vous de ne pas essayer d'utiliser toutes les fonctionnalités DHTML que vous connaissez dans la page. Une seule nouvelle fonctionnalité peut être utilisée à la fois et les modifications résultantes peuvent être soigneusement observées. Si vous constatez que les performances ont diminué, vous pouvez rapidement trouver pourquoi.

Le report 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 crois que vous ne pouvez pas vivre sans. Il indique au navigateur que le segment de script contient du code qui n'a pas besoin d'être exécuté immédiatement et, en conjonction avec l'attribut SRC, il peut également permettre à ces scripts d'être téléchargés en arrière-plan et le contenu du premier plan s'affiche normalement à l'utilisateur.

1. N'appelez pas la commande Document.Write dans le bloc de script de type Defer, car Document.Write produira un effet de sortie directe.

2. De plus, n'incluez pas de variables ou de fonctions globales à utiliser pour exécuter le script immédiatement dans le bloc de script de différence.

Nous savons tous que les serveurs UNIX sont sensibles à la casse, mais saviez-vous que les tampons d'Internet Explorer traitent également les chaînes de cas différemment. Par conséquent, en tant que développeur Web, vous devez vous rappeler de maintenir la cohérence du cas des chaînes d'URL du même lien à différents endroits. Sinon, les sauvegardes de différents fichiers au même emplacement seront stockées dans le tampon du navigateur, qui augmentera également le nombre de demandes de téléchargement de contenu au même endroit. Tous ces éléments réduisent sans aucun doute l'efficacité d'accès Web. Alors n'oubliez pas: URL au même endroit, veuillez garder la cohérence du cas des chaînes d'URL dans différentes pages.

Lorsque nous écrivons ou visons par nous-mêmes le code HTML des autres, nous devons avoir rencontré des situations où les marques n'ont aucune fin. Par exemple:

<p> Exemple avec tête et pas de marques de queue

<ul>

<li> Le premier

<li> le second

<li> le troisième

</ul>

De toute évidence, il y a trois balises de fin </li> manquantes dans le code ci-dessus. Mais cela ne l'empêche pas d'être correctement exécuté. Dans HTML, il existe de telles balises, telles que le cadre, l'IMG et le P.

Mais ne soyez pas paresseux. Veuillez écrire la marque de fin intacte. Cela rend non seulement la norme du format de code HTML, mais accélère également la vitesse d'affichage de la page. Parce qu'Internet Explorer ne passera pas de temps à juger et à calculer où se termine le paragraphe ou la liste.

<p> Exemple avec les marques de tête et de queue </p>

<ul>

<li> d'abord </li>

<li> Deuxième </li>

<li> Troisième </li>

</ul>

Ok, ce qui précède répertorie 10 techniques de traitement pour accélérer les pages HTML. Il est simple de les décrire, mais seulement en comprenant et en maîtrisant vraiment l'essence et en apprenant d'un exemple ou d'un autre que vous pouvez écrire des programmes plus rapides et meilleurs.