Il y a maintenant beaucoup de code JavaScript dans les applications Web, et nous recherchons toujours diverses solutions qui les rendent plus rapidement.
1. Nous utilisons la proxyme des événements pour rendre la surveillance des événements plus efficace.
2. Nous utilisons la technologie de la fonction de la fonction pour limiter le nombre de fois qu'une méthode donnée est appelée dans un délai. Veuillez vous référer à: Comment éviter le déclenchement à haute fréquence des fonctions d'événements (traduction chinoise)
3. Nous utilisons un chargeur JavaScript pour charger la partie des ressources dont nous avons vraiment besoin, etc.
Il existe une autre façon de rendre notre page plus rapide et plus efficace. C'est-à-dire d'ajouter et de supprimer dynamiquement certains styles dans la feuille de style via JS, au lieu de demander constamment des éléments DOM et d'appliquer divers styles. Voici comment cela fonctionne.
Obtenez la feuille de style
Vous pouvez choisir n'importe quelle feuille de style pour ajouter des règles de style. Si vous avez une feuille de style défini, vous pouvez ajouter un attribut ID à la balise <nk> ou <ystyle> dans la page HTML, puis vous pouvez obtenir l'objet CSSStylesheet directement via l'attribut de feuille de cet élément DOM. Les feuilles de style peuvent également être traversées à:
La copie de code est la suivante:
// Renvoie une liste de styles de style de style de style type (en forme de tableau)
var sheets = document.stylesheets;
/ *
La valeur de retour est similaire à ce qui suit:
Liste de feuille de style
{
0: Cssylesheet,
1: Cssylesheet,
2: Cssylesheet,
3: Cssylesheet,
4: Cssylesheet,
Longueur: 5,
Article: fonction
}
* /
// Obtenez la première feuille, en ignorant l'attribut multimédia
var sheet = document.stylesheets [0];
Ce à quoi vous devez prêter une attention particulière, c'est l'attribut multimédia de la feuille de style - lorsque vous souhaitez l'afficher à l'écran, vous ne devez pas ajouter de règles CSS à la feuille de style d'impression. Vous pouvez examiner de plus près les informations d'attribut de l'objet CSSStylesheet:
La copie de code est la suivante:
// La console sortira les informations de la première feuille de style
console.log (document.stylesheets [0]);
/ *
Valeur de retour:
Cssylesheet
CSSRULES: CSSRULLELIST [Objet]
Handicap: faux
href: "http://davidwalsh.name/somesheet.css"
Média: médiataliste [objet]
Ownernode: lien [objet]
Ownerrule: null
Parestylesheet: null
Règles: cssrulelist [objet]
Titre: null
Type: "Texte / CSS"
* /
// obtient le type de média (type de support)
console.log (document.stylesheets [0] .Media.MediatExt)
/ *
La valeur de retour peut être:
"All" ou "imprimer" ou d'autres médias appliqués à cette feuille de style
* /
Dans tous les cas, vous avez certainement un moyen d'obtenir la feuille de style pour ajouter les règles.
Créer une nouvelle feuille de style
Dans de nombreux cas, la meilleure façon de le faire pourrait être de créer un nouvel élément <ystyle> pour stocker ces règles dynamiques. Ceci est également très simple:
La copie de code est la suivante:
var sheet = (function () {
// Créer <style> TAG
var style = document.CreateElement ("style");
// Vous pouvez ajouter un attribut multimédia (/ requête multimédia)
// style.setAttribute ("Media", "écran")
// Style.SetAttribute ("Media", "SEUL ÉCRAN ET (MAX-WIDTH: 1024PX)")
// pour webkit hack :(
style.appendChild (document.CreateTextNode (""));
// Ajouter un élément <style> à la page
document.head.ApendChild (style);
return style.sheet;
}) ();
La tragédie est que WebKit a besoin d'un petit hack pour être créé correctement, mais nous n'avons qu'à nous soucier de cette feuille.
Insérer
Dans les versions antérieures de IE, la méthode d'insertrule des feuilles de style n'était pas disponible, bien qu'elle soit désormais la norme pour l'injection de règles. La méthode Insertrule nécessite d'écrire toute la règle CSS, qui est la même que dans la feuille de style:
La copie de code est la suivante:
sheet.insertrule ("En-tête {float: gauche; opacité: 0,8;}", 1);
Bien que cette méthode API JavaScript semble un peu rustique, elle fonctionne comme ça. Le deuxième indice de paramètre indique que l'emplacement (index) soit inséré dans la règle. Ceci est également très utile afin que vous puissiez insérer la même règle / code, ce qui permet aux règles de dos de prendre effet. L'indice par défaut est -1, ce qui représente la fin de l'ensemble entier. Si vous souhaitez avoir des règles de contrôle supplémentaires / paresseuses, vous pouvez également ajouter! Tags importants à une certaine règle pour éviter les problèmes d'indexation.
Ajouter des règles - Méthode Addrule non standard
L'objet CSSSTylesheet a une méthode Adrule qui vous permet d'enregistrer les règles CSS dans la feuille de style. La méthode Addrule accepte trois paramètres: le premier paramètre est le sélecteur, le deuxième paramètre est le code de règle CSS et le troisième est l'index entier à partir de 0, indiquant la position du style (dans le même sélecteur):
La copie de code est la suivante:
sheet.addrule ("# mylist li", "float: gauche; fond: rouge! IMPORTANT;", 1);
La valeur de retour de la méthode Addrule est toujours -1, donc cette valeur n'a aucune signification pratique.
N'oubliez pas que l'avantage de cette approche est que les éléments ajoutés à partir de la page ont automatiquement les styles qui leur sont appliqués, ce qui signifie que vous n'avez pas à les ajouter à des éléments spécifiques, mais les injectez plutôt directement dans la page. Bien sûr, plus efficace!
Règles de demande de sécurité
Étant donné que tous les navigateurs ne prennent pas en charge la méthode Insertrule, il est préférable de créer une fonction de wrapper pour gérer l'application de règle. Voici un moyen rapide de le faire:
La copie de code est la suivante:
fonction addcssrule (feuille, sélecteur, règles, index) {
if ("insertrule" dans la feuille) {
sheet.insertrule (sélecteur + "{" + règles + "}", index);
}
else if ("addrule" dans la feuille) {
sheet.addrule (sélecteur, règles, index);
}
}
// Comment utiliser
addcSSrule (document.stylesheets [0], "En-tête", "float: gauche");
Cette méthode d'outil doit couvrir tous les cas où de nouvelles règles de style sont ajoutées. Si vous vous inquiétez des erreurs dans votre application, vous devez envelopper le code de la méthode avec un bloc d'essai {} catch (e) {}.
Insérer les règles de requête multimédia
Il existe deux façons d'ajouter des règles de requête multimédia. La première consiste à utiliser la méthode Insertrule standard:
La copie de code est la suivante:
sheet.insertrule (
"@Media uniquement écran et (max-largeth: 1140px) {header {display: non;}}"
));
Bien sûr, parce que l'ancienne version d'IE ne prend pas en charge l'inserrule, une autre façon consiste à créer un élément de style, à spécifier l'attribut multimédia approprié, puis à ajouter le style à la nouvelle feuille de style. Cela peut nécessiter l'utilisation d'éléments de style multiple, mais c'est également facile. Je pourrais créer un objet, spécifier la requête multimédia ainsi que l'index, et les créer / les obtenir comme ça.
L'ajout de règles dynamiquement aux feuilles de style est une méthode efficace et peut être plus facile que vous ne le pensez. N'oubliez pas que cette solution peut devoir être utilisée dans votre prochaine grande application, car elle peut vous empêcher de tomber dans la fosse dans le traitement du code et de l'élément.