使用 Angular 5 + cytoscape JS 时使用率高 CPU

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({...});
        });
    }
}

使用 Angular 5 + cytoscape JS 时使用率高 CPU

Hign CPU usage when using Angular5 + cytoscapeJS

angular

cytoscape.js