web-dev-qa-db-ja.com

v8の通常のスタンドアロン関数の宣言よりも、矢印関数の方が高速（パフォーマンスが高く、軽量）ですか？

私と私の同僚は、矢印関数の宣言を好むため、コーディングスタイルに異議があるため、この質問をしています。

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

そして、私は古いスタイルのスタンドアロン関数宣言を好みます：

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

私のポイントは、古いスタイルのコードがより読みやすく、関数と変数の宣言をより明確に区別できることです。彼のポイントは、矢印関数を使用したコードの実行速度が向上したことです。

矢印関数の代わりに古いスタイルのスタンドアロン関数宣言を使用する場合、実際のパフォーマンスペナルティ（v8）について何か知っていますか？その罰則は本当に存在しますか？

javascriptnode.jsv8
40
Alexander Myshov

V8開発者はこちら。矢印関数は、（ほとんど）従来の関数宣言の単なる「構文糖」です。パフォーマンスの違いはありません。

79
jmrk

以下はそれを示しています：

  1. 最初に行くにはペナルティがあります（伝統的または太い）
  2. 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

私の経験では、矢印関数は通常のJS関数よりも速く実行されることがわかりました。次に、reactの小さなスニペットを示します。これは、矢印と通常の機能を使用しています。矢印関数を使用するコンポーネントは、通常のjs関数を持つコンポーネントよりも少し速く実行されることがわかりました。

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'))

あなたの意見が異なる場合は教えてください

1
Lokii