navigation

[react] Hooks

[React from zero practice 01- background] code split [React from zero practice 02- background] permission control [React from zero practice 03- background] custom hooks [React from zero practice 04- background] docker-compose Deploy React + Egg +nginx+mysql [React From zero practice 05- background] Gitlab-CI using Docker automated deployment

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] Data reactive and initialize render [source -vue02] Computed responsive – Initialize, access, Update Procedure [source -vue04] Watch Listening properties – Initialize and update [source -vue04] vue. set and vm.$set [source -vue05] vue.extend

[source -vue06] Vue. NextTick and VM.$nextTick [Deployment 01] Nginx [Deployment 02] Docker deployVUE project [Deployment 03] Gitlab-CI

[Data Structures and Algorithms 01] Binary search and sort

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise Data Structures and Algorithms – Binary Search and Sorting Js and V8 garbage collection mechanisms

(1) Pre-knowledge

(1) Some words

Garbage, garbageCopy the code

(2) Basic data types and reference data types

  • Basic data type
    • Number String Boolean null undefined symbol
    • ( Basic data type), occupied in memory (Fixed size), and therefore kept in (Stack memory)
  • Reference data type
    • Object-plainobject Array function Regexp error date and so on
    • ( Reference data type) is the object, (The stack holds variable names and Pointers to heap addresses), the real data is stored in (Heap memory)

(3) Possible memory leak in JS

  • The global variable
  • Event listener not removed
  • The timer is not cleared
  • closure
  • console.error

(4) Some nouns

  • GC
    • Garbage Collection is short for Garbage Collection
  • memory
    • Operable space consisting of read-write units
  • The garbage
    • When the object is created, js automatically allocates the corresponding (memory space)
    • Garbage occurs when an object is no longer referenced or an existing object cannot be retrieved from the root
    • When the garbage exists, js will automatically do it (free and reclaim the space).
  • The root
    • In javascript, (root) is equivalent to (global)
  • To object
    • Objects that are accessible from (root) are called reachable objects

(5) Common GC algorithm (GC will block JS running)

  • Mark clear
  • Reference counting
  • Tag to sort out
  • Generational recycling

(2) Garbage collection mechanism

(1) What are the criteria for being considered garbage?

(1) The object is no longer needed in the program – it will be considered garbage

Var name = 'woow_wu7' function func() {name = 'woow_wu8' console.log(name)} func() (1) After func() is executed, if name is not used anywhere else, it is considered garbage. (2) Note that if name is a global variable, it is not collected by the garbage collector. It needs to be collected manuallyCopy the code

(2) Objects that cannot be accessed in the program – are considered garbage

Func () {var name = 'woow_wu7' console.log(name)} func() (1) When func() is executed, the variables inside the function can not be accessed from outside the function, then it is considered garbage (2) that the root object is traversed down, not reachableCopy the code

(2) Marking and clearing method – (marking, clearing)

(1) concept

  • Marker clearance assumes the existence of a (The root object), equivalent to a global object in javascript, the garbage collector will (On a regular basisStart from the root object, always start from the root object (Whatever we can scan, we'll keep), (Anything that cannot be scanned will be recycled )
  • Almost all modern browsers now use tag clearance

(2) Specific process

  • Basically, there are two main stages (marking) and (clearing)
  • 1. (The recursive traversal) every root until all (To object) are accessed and (tag) all the objects that have been accessed to avoid future traversal of the same object
  • 2. (The recursive traversal) Each root, (remove) is not marked to an object, and (Erase all marks from the first stage )
  • 3. (Reclaim the corresponding space), add the reclaimed space to (Free list) for later application space
  • 4. Repeat these steps regularly

(3) the advantages and disadvantages

  • advantages
    • Address (A circular referenceThe problem of)
  • disadvantages
    • ( Not immediately recycled) garbage objects, even if found garbage objects, must be traversed after the cleanup, cleanup program stop work resulting in a lag
    • To produce (Space fragmentation), that is (the list address is discontinuous)

(3) Reference counting

(1) concept

  • Set the number of references to determine whether the current number of references is 0. If 0 is a garbage object, it will be collected by the garbage collector
  • With reference counters, the number of reference counters is changed when the reference relationship changes

(2) Specific process

  • Setting a reference counter
  • When an object’s reference relationship changes, the reference counter modifies the reference number
  • When the quoted number is0Is immediately recycled

(3) the advantages and disadvantages

  • advantages
    • When garbage is found, (immediately )
    • Minimize program pauses, and when it is found that memory is about to reach a critical point, reference counts are cleared, that is, space is not used up
  • disadvantages
    • Objects referenced by a loop could not be reclaimed
    • The time complexity is relatively high
    • It consumes a lot of resources. It monitors and modifies the values of all objects, which occupies time and resources
  • Example 1
const obj1 = {num: 10} const obj2 = {num: 11} const objList = {obj1.num, obj2.num} function fn() {const num1 = 1; Num2 = 2 const num2 = 2 num3 = 3 const num3 = 3 } fn();} fn()Copy the code
  • Example 2
Function fn() {const obj1 = {} const obj2 = {} const obj2. Name = obj2. Name = obj1 return 'circular reference' } fn() : obj1 and obj2 reference each other, the counter count is not zero, after the fn execution, the garbage collector still does not reclaim the two objectsCopy the code

(3) Marking arrangement method – (marking, sorting, clearing)

(1) concept

  • In the (tag) and (remove), and added (Tidy up the memory space )

(2) Specific process

  • Marking phase: recursively traversing, marking reachable objects (reachable objects are live objects)
  • Tidy up phase: tidy up before clearing, move the object position, let (Address generation continuity )
  • Cleanup phase: Recursive traversal to clear unmarked objects (unmarked objects are inactive objects)

(3) the advantages and disadvantages

  • advantages
    • The process (mark -> tidy -> clear) is more than (mark -> tidy -> clear).Less debris space )
    • (mark – >Defragment the space– > clear)
  • disadvantages
    • As with the cleanup method, the cleanup process is still suspended

(3) V8 garbage collection strategy – generational collection

Cenozoic and old generations and big objects

  • Heap classification: total divided intoThe new generation The old generation The big objectThree types of
  • The new generation: An object with a short lifetime has a short life cycle and low space utilization. That is, use space for time
    • function
  • The old generation: Indicates a long-lived object with a long life cycle
    • Global object
    • closure
    • The new command generates an instance object
    • The new generation is the object of the old generation
    • JIT descendant code
  • The big object
    • Block allocation, one-time recovery

Cenozoic and old generation storage areas

  • Memory is divided into two storage areas 🙁New generation storage area) and (Old generation storage area )
  • The new generation has smaller storage areas
    • ( New generation storage area) can be divided into two Spaces 🙁From use space) and (To free space )
  • Older generations have larger storage areas

(1) the new generation

(1) Related concepts

  • The main algorithms used for recycling the new generation of objects are:Assignment algorithm ) + ( Tag sorting algorithm )
  • The new generation of memory areas continues To be divided into (use space From) and (free space To), which are two (equal space).
  • Exploiture // Scanvenge. Be insane

(2) Recycling process

  • 1. First of all, all (Active objects) stored in (The From space), this processThe To space is idle
  • 2. When the From space is used to a certain extent, the garbage collection operation will start.Tag to sort outMark and move the live object to make (Space is continuous), so that subsequent operations will not produce (fragmentation space)
  • (3) to (Active objectsCopy to (To the space), when the copy is complete, the active space is backed up. At this point, you can consider recycling
  • 4. Complete the release of the “From” space, and complete the recycling (the contents of the continuous space after the collation of the “From” space are copied To the “To” space, and the “From” space is cleared)
  • 5. Replace the names From and To.From becomes To space, and To space becomes From space) continue to repeat the previous operation

Summary: From -> tag collation -> To -> clear From -> name interchange

(3) New generation promotion

  • Moving the new generation objects to the old generation space
  • The trigger condition
    • 1. After one GC, the new generation that is still alive needs to be promoted
    • 2. During the copying process,To space is used more than 25%, move the active objects to the old generation space
  • Why limit the use of To
    • In the future, the contents of the From space should be copied To the To space for exchange. If the usage of To is too high, new objects that become From will not be stored

(2) the old generation

Relevant concepts

  • The main algorithms for old generation recycling are as follows:Mark clear.Tag to sort out.Incremental tag
    • Tag cleanup: Although there are spatial fragmentation issues with tag cleanup, the rate of improvement in tag cleanup is very fast
    • Tagging: When the promotion and the old generation area is not enough space, the tagging will be used to optimize the space
    • Incremental tag:
      • The whole garbage collection operation mark is divided into several small segments to complete the collection, mainly for the purpose of realizing the alternating completion of the program and garbage collection, so that the time consumption brought by efficiency optimization is more reasonable
      • Since garbage collection will block program running, garbage collection and program running are carried out alternately. Instead of marking at one time, incremental marking is carried out during the program running gap, and garbage collection is carried out after the marking is completed. The purpose is to interrupt program running as little as possible and increase efficiency
      • The reason why we use (incremental mark) is that the time needed to update the grain (alternately executing JS and GC) is very obvious when we do the tag clearing and tag sorting.

  • Photo from juejin.cn/post/690539…

(3) Comparison between Cenozoic and old generations

  • The new generation
    • Short survival time, small storage space, low space utilization (space for time)
  • The old generation
    • Long life, large storage space, and high space utilization
    • Garbage collection is not a good copy algorithm

data

  • Naughty snow fox 17 (JS memory management and garbage collection) juejin.cn/post/690534…
  • Naughty Snow fox 17 (V8 generational recycling) juejin.cn/post/690539…
  • Js garbage collection mechanism 2(reference counting, tag cleaning, tag sorting) juejin.cn/post/688702…
  • Js garbage collection mechanism 2(reference counting, tag cleaning, tag sorting) juejin.cn/post/688271…
  • Talk about V8 garbage collection juejin.cn/post/684490…