<!--your preparation HTML code goes here-->/*your preparation JavaScript code goes hereTo execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/async function globalMeasureThatScriptPrepareFunction() { // This function is optional, feel free to remove it. // await someThing();}class Component { constructor(x, y) { this.x = x; this.y = y; }}for(let i = 0; i < 100000; i++) { const component = new Component(i, i);}class Component { constructor(params) { const keys = Object.keys(params); for(let i = 0, l = keys.length; i < l; i++) { this[keys[i]] = params[i]; } }}for(let i = 0; i < 100000; i++) { const component = new Component({ x: i, y: i});}const createComponent = (params) => { const component = {}; const keys = Object.keys(params); for(let i = 0, l = keys.length; i < l; i++) { component[keys[i]] = params[i]; } return component;}for(let i = 0; i < 100000; i++) { const component = createComponent({ x: i, y: i});}const positionComponentDef = { x: Number, y: Number,};const createComponent= (def, params) => { const component = {}; const keys = Object.keys(def); for(let i = 0, l = keys.length; i < l; i++) { component[keys[i]] = params[i]; } return component;}for(let i = 0; i < 100000; i++) { const component = createComponent(positionComponentDef, i, i);}--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Constructor parameters | |
| Constructor object | |
| Factory function with object | |
| Factory function with definition and parameters |
| Test name | Executions per second |
|---|---|
| Constructor parameters | 167.4 Ops/sec |
| Constructor object | 50.8 Ops/sec |
| Factory function with object | 131.5 Ops/sec |
| Factory function with definition and parameters | 149.1 Ops/sec |
The benchmark you're examining focuses on comparing different approaches for creating and initializing JavaScript objects, particularly in the context of a component-like structure. The main aspects being tested are:
Constructor Parameters: This approach involves passing individual parameters directly to the constructor of a class. Each instance of the Component class is initialized with individual properties x and y.
Constructor with an Object: In this case, the constructor accepts a single parameter which is an object. This object contains properties that are assigned to the instance based on its keys.
Factory Function with Object: This benchmark uses a factory function that takes an object as input. Instead of a class instance, it creates a plain object and initializes its properties via a similar approach as the constructor with an object.
Factory Function with Definition and Parameters: Here, the factory function accepts a definition object along with parameters, allowing a structured approach to object creation.
The results from the provided benchmark indicate the counts of executions per second for each test, highlighting the relative performance of each method:
Constructor Parameters: With the highest executions per second (271.08), this approach is the most efficient for creating component instances, making it a suitable choice when performance is a critical factor.
Factory Function with Definition and Parameters: This method significantly reduces performance (226.46) but is still reasonably efficient given its balance of flexibility and type enforcement.
Factory Function with Object: Performance drops further (212.50), indicating a higher overhead than simply using constructor parameters but still offers usable flexibility.
Constructor Object: This approach sees the lowest performance (82.36). The extra overhead from creating an object and iterating through its keys leads to a noticeable performance penalty.
Choosing the Right Approach: The choice between these methods often hinges on the specific use case. If performance is paramount and the parameter list is relatively small, using constructor parameters is advisable. For greater flexibility and dynamic object structure, consider the object-based approaches.
Alternatives: Other alternatives might include using classes with static factory methods or leveraging libraries like lodash for more sophisticated object manipulation and assignment. Utility functions or libraries such as Immer can further streamline immutable object handling, but these may introduce additional overhead and complexity.
In conclusion, this benchmark is valuable not only in understanding the performance implications of object creation methods but also in guiding developers toward choosing the appropriate method based on performance needs and design patterns.
