Some time in the past ,Web Developers don't pay much attention to memory leaks . At that time, most of the links between pages were relatively simple , And mainly use different connection address to navigate in the same site , This kind of design is very helpful for the browser to release resources . Even if Web There is a real resource leak in the running of the page , Then its influence is also very limited, and it is often ignored .

Today, people are interested in Web Applications have higher requirements . A page probably won't happen for hours URL Jump , And at the same time through Web Service dynamic update page content . Complex event correlation design 、 Object based JScript and DHTML The widespread adoption of Technology , Make the ability of the code reach its limit . Under such circumstances and changes , It's urgent to find out how memory leaks work , Especially in the past, these problems have been blocked by traditional page navigation methods .

The good thing is , When you know what you're looking for , The mode of memory leakage is relatively easy to determine . We already know most of the leakage problems you can encounter , You only need a small amount of extra work to benefit you . Although in some pages, a small amount of leaks can still occur , But the main problems are easy to solve .

What is memory leak ?

Memory leak means that the memory allocated to the application cannot be reallocated , Even when memory is no longer in use . Under normal circumstances , The garbage collector is in DOM Elements and event The processor is not referenced or accessed Recycle them when you ask . however ,IE An earlier version of (IE7 And before ) Memory leaks are very easy to occur in , Because the memory manager doesn't understand Javascript Life cycle and in cycle Broken ( It can be assigned to null Realization ) Memory will not be reclaimed before .

Why you need to pay attention to it ?

In large scale Web Memory leaks in applications are a common unexpected programming error . Memory leaks reduce Web Application performance , Until more memory is wasted than the system can allocate , The application will Out of commission . As one Web developer , Developing an application that meets the functional requirements is only the first step , Performance requirements and Web The success of the application is just as important , What's more, it can lead to application errors Error or browser crash .

The main ways of common memory leaks

(1)、 Circular reference (Circular References)

IE Browser's COM The object instances generated by component and web script engine refer to each other , Will cause memory leaks . This is also Web The most common and main ways of leaking pages ;

A very simple example : One DOM Object is replaced by a Javascript Object reference , At the same time, this Dom I quoted this again Javascript Objects or other Javascript object , This DOM The object can be Can cause memory leaks . This DOM References to objects will not be recycled by the garbage collector when the script stops . To break a circular reference , quote DOM The object of the element or DOM The reference to the object needs to be assigned by null.

(2)、Javascript Closure (Closures)

Closures It can be seen as a special form of circular application which causes a lot of problems at present . Depending on the specified keyword and syntax structure ,Closures Calls are easier to find out ;

because Javascript The limits of scope , Many implementations depend on Javascript Closure , Closures can cause memory leaks because internal methods keep a reference to external method variables , So even though the method returns the internal method, it can continue to access the private variables defined in the external method . Yes Javascript The best way for programmers is to disconnect all event handlers before page reloading .

(3)、 Page cross leaks (Cross-Page Leaks)

  A page cross leak is actually a smaller leak , It's usually when you're browsing , Due to the creation of internal objects .

When 2 A different range of DOM  When objects are added together, a temporary object is created . This DOM Object changes the scope to document when , That temporary object is useless . in other words , DOM  The object should follow the top... That exists from the current page DOM  The elements start to go down until the rest DOM  The order in which the elements are added , So they always have the same range , No temporary objects are generated .

(4).  Automatic type boxing conversion , The following code is in the early days ie A memory leak can occur in a series

var s=”lalala”;

alert(s.length);

s Itself is a string Instead of object, It has no length attribute , So when you visit length when ,JS The engine will automatically create a temporary String Object encapsulation s, And this object is bound to leak . This bug strange , Fortunately, it's quite easy to solve , Remember to do all value types . Before the operation, we need to convert it explicitly :

var s="lalala";

alert(new String(s).length);

How to detect ?

Memory leaks are generally difficult for developers to detect because they are caused by unexpected errors in a large amount of code , But it does not affect the function of the program before the system runs out of memory . That's why people collect application performance metrics over a long test period to test performance .

The simplest way to detect a memory leak is to use the task manager to check memory usage . stay Chrome Open the app in the browser's new tab and see if memory usage is increasing . There are other debugging tools that provide memory monitors , such as Chrome Developer tools . This is from Google founder's website Reactor analysis A tutorial on the features of .

Javascript More articles on memory leaks

  1. 4 class JavaScript Memory leak and how to avoid it

    original text :4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them note : Doodle code Dragon translator's note : There is no word for word translation in this article , I think it's important ...

  2. JavaScript Memory leak , How to solve closure memory leak

    The original link of this article :https://cloud.tencent.com/developer/article/1340979 JavaScript Memory leaks 4 Methods and how to avoid them brief introduction What is memory leak ? Java ...

  3. [ Javascript ] Memory leaks and circular reference resolution

    Memory leak stay javascript in , We pay very little attention to memory management . We create variables , Using variables , It's normal for browsers to pay attention to these underlying details . But as applications get more complex and ajax After melting , Or the user stops on a page ...

  4. Common ones JavaScript Memory leak

    Let's summarize some common JavaScript Memory leak : 1. Unexpected global variables Global variables belong to window object , So it will only follow window Destruction is destruction . 2.console.log() conaole.log() Letter ...

  5. ( translate )JavaScript Memory leak

    Foreword of translator Original address :Memory leaks Recently, I have a brief understanding of JavaScript Closure and garbage collection mechanism of (GC), We have to deal with the concept of memory leak . And then I accidentally found this article , After looking at it, I understand a lot of things , On ...

  6. 【 translate 】JavaScript Memory leak

    Original address :http://javascript.info/tutorial/memory-leaks#tools We're doing JavaScript When developing , Memory management is rarely considered .JavaScript Of variable in ...

  7. [ turn ] common JavaScript Memory leak

    What is memory leak A memory leak is the failure of a program to release memory that is no longer in use due to negligence or error . Memory leaks are not physical disappearances , But after the application allocates some memory , Because of a design mistake , As a result, the control of this segment of memory is lost before releasing it , ...

  8. JavaScript Memory leaks and how to deal with them

    One . Preface I've been planning to summarize JS The idea of knowledge about memory leaks , But I'm always too lazy to write . Franklin once said : lazy , Like rust , It consumes the body more than toil , The key that is often used is always shining . The amway , Start first . Two . Memory declaration cycle ...

  9. common JavaScript Memory leak

    What is memory leak The failure of a program to release memory that is no longer in use due to negligence or error . Memory leaks are not physical disappearances , But after the application allocates some memory , Because of a design mistake , As a result, the control of this segment of memory is lost before releasing it , So as to create ...

Random recommendation

  1. Web The front-end development essence is recommended (jQuery、HTML5、CSS3)【 Series 12 】

    2012 year 12 month 12 Japan ,[<Web Front end developers and designers must read articles > Series 12 ] I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HT ...

  2. Python Crawler learning (11):Beautiful Soup Use

    Before, we extracted important information from web pages mainly by writing regular expressions , But if you think regular expressions are easy to write , Then you're not supposed to be an earthman , And it's easy to go wrong . What I'm going to introduce next Beautiful Soup Can help you simplify these exercises ...

  3. IIS Use of

    1.System.Data.SQLite” Or one of its dependencies . Trying to load a malformed program : modify IIS Advanced settings for the application pool will 32 Bit is set to true

  4. The finger of the sword Offer: Interview questions 11—— Integer power of value (java Realization )

    Title Description : Implementation function double Power(double base, int exponent), seek base Of exponent Power , Do not use library functions , At the same time, there is no need to consider the problem of large numbers Ideas : The key content of this question is ...

  5. Java Study diary I/O

    File class 1.String[] list() Returns a string array of file and folder paths in a directory 2.File[] listFiles() With File Class object array , Return all the files and folders in the directory 3.isDirect ...

  6. 【DOORS】 How to base on DOORS Implementing demand management

    introduction IBM Rational DOORS, abbreviation DOORS, It is a requirement management tool widely recognized by the industry , It has a high market share in the field of demand management at home and abroad . Requirements management as a traditional engineering field , Theoretical development is relatively mature and sound . As more and more ...

  7. QMAKESPEC Detailed explanation of environmental variables

    Related knowledge To explain QMAKESPEC Knowledge of environmental variables , First of all, we need to know the following knowledge qmake .pro Project documents makefile file 1.qmake qmake It's used to create... For development projects on different platforms Makefile Of Tr ...

  8. CNN One of the classic structures in AlexNet

    AlexNet Basic structure Alexnet By 5 It consists of three convolution layers and three fully connected layers , altogether 8 Weight layers ( The pooling layer is not a weight layer because it has no parameters ), among ReLU The activation function acts on each convolution layer and the fully connected layer , In the first convolution layer and the second convolution layer ...

  9. Nginx Related introduction (Nginx What is it? ? What can I do? ?)

    Nginx The birth of I haven't heard of Nginx? Then I must have heard of it " Colleague "Apache Well !Nginx Same as Apache It's the same WEB The server . be based on REST Architectural style , To unify resource descriptors (Unifor ...

  10. Geek time |AI Technical reference

    Learning progress : 014 | intensive reading AlphaGo Zero The paper