Cet article présente principalement l'apprentissage de la mise en mémoire tampon des données du code source de jQuery. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer
Fuite de mémoire
Qu'est-ce qu'une fuite de mémoire ?
Une fuite de mémoire signifie qu'un morceau de mémoire ne peut ni être utilisé ni résilié par le processus du navigateur. Le navigateur utilise le garbage collection automatique pour gérer la mémoire, ce qui est déjà assez bon, mais il y a encore des bugs, donc des fuites de mémoire se produiront.
Les fuites de mémoire courantes sont :
- Référence circulaire
- fermeture javascript
- Insertion DOM
- Les références circulaires contenant des objets DOM provoqueront des fuites de mémoire dans la plupart des navigateurs grand public actuels
// [1]
var a = new Object();
var b = new Object();
a.r = b;
b.r = a;
// [2]
var a = new Object();
a.r = a;
// 循环引用很常见且大部分情况下是无害的,但当参与循环引用的对象中有DOM对象或者ActiveX对象时,循环引用将导致内存泄露。
Copier après la connexion
- a été supprimé du DOM, mais il existe toujours des objets ou des variables faisant référence à l'élément, ce qui rend impossible sa suppression. Cette situation peut être éliminée en actualisant le navigateur.
- Une autre situation est une référence circulaire. Un objet DOM et un objet JS se réfèrent l'un à l'autre. Cela provoque une situation plus grave. Même s'ils sont rafraîchis, la mémoire ne sera pas réduite. Il s’agit d’une fuite mémoire au sens strict.
Ainsi, dans les applications pratiques quotidiennes, nous avons souvent besoin de mettre en cache certaines données pour les éléments, et ces données sont souvent étroitement liées aux éléments DOM. Étant donné que les éléments DOM (nœuds) sont également des objets, nous pouvons directement étendre les attributs des éléments DOM. Cependant, l'ajout d'attributs personnalisés et de trop de données aux éléments DOM peut provoquer des fuites de mémoire, nous devrions donc essayer d'éviter de le faire. Par conséquent, une meilleure solution consiste à utiliser une méthode à faible couplage pour connecter le DOM et les données du cache.
Le mécanisme de mise en mémoire tampon de jquery résout ce problème.
Mécanisme de mise en mémoire tampon de jquery
Idée :
- En raison de la création d'attributs personnalisés sur l'objet dom, lorsqu'il est Quand il y a des références à des objets js, etc., cela peut provoquer des fuites de mémoire. Par conséquent, le mécanisme de mise en mémoire tampon jquery que nous utilisons ici consiste à créer un objet tampon
sur jquery pour stocker ce que nous voulons enregistrer dans les données DOM. cache
- Mais la question revient : comment mapper les éléments DOM aux données de l'objet
dans jquery ? cache
- Nous créons d'abord un attribut unique sur l'objet DOM, qui est la valeur de
. La valeur de expando
est une chaîne, expando
, qui garantit essentiellement l'unicité de cet attribut, quelle que soit la différence entre le DOM. 'jquery'+date
- Ensuite, définissez la valeur du
` de chaque nœud sur un identifiant auto-croissant pour maintenir l'unicité globale, qui peut être obtenue en utilisant dom[expando]
` Les données correspondantes sont obtenues. Autrement dit, l'identifiant est comme la clé pour ouvrir une pièce (nœud DOM). Tous les caches de chaque élément sont placés dans une carte, afin que plusieurs données puissent être mises en cache en même temps. cache[id]
- Bref, la valeur correspondante de
se retrouve désormais sur l'élément DOM, qui est l'uid. Recherchez ensuite les données spécifiques de l'objet Cache du tampon de données via cet uid. expando
var cache = {
"uid1": { // DOM节点1缓存数据,
"name1": value1,
"name2": value2
},
"uid2": { // DOM节点2缓存数据,
"name1": value1,
"name2": value2
}
// ......
};
Copier après la connexion
La différence entre les données de méthode statique et la méthode d'instance
var ele1 = $("#aaron");
var ele2 = $("#aaron");
ele1.data('a',1111);
ele2.data('a',2222);
show('第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖')
show(ele1.data('a')) // 2222
show(ele2.data('a')) // 2222
show()
//=======第二组=========
show('第二组,通过$.data的方式,取到2组b值,未覆盖')
$.data(ele1,"b","1111") // 1111
$.data(ele2,"b","2222") // 2222
show($.data(ele1,"b"))
show($.data(ele2,"b") )
function show(data) {
if (arguments.length == 2) {
var info = arguments[0]
var data = arguments[1];
for (var key in data) {
$("body").append('
Copier après la connexion
' + info +'key->' + key + '; value->' + data[key] + '')
}
return
}
if (!data) {
return $("body").append('')
}
if (typeof data === 'object') {
for (var key in data) {
$("body").append('
key->' + key + '; value->' + data[key] + '')
}
} else {
$("body").append('
' + data + '')
}
}Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Le contenu principal du code source jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!