Question

我正在使用 Angular5 + cytoscapeJS 绘制图形我注意到chrome浏览器的CPU使用率将一直保持在10％左右

在DevTools中使用“性能”选项卡时，我可以看到我正在从zone.js获取“ requestAnimationFrame”事件

查看图片：

这是HTML的外观：

<div id="cy"></div>

这是打字稿代码中“ cytoscape”的创建

 var _graphData: any = {
            nodes: [
              {data: {id: 'j', name: 'Jerry', faveColor: '#6FB1FC', faveShape: 'triangle'}},
              {data: {id: 'e', name: 'Elaine', faveColor: '#EDA1ED', faveShape: 'ellipse'}},
              {data: {id: 'k', name: 'Kramer', faveColor: '#86B342', faveShape: 'octagon'}},
              {data: {id: 'g', name: 'George', faveColor: '#F5A45D', faveShape: 'rectangle'}}
            ],
            edges: [
              {data: {source: 'j', target: 'e', faveColor: '#6FB1FC'}},
              {data: {source: 'j', target: 'k', faveColor: '#6FB1FC'}},
              {data: {source: 'j', target: 'g', faveColor: '#6FB1FC'}},

              {data: {source: 'e', target: 'j', faveColor: '#EDA1ED'}},
              {data: {source: 'e', target: 'k', faveColor: '#EDA1ED'}},

              {data: {source: 'k', target: 'j', faveColor: '#86B342'}},
              {data: {source: 'k', target: 'e', faveColor: '#86B342'}},
              {data: {source: 'k', target: 'g', faveColor: '#86B342'}},

              {data: {source: 'g', target: 'j', faveColor: '#F5A45D'}}
            ]
          };
        this.cy = cytoscape({
            container: document.getElementById('cy'),
            boxSelectionEnabled: false,
            autounselectify: true,
            autoungrabify:true,
            userPanningEnabled :false,                
            style: gStyle,            
            elements: {
                nodes:_graphData.nodes,
                edges: _graphData.edges                
            },

            layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 10
            },
            zoom: 1,
            selectionType: 'single', 

        }); // cy init

        this.cy.zoomingEnabled( false );

有什么想法可以解决此CPU问题吗？

Answer 1

可能是因为Zone.js迫使Angular在每个动画帧处重新渲染。尝试在Angular区域之外运行cytoscape。

export class MyComponent implements OnInit {
    constructor(private zone: NgZone) {}
    ngOnInit() {
        this.zone.runOutsideAngular(() => {
            // Initialize cytoscape
            cytoscape({...});
        });
    }
}

使用Angular5 + cytoscapeJS时的CPU使用率过高

1 个答案: