时间戳

首页 > 解决方案 > 拥有状态和使用函数获取状态之间的性能差异是什么？

javascript - 拥有状态和使用函数获取状态之间的性能差异是什么？

问题描述

举个例子，让我们看看我们有三个事件侦听器，mousemove, keydown, keyup。我们要记录space键和当前鼠标位置。

import getState from "../state";

  //version one, the variable is in place and gets mutated if changes
let spacePressed = false;

window.addEventListener("mousemove", (x, y) => {
  if (spacePressed) doSomethingWithMousePos(x, y);
});
  //version two, the variable is in a state outside

window.addEventListener("mousemove", (x, y) => {
  const { spacePressed } = getState();

  if (spacePressed) doSomethingWithMousePos(x, y);
});

//...

window.addEventListener("keydown", functionWhichSetsSpacePressed);
window.addEventListener("keyup", functionWhichSetsSpacePressed);

只是为了澄清它与 React 或 Redux 无关。这个例子很好，因为mousemove经常发生，所以即使是很小的性能差异也很重要。那么，将状态放在适当的位置，函数只需要读取它，将状态放在外部文件中，函数在其中传递状态本身有什么区别？（像这样：

const state = {};
export const getState = () => state;

)

标签： javascript

解决方案

首先要提到的是，在前端 javascript 中优化这些东西几乎没有用，因为这里的主要瓶颈是 DOM 操作和 DOM 渲染。但如果你真的有兴趣，我不会回答什么是更快，什么是慢，我会发布一种方法来轻松地使用benchmark.js.

var suite = new Benchmark.Suite();

const state = {};
const getState = () => state;

// add tests
suite.add('Get State', function() {
  getState()['foo'] = 'bar';
})
.add('Read state', function() {
  state.foo = 'bar';
}).on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
}).run({'async': true});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js" ></script>
</body>
</html>

推荐阅读