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

马亚尼·霍普(Maayan Hope)

我正在使用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问题吗?

Shant Marouti

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

OpenCV Polylines CPU使用率过高

Java线程:CPU使用率过高

如何在读写字符设备时避免CPU使用率过高?

当CPU /内存使用率过高时,Bash脚本会自动终止进程

没有活动查询时如何避免CPU使用率过高

如何解决CPU使用率过高的问题?

死锁会导致CPU使用率过高吗?

会尝试捕获-导致CPU使用率过高吗?

观看'./**/*.js'会导致CPU使用率过高

Golang stdin循环上的CPU使用率过高

Java:游戏循环-CPU使用率过高

锁定游戏更新速度会导致CPU使用率过高。不执行任何操作时如何使线程休眠?

使用蝗虫时的CPU使用率

在 Qlabel 中使用 QTime 和 Qtimer 作为时钟导致 CPU 使用率过高

Dropbox导致Mac OS X 10.8.2(Mountain Lion)上的CPU使用率过高

向下滚动Facebook网页会导致CPU使用率过高正常吗?

为什么USB 3.0端口会导致CPU使用率过高?

docker容器内的webpack-dev-server轮询-CPU使用率过高

“系统”和“系统中断”导致的CPU使用率过高(由ACPI.sys引起)

赛扬N3050 Braswell CPU使用率在Ubuntu 14.04上过高

如何停止Facebook搜寻器导致CPU使用率过高

为什么Iceweasel中的Stackoverflow会导致Xorg的CPU使用率过高?

Python 霍尔传感器监视器 - CPU 使用率过高

Explorer.exe和DWM.exe的Windows 7 CPU使用率过高

我怎么知道哪个IRQ导致CPU使用率过高

mysql 插入速度太慢且 io/cpu 使用率过高

在R中使用foreach时的CPU使用率

KVM的CPU使用率

虚拟CPU使用率