Contents summary

Memory management

introduce

  • Memory: Composed of read and write units, representing a piece of operable space
  • Management: the artificial manipulation of the application, use and release of a space
  • Memory management: developers actively apply for space, use space, release space
  • Management process: application – Use – Release

Memory management in javascript

  • Applying for Memory Space
  • Used memory space
  • Free up memory

Garbage in javascript

  • Memory management is automatic in javascript
  • Objects are garbage when they are no longer referenced
  • Objects that cannot be accessed from the root are garbage

Reachable objects in javascript

  • Accessible objects are reachable objects (references, scope chains)
  • The criterion of reachability is whether it can be found from the root
  • Roots in javascript can be thought of as global variable objects

Garbage collection and common GC algorithms

GC definitions and functions

  • GC is short for garbage collection mechanism
  • The GC finds garbage in memory and frees and reclaims space

What is the garbage in the GC

  • Objects that are no longer needed in a program
  • An object in a program that can no longer be accessed

What is the GC algorithm

  • GC is a mechanism where the garbage collector does the specific work
  • The content of the work is to find the garbage release space, recycling space
  • An algorithm is a set of rules that lookup and recycle follow at work

Common GC algorithms

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

Reference counting algorithm

  • Core idea: Set the number of references to determine whether the current number of references is 0
  • Reference counter
  • Modify the reference number when the reference relationship changes
  • Reclaim immediately if the reference number is 0

Cite the advantages of computational algorithms

  • Recycle rubbish as soon as it is found
  • Minimize program pause, reduce program lag time

Disadvantages of reference calculation algorithms

  • Object referenced by loop cannot be recycled
  • Time is expensive and resources are consumed

Mark clearing algorithm

  • Core idea: mark and clear two stages to complete
  • Walk through all the objects looking for the mark active object
  • Iterate over all objects to remove unmarked objects
  • Reclaim the corresponding control

Advantages of tag clearing algorithm

  • Objects that can be recycled for circular references: As opposed to reference techniques, we can solve the problem that circular references cannot be recycled

Advantages of tag clearing algorithm

  • Easy to generate fragmented space and waste space: Compared with garbage collection, it will cause a problem of space fragmentation and can not make the maximum use of space
  • Garbage objects are not collected immediately

Principle of tag collation algorithm

  • Tag cleanup can be seen as an enhancement to tag cleanup
  • The operation of the tag phase is the same as that of tag clearing
  • The cleanup phase starts with a cleanup, moving the object

Advantages of label finishing

  • Reduce the space for fragmentation

Shortcomings of tag finishing

  • Garbage objects are not collected immediately

Common GC algorithms

  • Reference counting
  • Mark clear
  • Tag to sort out

V8 engine garbage collection

Know the V8

  • V8 is a mainstream JavaScript execution engine
  • V8 uses just-in-time compilation
  • V8 memory upper limit
    • The 64-bit version does not exceed 1.5 GB, and the 32-bit version does not exceed 800 MB

V8 garbage collection strategy

  • Adopt the idea of generational recycling
  • Memory is divided into new generation, old generation
  • Different algorithms are used for different objects

A common GC algorithm in V8

  • Generational recycling
  • Space to copy
  • Mark clear
  • Tag to sort out
  • Mark the incremental

V8 Memory Allocation

  • V8 memory space is split in two
  • Little space to store the new generation object (32 m | 16 m)
  • Cenozoic refers to objects that have a short life span

New generation object recovery implementation

  • The recycling process adopts replication algorithm + label finishing
  • The new generation of memory is divided into two sizes
  • The used space is From, and the free space is To
  • Live objects are stored in the From space
  • Copy the live object To To after the tag is collated
  • The space exchanged between From and To is released

Recovery Details

  • Promotions may occur during copying
  • Promotion is the movement of the new generation to the old generation
  • A new generation of GC still alive needs to be promoted
  • To space usage is over 25%

Old generation object description

  • Old generation objects are stored in the old generation area on the right
  • 64-bit OPERATING system 1.4 GB,32 OPERATING system 700 MB
  • An old generation object is an object that lives for a long time

Old age object recycling implementation

  • It mainly adopts the algorithm of mark clearing, mark finishing and increment mark
  • Garbage space is first collected using a tag sweep
  • Spatial optimization was carried out by label finishing
  • Incremental marking is used for efficiency improvement

Details of the contrast

  • New generation of regional garbage recycling use space for time
  • Old-generation area garbage collection is not suitable for replication algorithms

V8 summary

  • V8 is a mainstream JavaScript execution engine
  • V8 memory upper limit
  • V8 adopts the idea of generational recycling to realize garbage collection
  • V8 memory is divided into new generation and old generation
  • V8 common GC algorithm for garbage collection

The Performance tools

Why use Performance

  • The purpose of GC is to achieve a virtuous cycle of memory space
  • The cornerstone of a virtuous cycle is rational use
  • Keep an eye on it to see if it makes sense
  • Performance Provides multiple monitoring modes

Performance Procedure

  • Open your browser and enter the destination url
  • Go to the Developer tools panel and select Performance
  • Enable the recording function and access the page
  • Perform user action and stop recording after a certain period of time
  • Analyze the memory information recorded on the page

External manifestation of memory problems

  • Pages load lazily or pause frequently
  • The page continues to have poor performance
  • Page performance deteriorates over time

Criteria for defining memory problems

  • Memory leak: Memory usage continues to rise
  • Memory bloat: Performance issues on most devices
  • Frequent garbage collection: Analyzed by memory variation graph

Several ways to monitor memory

  • Browser task manager
  • Timeline Records the Timeline diagram
  • Heap snapshot looks for detached DOM
  • Determine if there is frequent garbage collection

Task manager monitors memory

  • Shift + Esc

Timeline record memory

  • JS heap for Performance – blue line

What is DOM separation

  • Interface elements live in the DOM tree
  • DOM node when garbage object (detached and no longer referenced)
  • DOM nodes in separate states (without references)

Heap snapshot looks for detached DOM

  • Browser development tools – Memory – Get snapshot – Type deTA in Class Filter

Why frequent garbage collection

  • The application is stopped while the GC is working
  • Frequent and long GC can lead to application suspension
  • The user awareness application is stuck

Identify frequent garbage collection

  • Frequent ups and downs in Timeline
  • Frequent data increases and decreases in task manager

The Performance using

  • Performance Usage Process
  • Correlation analysis of memory problems
  • The Performance sequence diagram monitors memory changes
  • Task manager monitors memory changes
  • Heap snapshot looks for detached DOM

Code optimization examples

How to accurately test JavaScript performance

  • Essentially, a large number of execution samples are collected for mathematical statistics and analysis
  • This is done using benchmark.js (jsperf.com/)

Jsperf usage flow

  • Log in using your GitHub account
  • Personal Information (optional)
  • Fill in detailed test case information (title, SLUG)
  • Fill in the prep code (often used in DOM manipulation)
  • Setup and teardown codes are required
  • Fill in the test snippet

Why be careful with global variables

  • Global variables are defined in the global execution context and are at the top of any scope chain
  • The global execution context remains in the context execution stack until the program exits
  • The presence of a variable with the same name in a local scope obscures or contaminates the whole world

Caching global variables that cannot be avoided in use into local methods needed to add instance objects to the prototype object

Closure features

  • The outside has a reference to the inside
  • Access data from the inner scope in the outer scope

About the closure

  • Closures are a powerful syntax
  • Closures are prone to memory leaks when used improperly
  • Don’t close for closure’s sake

Object orientation in JavaScript

  • Js does not require access methods for properties; all properties are externally visible
  • Using attribute access methods only adds another layer of redefinition without access control

For loop optimization

  • I want to define length

The optimal cycle is adopted

  • ForEach is better than len is better than for in

The addition of nodes inevitably involves backflow and redraw