En savoir plus sur la mise en mémoire tampon des données dans le code source jQuery

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 :

1. Référence circulaire

2. fermeture javascript

3. 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对象时，循环引用将导致内存泄露。

• 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 :

1. 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

2. Mais la question revient : comment mapper les éléments DOM aux données de l'objet

   dans jquery ? cache

3. 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

4. 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]

5. 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
    }
    // ......
};

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('

' + 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 :

Analyse de la fonction de rappel du code source jQuery

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!