import React, { Component } from "react"; import ArrowBind from "./ArrowBind"; import ConsBind from "./ConsBind"; import NoBind from "./NoBind"; class BindPerf extends Component { constructor(props) { super(props); this.state = { count: 1, secondCount: 1 }; this.arrowFunctionStart = this.arrowFunctionStart.bind(this); this.bindFunctionStart = this.bindFunctionStart.bind(this); this.simpleFunctionStart = this.simpleFunctionStart.bind(this); this.handleChange = this.handleChange.bind(this); this.counter = 1000; this.state = { arrowFunctionTime: 0, bindFunctionTime: 0, simpleFunctionTime: 0, arrowFunctionTotalTime: 0, bindFunctionTotalTime: 0, simpleFunctionTotalTime: 0, afn: 0, bfn: 0, sfn: 0, value: 10, disableButton: false }; this.value = 0; this.fn = 0; this.functionTotalTime = this.state.simpleFunctionTotalTime; this.thisRun = 0; } arrowFunctionStart() { if (this.thisRun === 0) { this.value = this.state.value; this.fn = this.state.afn; this.functionTotalTime = this.state.arrowFunctionTotalTime; this.setState({ disableButton: true }); } var timeTaken = 0; var totalN = this.fn; var totalTimeTaken = this.functionTotalTime; var loop = this.value; var startTime = new Date().getTime(); for (var j = 0; j < 100; j++) { for (var i = 0; i < this.counter; i++) { var t = new ArrowBind(); t.justCount(); } } var endTime = new Date().getTime(); timeTaken = endTime - startTime; totalTimeTaken = (totalTimeTaken * totalN + timeTaken) / (totalN + 1); totalN++; this.fn = totalN; this.functionTotalTime = totalTimeTaken; this.thisRun++; this.setState(state => { return { arrowFunctionTime: timeTaken, afn: totalN, arrowFunctionTotalTime: totalTimeTaken }; }); if (this.thisRun < loop) { setTimeout(this.arrowFunctionStart, 20); } else { this.thisRun = 0; this.setState({ disableButton: false }); } } // arrowFunctionStart1() { // var startTime = new Date().getTime(); // for (var j = 0; j < 100; j++) { // for (var i = 0; i < this.counter; i++) { // var t = new ArrowBind(); // t.justCount(); // } // } // var endTime = new Date().getTime(); // var timeTaken = endTime - startTime; // var totalN = this.state.afn; // var totalTimeTaken = // (this.state.arrowFunctionTotalTime * totalN + timeTaken) / (totalN + 1); // this.setState({ // arrowFunctionTime: timeTaken, // afn: totalN + 1, // arrowFunctionTotalTime: totalTimeTaken // }); // } bindFunctionStart() { if (this.thisRun === 0) { this.value = this.state.value; this.fn = this.state.bfn; this.functionTotalTime = this.state.bindFunctionTotalTime; this.setState({ disableButton: true }); } var timeTaken = 0; var totalN = this.fn; var totalTimeTaken = this.functionTotalTime; var loop = this.value; var startTime = new Date().getTime(); for (var j = 0; j < 100; j++) { for (var i = 0; i < this.counter; i++) { var t = new ConsBind(); t.justCount(); } } var endTime = new Date().getTime(); timeTaken = endTime - startTime; totalTimeTaken = (totalTimeTaken * totalN + timeTaken) / (totalN + 1); totalN++; this.fn = totalN; this.functionTotalTime = totalTimeTaken; this.thisRun++; this.setState(state => { return { bindFunctionTime: timeTaken, bfn: totalN, bindFunctionTotalTime: totalTimeTaken }; }); if (this.thisRun < loop) { setTimeout(this.bindFunctionStart, 20); } else { this.thisRun = 0; this.setState({ disableButton: false }); } } // bindFunctionStart1() { // var startTime = new Date().getTime(); // for (var j = 0; j < 100; j++) { // for (var i = 0; i < this.counter; i++) { // var t1 = new ConsBind(); // t1.justCount(); // } // } // var endTime = new Date().getTime(); // var timeTaken = endTime - startTime; // var totalN = this.state.bfn; // var totalTimeTaken = // (this.state.bindFunctionTotalTime * totalN + timeTaken) / (totalN + 1); // this.setState({ // bindFunctionTime: timeTaken, // bfn: totalN + 1, // bindFunctionTotalTime: totalTimeTaken // }); // } simpleFunctionStart() { if (this.thisRun === 0) { this.value = this.state.value; this.fn = this.state.sfn; this.functionTotalTime = this.state.simpleFunctionTotalTime; this.setState({ disableButton: true }); } var timeTaken = 0; var totalN = this.fn; var totalTimeTaken = this.functionTotalTime; var loop = this.value; var startTime = new Date().getTime(); for (var j = 0; j < 100; j++) { for (var i = 0; i < this.counter; i++) { var t2 = new NoBind(); t2.justCount(); } } var endTime = new Date().getTime(); timeTaken = endTime - startTime; totalTimeTaken = (totalTimeTaken * totalN + timeTaken) / (totalN + 1); totalN++; this.fn = totalN; this.functionTotalTime = totalTimeTaken; this.thisRun++; this.setState(state => { return { simpleFunctionTime: timeTaken, sfn: totalN, simpleFunctionTotalTime: totalTimeTaken }; }); if (this.thisRun < loop) { setTimeout(this.simpleFunctionStart, 20); } else { this.thisRun = 0; this.setState({ disableButton: false }); } } simpleFunctionStart1() { var startTime = new Date().getTime(); for (var j = 0; j < 100; j++) { for (var i = 0; i < this.counter; i++) { var t2 = new NoBind(); t2.justCount(); } } var endTime = new Date().getTime(); var timeTaken = endTime - startTime; var totalN = this.state.sfn; var totalTimeTaken = (this.state.simpleFunctionTotalTime * totalN + timeTaken) / (totalN + 1); this.setState({ simpleFunctionTime: timeTaken, sfn: totalN + 1, simpleFunctionTotalTime: totalTimeTaken }); } callback1(loca, hist) { if (this.routerLocation.pathname === "/sublink2") { this.setState({ activeIndex: 1 }); } } round(n) { return Math.round(n * 100) / 100; } handleChange(event) { var val = event.target.value; var intVal = parseInt(val); if (!isNaN(intVal) || val === "") { if (val <= 1000) { this.setState({ value: val }); } } } render() { return (

Measure	Arrow Function	Bind Function	Simple Function
Last Execution Time	{this.round(this.state.arrowFunctionTime)}	{this.round(this.state.bindFunctionTime)}	{this.round(this.state.simpleFunctionTime)}
Average Execution Time	{this.round(this.state.arrowFunctionTotalTime)}	{this.round(this.state.bindFunctionTotalTime)}	{this.round(this.state.simpleFunctionTotalTime)}
# of Executions	{this.state.afn}	{this.state.bfn}	{this.state.sfn}

All time are in milliseconds

No. of runs in single Execution:

Browser Details: {navigator.userAgent}

); } clearAll = () => { this.setState({ arrowFunctionTime: 0, bindFunctionTime: 0, simpleFunctionTime: 0, arrowFunctionTotalTime: 0, bindFunctionTotalTime: 0, simpleFunctionTotalTime: 0, afn: 0, bfn: 0, sfn: 0, value: 10, disableButton: false }); this.value = 0; this.fn = 0; this.functionTotalTime = this.state.simpleFunctionTotalTime; this.thisRun = 0; }; } export default BindPerf;

xpy97mk8oq