


Comment résoudre le mécanisme de récupération de place et les problèmes courants de fuite de mémoire dans l'élévation JS
Cet article présente principalement comment résoudre le mécanisme de récupération de place et les problèmes courants de fuite de mémoire dans JS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Préface<.>
La raison est que je voulais comprendre le mécanisme de fuite de mémoire des fermetures, puis je me suis souvenu de l'analyse du mécanisme de récupération de place dans "JS Advanced Programming". je le comprendrai quand je repenserai après un an, j'écrirai pour le partager avec tout le monde. Si vous l’aimez, vous pouvez l’aimer/le suivre et le soutenir.Cycle de vie de la mémoire :
- Allouez la mémoire dont vous avez besoin :
allouera de la mémoire pour stocker cette entité .
- Faites quelque chose avec la mémoire allouée.
- Libérez-le et renvoyez-le lorsqu'il n'est plus nécessaire :
mécanisme de collecte des déchets.
La soi-disant fuite de mémoire fait référence à : en raison d'une négligence ou d'une erreur, le programme ne parvient pas à libérer la mémoire qui n'est plus utilisée, ce qui entraîne un gaspillage de mémoire.
Mécanisme de récupération de place : Dans des langages tels que C et C++, la mémoire doit être gérée manuellement, ce qui est également la source de nombreux problèmes inutiles. Heureusement, lors du processus d'écriture de js, l'allocation de mémoire et le recyclage de la mémoire sont gérés de manière entièrement automatique, et nous n'avons pas à nous soucier de ce genre de choses. Principe du mécanisme de garbage collection : Le garbage collector
trouvera périodiquement les variables qui ne sont plus utilisées à intervalles de temps fixes, puis libérera la mémoire qu'elles occupent.
Qu'est-ce qu'une variable qui n'est plus utilisée ?
Les variables qui ne sont plus utilisées sont des variables qui ont terminé leur cycle de vie et sont des variables locales. Les variables locales n'existent que pendant l'exécution de la fonction. Lorsque la fonction se termine, il n'y a pas d'autres références (. fermetures). Ensuite, la variable sera marquée pour le recyclage. Le cycle de vie des variables globales ne se terminera que lorsque le navigateur aura déchargé la page, ce qui signifie queles variables globales ne seront pas traitées comme un garbage collection.
Mark clearing : la stratégie de garbage collection actuellement adoptée Principe de fonctionnement : Lorsqu'une variable entre dans l'environnement (comme déclarer une variable dans une fonction), marquez la variable comme "Entrer dans l'environnement", lorsqu'une variable quitte l'environnement, elle est marquée comme "quittant l'environnement". Le souvenir marqué « sortie de l'environnement » est recyclé. Workflow :- Le garbage collector marquera
toutes les variables stockées en mémoire pendant le fonctionnement.
- Supprimez les variables
dans l'environnement et les tags des variables référencées par les variables de l'environnement.
Ces variables avec des balises - existent encore sont considérées comme des variables
prêtes à être supprimées.
Enfin, le garbage collector effectuera la dernière étape d'effacement de la mémoire, - détruira ces valeurs marquées et récupérera l'espace mémoire qu'elles occupent
.
Depuis 2008, IE, Chrome, Fireofx, Safari, Opera
, mais les intervalles de temps de collecte des ordures sont différent. Il y a des différences. Comptage de références : stratégie de récupération de place obsolète
Référence circulaire : une technique de suivi de chaque valeur référencée
Dans les anciens navigateurs (oui, IE encore), les objets BOM et DOM ci-dessous IE9 sont implémentés sous forme d'objets COM en utilisant C++.
Le mécanisme de récupération de place de COM utilise une stratégie de comptage de références. Ce mécanisme ne peut jamais libérer de mémoire lorsqu'une référence circulaire se produit.
La solution est de couper manuellement les liens lorsque nous ne les utilisons pas :var element = document.getElementById('something'); var myObject = new Object(); myObject.element = element; // element属性指向dom element.someThing = myObject; // someThing回指myObject 出现循环引用(两个对象一直互相包含 一直存在计数)。
myObject.element = null; element.someThing = null;
: IE9 BOM et les objets DOM sont convertis en vrais objets js, évitant ainsi l'utilisation de cette stratégie de garbage collection et éliminant la principale cause des fuites de mémoire courantes sous IE9.
Il y a un problème de performances mal indiqué sous IE7 Jetons un coup d'œil :
- 256 variables, 4 096 littéraux d'objet (ou tableau) ou des chaînes de 64 Ko, atteignant tout niveau critique. La valeur déclenche l'exécution du garbage collector.
- Si un script js conserve autant de variables tout au long de son cycle de vie, le garbage collector continuera à s'exécuter fréquemment, provoquant de sérieux problèmes de performances.
- IE7 a résolu ce problème.
Bien qu'il existe un mécanisme de récupération de place, certaines situations peuvent toujours provoquer des fuites de mémoire lorsque nous écrivons du code et faites attention à les éviter lors de l'écriture de programmes.
Variables globales inattendues :
Nous avons mentionné ci-dessus que
les variables globales ne seront pas récupérées Parfois, la situation suivante se produit dans notre codage : . 当我们使用默认绑定,this会指向全局, 解决方法:在函数内使用严格模式or细心一点 当然我们也可以手动释放全局变量的内存: 当不需要 解决方法: 在定时器完成工作的时候,手动清除定时器。 闭包可以维持函数内局部变量,使其得不到释放,造成内存泄漏。 解决方法:手动解除引用, 就是IE9以下的循环引用问题,上文讲过了。 不信的话,可以看下这个dom。 解决办法:refA = null; 过多的console,比如定时器的console会导致浏览器卡死。 解决:合理利用console,线上项目尽量少的使用console,当然如果你要发招聘除外。 记住一个原则:不用的东西,及时归还,毕竟你是'借的'嘛。 减少不必要的全局变量,使用严格模式避免意外创建全局变量。 在你使用完数据后,及时解除引用(闭包中的变量,dom引用,定时器清除)。 组织好你的逻辑,避免死循环等造成浏览器卡顿,崩溃的问题。 即使是1byte的内存,也叫内存泄漏,并不一定是导致浏览器崩溃、卡顿才能叫做内存泄漏。 一般是堆区内存泄漏,栈区不会泄漏。 基本类型的值存在内存中,被保存在栈内存中,引用类型的值是对象,保存在堆内存中。所以对象、数组之类的,才会发生内存泄漏。 使用chorme监控内存泄漏,可以看一下这篇文章 了解了内存泄漏的原因以及出现的情况,那么我们在编码过程中只要多加注意,就不会发生非常严重的内存泄漏问题。 以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网! 相关推荐: function foo() {
this.bar2 = '默认绑定this指向全局' // 全局变量=> window.bar2
bar = '全局变量'; // 没有声明变量 实际上是全局变量=>window.bar
}
foo();
this.something
也会创建一个全局变量,这一点可能很多人没有注意到。 function foo() {
"use strict";
this.bar2 = "严格模式下this指向undefined";
bar = "报错";
}
foo();
window.bar = undefined
delete window.bar2
被遗忘的定时器和回调函数
setInterval
或者setTimeout
时,定时器没有被clear,定时器的回调函数以及内部依赖的变量都不能被回收,造成内存泄漏。var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
// 定时器也没有清除
}
// node、someResource 存储了大量数据 无法回收
}, 1000);
闭包:
function bindEvent() {
var obj = document.createElement("XXX");
var unused = function () {
console.log(obj,'闭包内引用obj obj不会被释放');
};
// obj = null;
}
obj = null
。循环引用问题
没有清理DOM元素引用:
var refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, "refA"); // 但是还存在引用 能console出整个p 没有被回收
console保存大量数据在内存中。
如何避免内存泄漏:
关于内存泄漏:
结语
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...

Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Pendant la programmation, les marges négatives dans CSS (négatif ...

En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...

Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...

La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...

Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...

Les meilleures pratiques concernant l'introduction des fichiers de style Electui que de nombreux développeurs utilisent élément ...

Implémentation de dispositions réactives à l'aide de CSS lorsque nous voulons implémenter des modifications de mise en page sous différentes tailles d'écran dans la conception Web, CSS ...
