Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use JS to understand the memory leak of IE", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "how to use JS to understand IE memory leak"!

I. Preface

Apart from the fact that IE6~8 does not comply with W3C standards and all kinds of weirdness, I think the most criticized problem is the memory leak. These days, take advantage of the opportunity of project technical research to get to know each other again. If there are any mistakes in the following contents, please correct them. Thank you!

A big pile of catalogs!

Second, where is the memory leak?

2.1. JS Engine Object, DOM Element and BOM Element

2.2. Memory recovery Mechanism of JS Engine Object

2.3. Memory recovery Mechanism of DOM Element

2.4. Two ways of leakage

Three or four leakage modes

3.1. Circular References

3.2. Closures

3.3. Cross-page Leaks

3.4. Pseduo-Leaks

Fourth, an example of the leakage of the current page

4.1. DOM Element reference island caused by DOM Hyperspace

4.2. Releasing Iframe is not that simple.

Fifth, the src that continuously modifies IMG under IE8 runs out of memory?

VI. Monitoring tools

VII. Summary

VIII. Reference

Second, where is the memory leak?

SPA ran for a long time and the response speed of the page decreased sharply and was complained by users, prevaricating saying, "IE is more prone to memory leaks, just brush the page." Is it really possible to free leaked memory by brushing the page? Let's discuss it together!

Memory leak: memory resources cannot be released & & loss of pointer to this memory area = > unable to reuse memory resources, resulting in memory overflow

2.1. JS Engine Object, DOM Element and BOM Element

There are three types of objects that we can manipulate in Script: JS Engine Object, DOM Element, and BOM Element.

JS Engine Object: var obj = Object (); var array = []; and so on

DOM Element: var el = document.createElement ('div'); var div = document.getElementById (' name'); and so on

BOM Element: window; _ window.location; and so on

Only JS Engine Object and DOM Element can be CRUD, so memory leaks may occur.

2.2. Memory recovery Mechanism of JS Engine Object

IE's JScript Garbage Collector uses the Mark-and-Sweep algorithm, which first traverses all JS Engine Object and marks unreferenced objects when performing garbage collection, and then frees up the marked memory space.

Because of the Mark-and-Sweep algorithm, it can also free up the memory space of the reference island.

CollectGarbage (), which is unique under IE, is used to recycle JS Engine Object with no reference or reference island.

2.3. Memory recovery Mechanism of DOM Element

DOM Element is recycled when it is no longer referenced, but it remains to be seen exactly by whom and when.

2.4. Two ways of leakage

a. Current page leak: memory resources that can be freed by refreshing the page or jumping to another page.

b. Cross-page leaks: refresh pages or jump to memory resources that cannot be freed by other pages.

At present, the handling of page leaks is relatively simple, and cross-page leaks are the main part of the process.

Three or four leakage modes

Here are four anti-patterns that Justin Rogers has identified that can cause leaks.

3.1. Circular References (resulting in cross-page memory leaks)

Circular references are the root cause of memory leaks, and other leak patterns are still due to circular references.

Leak Memory

Var $el = {tag: 'div', dom: null} / / create JS Engine Object $el.dom = document.getElementById (' test') / / JS Engine Object references to DOM Element $el.dom.expandoProp = $el / / DOM Element references to JS Engine Object / / cause circular references / / GC not to clean up $el, and $el.dom setTimeout ('location.reload ()', 500) / / refresh the page when the page is refreshed

Non-Leak Memory

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.