相关疑难解决方法(0)

Chrome开发工具中的监听工具的性能分析结果

我一直在使用Chrome开发工具分析一个React应用程序,我发现了一个线性增加的Listener计数.看一下下面的截图.该Listeners是橙色.

我将其缩小为p标签内部的简单倒计时值渲染.剩余时间是每隔1000毫秒使用setInterval函数生成的,然后在p标记内格式化和渲染.

我创建了一个简单的React应用程序,使用create-react-app并修改了App.js的App组件中的代码,每秒更新Date.now()的值,当我在其上运行探查器时,我得到了相同的结果.

class App extends Component {
  state = {
    text: '',
  };

  loop() {
    this.setState({ text: Date.now() });
  }

  componentWillMount() {
    this.timer = setInterval(this.loop.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
      </div>
    );
  }
}

export default App;

Run Code Online (Sandbox Code Playgroud)

这些所谓Listeners的开头是什么？
增加的倾听者是否可以指示memory leak？
如果是,如果你必须显示倒计时或计时器来更新每秒或更快的时间/剩余时间,你怎么能避免这种情况？

顺便说一下,你是否也看到JS Heap的用法似乎也在上升,尽管所有这些垃圾收集？这很奇怪,不是吗？

干杯

javascript profiling setinterval google-chrome-devtools reactjs

Anu*_*ena

2018 01-12

6
推荐指数

1
解决办法

2167
查看次数

JavaScript监听器不断增加

我实现了一个Web应用程序,并使用谷歌开发人员工具监控性能.我注意到听众不断增加,堆也是如此.

听众增加的部分看起来像这样

let ival = $interval(function () {
    $http.get('someurl') // this call is actually done through a service, don't know if that matters
}, 1000)

Run Code Online (Sandbox Code Playgroud)

我会理解,如果堆增长是因为一些数据没有被垃圾收集器收集,但我不明白为什么听众会增加？

这是一个可重复的,最小的例子:

index.html文件:

<!doctype html>
<html ng-app="exampleModule">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="someController">
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

和script.js文件:

angular.module("exampleModule", [])
  .controller("someController", [ "$http", "$interval", function ($http, $interval) {

    $interval(function () {
      $http.get('script.js')
    }, 1000)

  }])

Run Code Online (Sandbox Code Playgroud)

观看演奏时的结果与上图中的相同.您应该使用简单的Web服务器来发出GET请求.

javascript google-chrome listeners angularjs

Ste*_*fan

2017 10-18

1
推荐指数

1
解决办法

618
查看次数