Procédure pas à pas : utilisation de la mise en cache de sortie pour améliorer les performances d'un site Web

Article
08/21/2008

Mise à jour : novembre 2007

La performance est un aspect critique de toute application Web. Décroître la quantité de traitement qu'un serveur Web doit effectuer pour se conformer aux demandes individuelles engendre des temps de réponse plus rapides, la capacité du serveur à gérer plus de demandes simultanées et une charge réduite sur les systèmes de données intermédiaires et principaux.

Pour atteindre de meilleures performances avec ASP.NET, vous pouvez utiliser la mise en cache de sortie afin de réduire la charge de travail du serveur. La mise en cache de sortie est une optimisation qui réduit le temps de réponse du serveur Web.

Normalement, lorsqu'un navigateur demande une page ASP.NET, ASP.NET crée une instance de la page, exécute tout code se trouvant dans la page, exécute les requêtes de base de données (le cas échéant), assemble dynamiquement la page puis envoie le résultat au navigateur. La mise en cache de sortie permet à ASP.NET d'envoyer une copie prétraitée d'une page plutôt que d'effectuer ce processus pour chaque demande. Cette différence réside dans la réduction du temps de traitement du serveur Web ce qui augmente la performance et permet une plus grande évolutivité.

Cette procédure pas à pas illustre les tâches suivantes :

La mise en cache de pages, à l'aide soit de paramètres individuels, de données ou d'une directive de page pour mettre en cache de sortie la totalité de la page, indépendamment du type de navigateur.
L'utilisation de profils de cache au niveau de l'application, une fonctionnalité qui vous permet de définir des paramètres de mise en cache de sortie pour une application complète. Les pages individuelles peuvent s'associer aux profils contenus dans votre fichier Web.config. Cela vous permet de contrôler la mise en cache de manière centralisée au lieu de modifier chaque page.
La mise en cache selon des paramètres individuels envoyés avec la page.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

Visual Web Developer (Visual Studio)
Microsoft .NET Framework version 2.0

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer (consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante de cette procédure pas à pas. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveau site Web. Dans le menu Fichier de Visual Web Developer Express, cliquez sur Nouveau, puis sur Site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, sélectionnez le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.

Configuration de la mise en cache au niveau de la page

Cette procédure vous initie à la mise en cache de page de base. Dans cette procédure, vous ajoutez un contrôle Label à votre page qui affiche l'heure de la création de la page puis vous configurez la page à mettre en cache. En affichant l'heure de création de la page vous pouvez voir que la réponse à la demande de page est accomplie à partir du cache.

Pour configurer la mise en cache au niveau de la page

Ouvrez ou basculez vers la page Default.aspx. Vous pouvez également utiliser toute autre page dans votre site Web.
Basculez en mode Design.
À partir du groupe Standard dans la boîte à outils, faites glisser un contrôle Label sur votre page, en conservant le nom par défaut Label1.
Double-cliquez sur une zone vide de la page.

Le concepteur bascule sur l'éditeur de code et crée une méthode Page_Load.

Ajoutez aux méthodes le code mis en surbrillance suivant :

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
     Label1.Text = System.DateTime.Now.ToString()
End Sub

protected void Page_Load(Object sender, System.EventArgs e)
{
     Label1.Text = System.DateTime.Now.ToString();
}

Appuyez sur CTRL+F5 pour exécuter la page.

Lorsque la page apparaît dans le navigateur, la date et l'heure actuelles seront visibles. Appuyez sur le bouton Actualiser de votre navigateur et remarquez que l'horodatage change à chaque fois.
Fermez le navigateur.
Ajoutez la directive @ OutputCache suivante au début de la page :
```
<%@ OutputCache Duration="15" VaryByParam="none" %>
```
Cette directive configure la page à mettre en cache. L'attribut Duration spécifie que la page restera dans le cache pendant 15 secondes.
Appuyez sur CTRL+F5 pour exécuter la page à nouveau.
Actualisez la page plusieurs fois.

Remarquez que l'affichage de l'heure est mis à jour uniquement toutes les 15 secondes, indépendamment du nombre d'actualisations du navigateur. En effet, la réponse à la demande est accomplie à partir du cache tant que la durée ne s'est pas écoulée, moment auquel le code de page est à nouveau exécuté.

Définition de la mise en cache au niveau de l'application

Au cours de la précédente procédure, vous avez configuré la mise en cache pour une page individuelle. Dans certaines circonstances, vous pouvez souhaiter configurer la mise en cache pour toutes les pages de votre site Web. Vous pouvez également souhaiter établir des règles de mise en cache (profils) différentes et appliquer les profiles de cache à des jeux de pages individuelles. La définition de la mise en cache au niveau de l'application vous permet de modifier le comportement de cache à partir d'un fichier de configuration seul plutôt que de modifier la directive @ OutputCache de pages individuelles. Dans la procédure suivante, vous allez installer un profil de cache simple et l'utiliser pour la page avec laquelle vous travailliez.

Pour configurer la mise en cache au niveau de l'application

Si vous avez déjà un fichier Web.config, passez à étape 4.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web, puis cliquez sur Ajouter un nouvel élément.
Dans la boîte de dialogue Ajouter un élément, cliquez sur Fichier de configuration Web puis cliquez sur Ajouter.

Assurez-vous de bien utiliser le nom Web.config.

Ajoutez le XML suivant en tant qu'enfant de l'élément system.web.

<!-- caching section group -->
<caching>
<outputCacheSettings>
    <outputCacheProfiles>
        <add name="AppCache1" enabled="true" duration="60"/>
    </outputCacheProfiles>
</outputCacheSettings>
</caching>

Enregistrez le fichier et fermez-le.
Ouvrez ou basculez vers la page Web avec laquelle vous travailliez puis basculez en mode Source.
Modifiez la directive @ OutputCache afin d'obtenir la directive suivante :
```
<%@ OutputCache CacheProfile="AppCache1" VaryByParam="none" %>
```
Appuyez sur CTRL+F5 pour exécuter la page.
Actualisez la page plusieurs fois.

Cette fois-ci la date reste identique pendant la durée spécifiée dans le profil de cache qui est de 60 secondes.

Mise en cache à l'aide de paramètres

La directive @ OutputCache requiert que vous définissiez l'attribut VaryByParam qui jusqu'à présent avait la valeur "none". L'attribut VaryByParam vous permet de configurer la mise en cache afin qu'ASP.NET stocke différentes versions d'une page selon des paramètres tels que les chaînes de requête, les valeurs de publication de formulaire, les en-têtes de demande, etc.

Par exemple, vous pouvez utiliser des paramètres de cache dans une page qui affiche les conditions météorologiques pour des villes choisies, où les données de temps sont actualisées uniquement toutes les trois heures. Dans ce scénario, vous souhaitez mettre en cache une version séparée de la page pour chaque ville. Pour ce faire, définissez le paramètre de cache de sorte qu'il varie en fonction d'un paramètre de chaîne de requête.

Dans la procédure suivante, vous modifiez le contrôle Label que vous avez ajouté à votre page afin qu'il affiche l'heure avec un arrière-plan coloré. Vous pouvez modifier la couleur en utilisant un contrôle TextBox pour entrer un nom de couleur.

Lorsque vous envoyez la page, la couleur que vous entrez est envoyée en tant que données de publication et la couleur derrière le contrôle Label change. Lorsqu'une nouvelle couleur est demandée (lorsque la page inclut de nouvelles données de publication), la page est régénérée et l'horodatage est mis à jour. Toutefois, les demandes suivantes pour la même couleur engendreront le retour de la page mise en cache (jusqu'à ce que l'intervalle de durée ait été dépassé).

Mise en cache selon des paramètres

Ouvrez ou basculez vers la page sur laquelle vous travailliez.
Basculez en mode Design.
À partir du groupe Standard dans la boîte à outils, faites glisser un contrôle TextBox sur votre page et affectez à son ID la valeur Couleur.
Faites glisser un contrôle Button sur la page, en conservant le nom par défaut Button1.
Affectez à la propriété Text du contrôle Button la valeur "Changer de couleur".

Double-cliquez sur le contrôle Button afin de créer un gestionnaire d'événements Click.

Dans la méthode, ajoutez le code mis en surbrillance suivant :

Protected Sub Button1_Click(ByVal sender As Object, _ 
        ByVal e As System.EventArgs) Handles Button1.Click
    Label1.BackColor = _        System.Drawing.Color.FromName(Server.HtmlEncode(Color.Text))
End Sub

protected void Button1_Click(Object sender, System.EventArgs e)
{
    Label1.BackColor =         System.Drawing.Color.FromName(Server.HtmlEncode(Color.Text));
}

Affectez à l'attribut defaultbutton de l'élément form la valeur "Button1".

De cette façon, le gestionnaire d'événements Click du bouton est appelé lorsque l'utilisateur appuie sur la touche ENTRÉE.

Remplacez la directive @ OutputCache par la version suivante :

<%@ OutputCache Location="Server" Duration="60" VaryByParam="Color" %>

Appuyez sur CTRL+F5 pour exécuter la page.
Tapez un nom de couleur tel que le "rouge" ou "bleu" dans la zone de texte puis cliquez sur Changer de couleur.

ASP.NET met en cache une version de la page qui utilise la couleur que vous avez spécifiée.
Actualisez la page plusieurs fois.

Si vous ne tapez pas de nouveau nom de couleur, la date et l'heure ne changeront pas pendant au moins une minute, comme spécifié par l'attribut Duration dans votre directive @ OutputCache.
Entrez une nouvelle couleur, telle que le "vert" ou "violet orchidée" puis envoyez la page.

Cette fois-ci vous remarquerez que l'heure se met à jour en même temps que la couleur.

Étapes suivantes

Cette procédure pas à pas a illustré des concepts de base de la mise en cache de pages ASP.NET Vous pouvez également souhaiter explorer ces techniques de mise en cache supplémentaires :

Au lieu d'utiliser des déclarations de page, spécifiez la mise en cache par programme. Par exemple, vous pourriez accéder à la classe HttpCachePolicy (via Page.Response.Cache) dans votre méthode Page_Load et définir les valeurs et le comportement en conséquence.
Mettez en cache les pages liées aux données afin qu'elles soient régénérées uniquement lorsque les données dont elle dépendent ont été modifiées. Pour plus d'informations, consultez Procédure pas à pas : utilisation de la mise en cache de sortie ASP.NET avec SQL Server.

Voir aussi

Share via