Améliorer les performances des compléments hébergés par un fournisseur SharePoint
Vous pouvez améliorer les performances de votre complément hébergé par un fournisseur SharePoint en limitant le nombre et la fréquence des appels distants à SharePoint. Un trop grand nombre d’appels au site hôte dégrade les performances. Pour limiter le nombre d’appels distants, vous pouvez implémenter des cookies HTTP ou un stockage local HTML5.
L’exemple Performance.Caching vous montre comment utiliser les cookies HTTP et le stockage local HTML5 pour mettre en cache les données. L’exemple inclut deux compléments hébergés par un fournisseur qui vous permettent d’afficher la section À propos de moi de votre profil utilisateur, d’ajouter des données et de les enregistrer pour plus tard. Le complément ne met pas à jour les informations de profil utilisateur ; il le met en cache afin qu’il puisse être utilisé ultérieurement.
Un exemple utilise des cookies HTTP pour mettre en cache les données, et l’autre utilise le stockage local HTML5.
Utiliser des cookies HTTP pour la mise en cache
La page de démarrage de l’exemple de cookie HTTP affiche des informations de la section À propos de moi de votre profil utilisateur dans une zone de texte. Une deuxième zone de texte vous indique si un cookie a été créé et quand le cookie existant expire. Les informations stockées dans les cookies ne peuvent pas être supérieures à 4 095 octets.
Données affichées dans l’échantillon de mise en cache de cookies HTTP
Le fichier app.js, qui se trouve dans le dossier Scripts du projet web, définit le comportement du bouton Enregistrer pour plus tard . Le code vérifie d’abord que les cookies sont activés dans le navigateur en définissant un cookie de test. Si les cookies sont activés, le code détermine si les informations de profil utilisateur sont déjà stockées dans un cookie. Si ce n’est pas le cas, il utilise JSON pour rechercher les informations À propos de moi , les stocker dans un cookie, puis afficher les informations dans le navigateur.
La fonction suivante définit le cookie et sa date d’expiration.
function setCookie(key, value, expiry, path, domain, secure) {
var todaysDate = new Date();
todaysDate.setTime(todaysDate.getTime());
if (expiry == "") { expiry = "1"; }
// The following line sets for n number of days. For hours, remove * 24. For minutes, remove * 60 * 24.
if (expiry) {
expiry = expiry * 1000 * 60 * 60 * 24;
}
var newExpiry = new Date(todaysDate.getTime() + (expiry));
document.cookie = key + "=" + escape(value) +
( ( expiry ) ? ";expires=" + newExpiry : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
((secure) ? ";secure" : "");
cachingStatus += "\n" + "Creating http cookie for AboutMe data...";
cachingStatus += "\n" + "Cookie will expire " + newExpiry;
$('#status').text(cachingStatus);
}
Utiliser le stockage local HTML5 pour la mise en cache
La page de démarrage de l’exemple de stockage local HTML5 affiche des informations de la section À propos de moi des informations de votre profil utilisateur sur les données mises en cache. La zone de texte affiche ces informations ainsi que l’heure d’expiration (le cas échéant) des informations mises en cache.
Le fichier app.js, qui se trouve dans le dossier Scripts du projet web, définit le comportement du bouton Enregistrer pour plus tard . Le complément vérifie d’abord que le stockage local est activé à l’aide de la fonction suivante.
isHtml5StorageSupported = function () {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
return false;
}
Si le stockage local est pris en charge, la fonction détermine si les informations de profil utilisateur y sont déjà stockées. Si ce n’est pas le cas, il utilise JSOM pour rechercher les informations à propos de moi , les stocker localement, puis pour afficher les informations dans le navigateur. Le code suivant stocke les informations à propos de moi dans une clé nommée aboutMeValue.
var aboutMeValue = personProperties.get_userProfileProperties()['AboutMe'];
$('#aboutMeText').val(aboutMeValue);
// Add to local storage.
localStorage.setItem("aboutMeValue", aboutMeValue);
setLocalStorageKeyExpiry("aboutMeValue");
cachingStatus += "\n" + "Populated local storage with profile properties...";
$('#status').val(cachingStatus);
Le bouton Effacer le cache supprime cette clé, recherche les informations À propos de moi dans votre profil utilisateur et crée une nouvelle clé de stockage locale pour stocker ces informations. Le complément ne définit pas de délai d’expiration par défaut, mais le fichier app.js contient la fonction suivante, qui définit un délai d’expiration pour les données mises en cache.
function setLocalStorageKeyExpiry(key) {
// Check for expiration config values.
var expiryConfig = localStorage.getItem(expiryConfigKey);
// Check for existing expiration stamp.
var existingStamp = localStorage.getItem(key + expiryKeySuffix);
// Override cached setting if a user has entered a value that is different than what is stored.
if (expiryConfig != null) {
var currentTime = Math.floor((new Date().getTime()) / 1000);
expiryConfig = parseInt(expiryConfig);
var newStamp = Math.floor((currentTime + expiryConfig));
localStorage.setItem(key + expiryKeySuffix, newStamp);
// Log status to window.
cachingStatus += "\n" + "Setting expiration for the " + key + " key...";
$('#status').val(cachingStatus);
}
else {
}
}
Avant de rechercher les informations stockées dans la clé de stockage locale, le code utilise la fonction isKeyExpired pour déterminer si la clé a expiré. Pour plus d’informations, voir Personnaliser l’expérience utilisateur à l’aide de compléments hébergés par un fournisseur SharePoint.