This is the 11th day of my participation in the More text Challenge. For more details, see more text Challenge

Today we’re not going to talk about whether Angular is number one or React is number one. Instead, we’re going to talk about common ground between the React and Angular frameworks.

What both Angular and React have in common is

  • Monomorphism
  • Bit fields
  • Bloom filters

We’ll share them three times and we’ll explain them to you one by one.

Monomorphism

we use one type for all View nodes so that property access in loops stay monomorphic Misko Hevery, technical lead of Angular

Fiber node … shares the same hidden class.Never add fields outside of construction in ReactFiber sebastian Markbage technical lead of React

When debugging code, I occasionally look at the framework implementation and see comments from the Angular and React framework technical leaders in the source code. These comments also refer to hidden classes, which are internal data structures called Fiber Nodes in Angular and View Nodes in React. Ensure that these internal data structures share the same hidden class, that is, make the property access monomorphic. Why they do it and what good it does is what we’re going to talk about today.

View Nodes and data structures represent templates in Angular. Defines the metadata needed to render the DOM, and specifies which parts of the DOM need to be updated.

React also uses Fibre Nodes when defining components and templates in React. This is the new React Fibre 16 architecture.

@Component({ template:` <h1>{{title}} tuts </h1> <h2>author {{name}} </h2> ` }) export class AppComponent { title = 'optimized code in js'; name='zidea' } bindings:{ text:'optimized code in js' } bindings:{ text:"zidea" } class App extends Component{ state = {  title = 'optimized code in js', name='zidea' }; render(){ return( [ <h1>{{title}} tuts </h1> <h2>author {{name}} </h2> ] ) } } props:{ children:"optimized code in js" }  props:{ children:"zidea" } function updateNode(node,...) { let value = node.property; }Copy the code

Fibre Nodes and View Nodes are used to represent framework templates in Angular and React, respectively, and are used between DOM elements and template components. Let’s take a look at what these two data structures have in common, as they are often used when the framework processes updates.

The reason for this, and why it’s so complicated, is because of something called shape or hidden class. This is the hidden class Sebastian mentioned in his comments. Every day when you write javascript, javascript objects (objects) are represented inside the virtual machine as Shape objects, so Shape defines the properties used to describe the object and how memory is allocated (layout). For example, the offset value used to look up in memory. You might ask why we need shape, why don’t we just define these properties on the object. It’s actually a good thing to do, because it saves memory, and we might have two objects, or even more, thousands of objects.

let a  = {x:5,y:6};
let b  = {x:7,y:8};
Copy the code

Because all of these objects have the same structure (layout), we can extract those commonalities and use shape to represent them. This means that even though we have many objects, we only describe them once.

let a  = {x:5,y:6};
let b  = {x:7,y:8};
b.w = 9
Copy the code

If we want object B to assign the extended property w to 9, we need to introduce the new Shape. We can’t introduce w into the old shape, because object A still depends on shape and a has no new properties. So you need to introduce new shapes and update their relationships.

let a  = {x:5,y:6};
let b  = {x:7,y:8};
b.w = 9
b.z = 10
Copy the code

You can imagine adding allowable properties to an object over and over again, and modifying the shape of the object, and you might have a shape with hundreds of intermediate transitions. So every time a property of an object is accessed, the virtual machine has to go through all of this to find the layout and shape of memory that describes that property to retrieve that information. So one of the techniques V8 uses is to make this process faster. .

Each JavaScript function is internally represented as an object named Closure. This is where the virtual machine caches some information about the function, objects used to add parameters to the function, and other information. This is where the virtual machine will cache some information.

function getX(o){
    return o.x
}
Copy the code

Here is an example of how it works. Suppose you call the getX function and pass in an object with an x property. The virtual machine will calculate the object’s shape, the virtual machine can cache the object’s shape, and then when it accesses the object’s x property, it can record the offset, and the next time it accepts an object of the same shape to execute the function, The virtual machine simply compares shapes, and if it matches, there is no longer any need to calculate the shape of the object.

The value in memory can be resolved by obtaining the offset value from the cache. It also defines the state of the function, which can be of three types: singleton, singleton property access, and polymorphic. In this case, is singlet, is a representation of a singlet that has only one shape. Polymorphism means that a function is called with different types of objects every time, and megamorphic means that when you enter objects with different shapes as arguments, you typically operate on four types of shapes.

Object input to a function so that state remains singleton is important. Singleton attribute access can be up to 100 times faster than Megamorphic.

If you consider that 10,000 accesses can occur hundreds of times per second during each update detection cycle, you can imagine the speed impact of accessing singleton properties. It is required that the objects use the same shape and the same hidden class for Fibre and View Nodes in order to ensure that property access is singleton. You can have HTML elements, child objects, and if you follow the principles of object-oriented programming, you create different classes for different elements. These frameworks actually combine everything into one data structure, one class, and you can imagine the benefits.

Fiber node(react) Template element View node(Angular)
HostComponent HTMLElementNode TypeElement
HostText HTMLTextNode TypeText
FunctionComponent, \nClassComponent Component Component

Finally, I hope you will follow our wechat official account