Chrome 和 Opera 中的 Kinetic JS 性能问题

Posted

技术标签:

【中文标题】Chrome 和 Opera 中的 Kinetic JS 性能问题【英文标题】:Kinetic JS performance issue in Chrome & Opera 【发布时间】:2013-02-16 23:07:00 【问题描述】:

当我使用 Chrome 或 Opera 浏览器时,我的 kinetic JS 应用程序出现了一些严重的性能问题。当我使用 IE 或 Firefox 时,性能很好。你可以在这里看到应用程序http://kinlibtst.elitno.net/ 这里的js代码:http://kinlibtst.elitno.net/new.js

我现在正在使用免费托管,这可能是原因吗?也许是糟糕的主机解析器?

【问题讨论】:

我认为这只是因为您的页面上有大量数据。有很多图片供浏览器解析。 【参考方案1】:

这是一个小问题,你有很多这样的事情:

 cont_venes_sel.on('mouseout', function() 
      document.body.style.cursor = "default";
      this.transitionTo(  // <--- this is a small problem, not a big one
        opacity: 0,
        duration: 0.3
      )
      stage.draw();   //  <---- this is the big problem
    );

问题是,你为什么要重绘整个舞台? 试试这个:

   cont_venes_sel.on('mouseout', function() 
      document.body.style.cursor = "default";
      this.setOpacity(0);  // <--- much less memory required, less intense
      this.getParent().draw();   //  <---- this way you only redraw the layer
    );

【讨论】:

以上是关于Chrome 和 Opera 中的 Kinetic JS 性能问题的主要内容,如果未能解决你的问题,请参考以下文章

Chrome, Safari 中的 JQuery .animate() != FF, IE, Opera

CSS 过渡适用于 IE,但不适用于 Firefox、Chrome 和 Opera [重复]

最新包含 Blink 的浏览器(如 Chrome、Opera)中的奇怪滚动行为

Animate(right: 0) 在 Chrome 和 Opera 中无法正常工作

从安装程序安装 Opera Extension (Opera Blink)

Chrome 和 Opera 在使用 display:table 时创建小填充