web-dev-qa-db-fra.com

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

Je pose cette question parce que mon collègue et moi avons un différend sur le style de codage car il préfère la déclaration de fonction des flèches:

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

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

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

Mon point est que le code à l'ancienne est plus lisible et que vous pouvez distinguer plus clairement les déclarations de fonctions et de variables. Son point est que le code avec les fonctions fléchées s'exécute plus rapidement.

Savez-vous quelque chose sur les pénalités de performances réelles (dans la v8) lorsque vous utilisez une déclaration de fonction autonome à l'ancienne au lieu des fonctions fléchées? Ces sanctions existent-elles vraiment?

javascriptnode.jsv8
40
Alexander Myshov

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 aucune différence de performances.

79
jmrk

Ce qui suit montre que:

  1. Il y a une pénalité pour le premier (traditionnel ou gras)
  2. Il n'y a aucune 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>
5
Ben

dans mon exp, j'ai trouvé que les fonctions fléchées fonctionnent plus rapidement que les fonctions JS normales. Voici un petit extrait de react qui utilise la flèche et la fonction normale. J'ai trouvé que le composant utilisant les fonctions fléchées s'exécute un peu plus vite que celui ayant la 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

1
Lokii