Les fonctions de flèche sont-elles plus rapides (plus performantes, plus légères) que la déclaration de fonction autonome ordinaire dans la v8?

Question

Je pose cette question parce que moi et ma collègue a un litige sur le style de codage parce qu'il préfère les flèches déclaration de la fonction:

const sum = (a, b) => a + b;

Et je préfère l'ancienne autonome déclaration de la fonction:

function sum(a, b) {
    return a + b;
}

Mon point est que le code dans le vieux style plus lisible et vous pouvez plus distinguer clairement la fonction et les déclarations de variables. Son point est que le code avec une flèche fonctions de s'exécuter plus rapidement.

Savez-vous quelque chose à propos de la performance réelle de sanctions (en v8) lorsque vous utilisez l'ancienne fonction autonome de la déclaration au lieu de la flèche fonctions? Sont que des sanctions existe vraiment?

Answer 1

Développeur V8 ici. Les fonctions fléchées ne sont (pour la plupart) que du "sucre syntaxique" pour les déclarations de fonctions conventionnelles. Il n'y a pas de différence de performance.

Answer 2

Ce qui suit montre que:

1. Il y a une pénalité pour aller en premier (traditionnel ou gras)
2. Il n'y a pas de différence perceptible dans Chrome

 function goFat() {
    for (var i = 0; i < 1000000; i++) {
        var v = ()=>{};
        v();
    }
}

function goTraditional() {
    for (var i = 0; i < 1000000; i++) {
        var v = function() {};
        v();
    }

}

function race() {
  var start = performance.now();
  goTraditional();
  console.log('Traditional elapsed: ' + (performance.now() - start));
  start = performance.now();
  goFat()
  console.log('Fat elapsed: ' + (performance.now() - start));
  start = performance.now();
  goTraditional();
  console.log('Traditional elapsed: ' + (performance.now() - start));
  start = performance.now();
  goFat()
  console.log('Fat elapsed: ' + (performance.now() - start));
  console.log('------');
} 

 <button onclick="race()">RACE!</button> 

Answer 3

dans mon exp, j'ai trouvé que les fonctions de flèche sont plus rapides que les fonctions normales de JS. Voici un petit extrait de code qui utilise une flèche et une fonction normale. J'ai trouvé que le composant utilisant les fonctions de flèche est un peu plus rapide que celui ayant une fonction js normale.

https://codepen.io/lokeshpathrabe/pen/qgzadx

 class Fun extends React.Component {

  constructor(props){
    super(props);
    this.state = {start: new Date().getTime(),
                 end: new Date().getTime(),
                 number: 0};
    console.log('Function start: ', this.state.start);
    const fun = function(me){
      let n = me.state.number
      me.setState({
        ...me.state, end: new Date().getTime(), number: ++n
      })
    }
    this.interval = setInterval(fun, 1, this);
  }

  stop(){
    clearInterval(this.interval);
  }

  componentDidUpdate(){
    if((this.state.end - this.state.start) > 5000){
      console.log('Function end: ', this.state.end);
      clearInterval(this.interval)
    }
  }

  render() {
    return (
      <div>
        <h2>Counter with Function {this.state.number}</h2>
      </div>
    )
  }
}

class Arrow extends React.Component {

  constructor(props){
    super(props);
    this.state = {start: new Date().getTime(),
                 end: new Date().getTime(),
                 number: 0};
    console.log('Arrow start: ', this.state.start);
    this.interval = setInterval(()=>{
      let n = this.state.number
      this.setState({
        ...this.state, end: new Date().getTime(), number: ++n
      })
    }, 1);
  }

  stop(){
    clearInterval(this.interval);
  }

  componentDidUpdate(){
    if((this.state.end - this.state.start) > 5000){
      console.log('Arrow end: ', this.state.end);
      clearInterval(this.interval)
    }
  }

  render() {
    return (
      <div>
        <h2>Counter with Arrow {this.state.number}</h2>
      </div>
    )
  }
}

class HOC extends React.Component {

  render() {

    return (<div>
        <h1>The one reaching higher count wins</h1>
        <Arrow/>
        <Fun/>
        </div>);
  }
}

ReactDOM.render(<HOC />, document.getElementById('react-content'))
 

Faites-moi savoir si votre opinion diffère