Optimiser le HTML

Sujet proposé par Luc Maranget
Difficulté: **

Luc.Maranget[at]inria.fr

Important : Il existe une page de suivi, en http://www.enseignement.polytechnique.fr/profs/informatique/Luc.Maranget/htmlopt/suivi.html


Ce sujet en Postscript

1  HTML, très rapidement

HTML est le langage des pages web, c'est du texte, enrichi par des balises, les balises servent à donner au brouteur (browser) des indications de formatage du texte. On peut voir le HTML des pages web en les sauvant puis en les regardant avec emacs, ou à l'aide de la fenêtre idoine du brouteur.

Les balises (tags) commencent toujours par le caractère “<” et se terminent toujours par le caractère “>”. Il existe des balises d'ouverture, par exemple “<B>” et des balises de fermeture, par exemple “</B>”. Les balises d'ouverture et de fermeture doivent être bien parenthésées. Par exemple, pour mettre du texte en gras (bold), on écrira :
<B>Texte en gras</B>
Il existe d'autre balises, pour mettre le texte en italique, en style “machine à écrire”, etc. (I, TT, etc.). L'ensemble du texte entre deux balises est dit un élément (ci-dessus on a un élément “B”, à rendre en gras donc).

Les outils automatiques de génération de pages web font un usage inconsidéré de ces balises. Par exemple il ne sera pas rare de rencontre, dans le HTML généré par ces outils, ce genre de texte :
<B>Texte en gras, </B><B>texte encore en gras</B>
Il est clair, que le source HTML ci-dessus est équivalent au source simplifié suivant :
<B>Texte en gras, texte encore en gras</B>
Remplacer le premier source par le second donne un source plus court, donc qui passera plus vite sur le réseau et sera formaté plus rapidement par le brouteur. Il est important de remarquer dès maintenant que l'effet final (afficher le texte en gras) est inchangé et donc que la transformation est correcte.

2  HTML un peu moins rapide

Évidemment les choses sont un rien plus compliquées que dans la description rapide précédente, à savoir : Du point de vue de l'optimisation on supposera :

3  Exemples d'optimisations

L'optimisation déjà présentée de changer <B>texte1</B><B>texte2</B> en <B>texte1texte2</B> est simple à réaliser : il suffit de supprimer “</B><B>”. Un autre optimisation du même style est de supprimer les éléments de niveau texte vides, par exemple “<B></B>”.

D'autres optimisations vont demander une certaine interprétation du HTML. Par exemple, il est inutile de mettre un texte en italique deux fois. Ainsi, le texte
<I>Texte en italique, <I>texte encore en italique</I></I>
S'optimisera en :
<I>Texte en italique, texte encore en italique</I>
De même, certaines modifications du l'affichage en anullent d'autres ce qui peut conduire à des suppressions de balises, c'est le cas de la taille du texte :
<FONT size=4><FONT size=5>Texte en gros.</FONT></FONT>
S'optimisera en :
<FONT size=5>Texte en gros.</FONT>
Les attributs peuvent être groupés, ainsi :
<FONT size=5><FONT color=red>Texte en gros et en rouge.</FONT></FONT>
S'optimisera en
<FONT size=5 color=red>Texte en gros et en rouge.</FONT>
Enfin, l'ordre des balises importe parfois peu. Ainsi le HTML :
<B><I>Texte en gras et en italique,
</I></B><I><B>la même chose</B></I>
S'optimisera en :
<B><I>Texte en gras et en italique,
la même chose</I></B>
Vous pouvez trouver d'autres optimisations en regardant le HTML produit par les outils automatiques. Par exemple les sujets de projet informatiques, ou produire vous même de telles pages à l'aide de Netscape Composer.

4  Comment procéder ?

Il conviendra d'écrire d'abord un analyseur lexical qui extrait les balises. Cet analyseur est suffisant pour programmer la première optimisation présentée dans les cas simples où les balises d'ouverture n'ont pas d'attributs.

Pour toutes les autres optimisations, il faut interpréter le HTML. C'est à dire concevoir un modèle simple qui détermine les caractéristiques de présentation (taille, couleur, styles actifs ou inactifs) de chaque bout de texte. Le modèle définit aussi les relations entre les styles (tel style anulle tel autre, tels styles sont exprimables en un seul élément, etc.). Il faudra sans doute réaliser une analyse syntaxique du HTML, mais cette analyse sera partielle. En se contentant d'organiser le document selon les éléments de niveau texte, ce qui revient à analyser un langage de parenthèses, on évitera soigneusement la question plus difficile d'analyser tout HTML.

Au final, le programme doit se présenter comme un filtre c'est à dire un programme qui lit le HTML sur son entrée standard et écrit le HTML optimisé sur sa sortie standard. Cette interface utilisateur simple est obligatoire et doit être respectée.

J'attire votre attention sur quelques points cruciaux :

5  Ce qui est demandé

Le minimum est d'écrire un optimiseur correct (qui produit du HTML correct à partir de HTML correct et laisse l'aspect du document inchangé) et aussi performant que possible. Le rapport détaillera votre interprétation de HTML, les optimisations réalisées et les outils utilisés.

Votre optimiseur sera essayé sur des pages HTML, dont certaines seront disponibles à partir de la page de suivi du projet. Notez que cette page contient aussi des informations utiles, par exemple sur HTML ou sur l'analyse lexicale.

Il y a au moins deux extensions possibles (attention elles demandent pas mal de travail) :
Ce document a été traduit de LATEX par HEVEA