Understanding front end garbage collection

Fat sheep 2021-05-03 13:23:01
understanding end garbage collection

brief introduction

javascript The variables are no longer used , It's garbage , We should get rid of it , So as not to occupy memory . But the garbage collection process is an approximate and imperfect solution , Because whether a piece of memory is still useful , Belong to “ Indeterminate ” problem , It means it can't be solved by algorithms . At present, the mainstream browsers use mark removal , Before introducing tag clearing, let's talk about why reference counting is eliminated .

Reference count

The reference count was first calculated by Netscape Navigator 3.0 use , But soon there were serious problems : Circular reference . Circular reference , It's the object A There is a pointer to the object B, The object B Objects are also referenced A.

function problem() {
let objectA = new Object();
let objectB = new Object();
objectA.someOtherObject = objectB;
objectB.anotherObject = objectA;
 Copy code 

In this case ,objectA and objectB They refer to each other through their own attributes , It means that their reference numbers are all 2. stay Tag cleanup strategy , That's not a problem , Because at the end of the function , Neither of these objects is in scope . And in the reference counting strategy objectA and objectB There will be after the function , Because their reference number will never become 0. If the function is called many times use , A lot of memory will never be released . So ,Netscape stay 4.0 Version gives up reference counting , Switch to tag cleaning .

Mark clear

  • 1. When the garbage collection program is running , Will mark all variables stored in memory .
  • 2. Then it takes all the variables in the context , And the tag of the variable referenced by the variable in the context is removed .
  • 3. After that, the marked variables are to be deleted , The reason is that no variables in the context can access them .


Here is an implementation of the second step . Accessibility is all, accessibility ,window(globle) Can access a variable A( No matter how many layers are taken ), that A It's accessible , that A It could be used in the future ,A It won't be deleted . Let's take a look at the picture below to see , It's accessible on the left , It's not accessible on the right , On the right, there will be another stage v8 Engine recovery

 Accessibility .png

Relevant concepts


Understand the concept of garbage collection , It's much easier to understand closures . Why don't closures be destroyed , Because the return value of the current function after execution ( It's usually a function ) Referenced by a variable in the outer context , So the environment in a closure can reach , So it won't be destroyed . But also because it won't be destroyed , So we should pay attention to memory leaks , That is, if the closure takes up a lot of memory , And assign it to the global variable . And we do it all the time , That memory will take up more and more , That is, there is a memory leak .


There is also a related test site , Namely weakmap Why not be gc(Garbage Collection, garbage collection ) Because its references to values are not included in the garbage collection mechanism , So there's one in the name "Weak", That means it's a weak reference . To prevent memory leaks, we need to manually set null. map The key is the object , This reference should always reach , This is not good , There will be a memory leak . To avoid us forgetting Null,es6 Added weakmap This data structure , As long as other references to the referenced object are cleared , The garbage collection mechanism will release the memory occupied by the object . in other words , Once no longer needed ,WeakMap The key name object and the corresponding key value pair will disappear automatically , Do not delete references manually

performance optimization

  • adopt const and let Claims to improve performance

because const and let All in pieces ( Not a function ) For scope , So compared to using var, Using these two new keywords may get the garbage collector involved earlier , Reclaim the memory that should be reclaimed as soon as possible .

  • More dereferences ( Closure )

The best way to optimize memory usage is to ensure that only the necessary data is saved when executing code . If data is no longer necessary , So set it to null, To release its reference . It can also be called Make a dereference . This suggestion is most suitable for properties of global variables and global objects . Local variables are automatically dereferenced when they are out of scope ,

Reference material

本文为[Fat sheep]所创,转载请带上原文链接,感谢

  1. Why did gitlab choose vue.js?
  2. HTTP-RPC: 轻量跨平台REST服务
  3. 继全面采用Node.js以后,PayPal分享大幅度踩坑GraphQL心得 - Mark Stuart
  4. vue组件化开发实战之滚动/轮播的实现
  5. Http-rpc: lightweight cross platform rest Service
  6. Following the full adoption of node.js, PayPal shares a great deal of graphql experience mark Stuart
  7. Implementation of rolling / carousel in Vue component development
  8. CSS是什么?这一篇全解,绝对有你想要的
  9. What is CSS? This is a complete solution, there is absolutely what you want
  10. 04-HTML5常用标签-HTML5极速入门
  11. 04-html5 common tags
  12. WEB前端全套零基础视频教程+软件2021最新编程视频
  13. Web front end full set of zero basic video tutorial + software 2021 latest programming video
  14. 使用Node, Mongo, React, Redux实现Token认证
  15. Using node, Mongo, react and Redux to realize token authentication
  16. 体面编码之CSS和HTML
  17. CSS and HTML for decent coding
  18. 使用Playwright基于多浏览器进行javascript自动化测试的简单教程- Applitools
  19. A simple tutorial for JavaScript automatic testing based on multi browser using playwright - applitools
  20. Minimum distance to target element
  21. 浅谈 React 中的 XSS 攻击
  22. XSS attack in react
  23. 自学前端教程整理,附不容错过的前端100篇文章合集
  24. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  25. 使用OpenTracing跟踪Go中的HTTP请求延迟
  26. Using opentracing to track HTTP request latency in go
  27. Encapsulating databinding allows you to write less than 10000 lines of code
  28. 03-HTML5标签-HTML5极速入门
  29. 03-html5 tag-html5 quick start
  30. LayUI - 极易上手拿来即用的前端 UI 框架
  31. Layui - easy to use front end UI framework
  32. Interpretation of lodash source code (1)
  33. Why is the first parameter of node family callback error?
  34. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  35. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  36. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  37. How to set up hyperlinks inside the website?
  38. Using node and socket to realize online chat room
  39. The core competitiveness of Vue: data bidirectional binding
  40. React configuration agent
  41. CSS layout
  42. Application scenario explanation of Vue dynamic component
  43. Redux learning notes 04 -- using multiple reducers to manage data
  44. After three months of typescript writing, what have I learned?
  45. Node family - what is a callback?
  46. React -- a simple implementation of render & create element
  47. JS learning simple usage of jquery
  48. Seamless love
  49. 小白前端入门笔记(12),设置哑链接
  50. Small white front-end entry notes (12), set dumb links
  51. Vue2. X opens composition API and TSX
  52. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  53. Flex learning notes
  54. The most essential closure article in the eastern hemisphere
  55. 2021-05-03 hot news
  56. Sword finger offer -- reverse order pair in array (JS Implementation)
  57. Working process of scaffold
  58. Use decorator mode to strengthen your fetch
  59. [JS] scope (Introduction)
  60. Employment information statistics network (interface document)