JavaScript Canvas HTML5 性能问题

3

我正在使用canvas制作一个老式游戏,以此为乐。火狐浏览器速度较慢,而chrome没有firebug,但在使用javascript开发时,我几乎认为它是必要的。那么,首先的问题是:人们如何在没有firebug的帮助下开发这些复杂的游戏?

第二个问题:有哪些性能技巧可以帮助绘图函数(或普遍使用的javascript)更快地执行?对我来说,这似乎是区别(至少在firefox上)的瓶颈所在。

最后一个问题。通过在firebug中进行性能分析的实验,我可以看到从某些人称之为“不良实践”的方法中获得了性能提升,例如:我将代码组织成一系列执行单个任务的函数列表。这种方式运行速度比将所有代码都倒入beginPath()和closePath()之间要慢,但以这种方式做会导致混乱、难以理解的代码。你如何平衡这个问题?


5
Chrome和Safari都有Webkit Inspector,它与Firebug非常相似。 - Paul Kehrer
2
实际上,Chrome有Firebug Lite:http://getfirebug.com/releases/lite/chrome/ - yoda
1
Firefox 4的JavaScript引擎比Firefox 3.6的快得多,而且有一个测试版可供使用。 - PleaseStand
最佳实践和更多关于性能的内容请参见此处:https://dev59.com/Guo6XIcBkEYKwwoYSCc1#q4XinYgBc1ULPQZF6f4S - jaredwilli
2个回答

4

我使用100%的Chrome进行开发,然后再测试其他浏览器。

Chrome内置了检查工具,我认为它比Firebug更好。堆栈检查、步进和对象检查都更容易。

右键单击页面,然后点击“检查元素”(或按CTRL SHIFT + I)。

然后点击“脚本”选项卡。您将在右侧看到调用堆栈、作用域变量、断点、调用堆栈等。悬停在变量上不仅可以看到它们的值,还可以探索它们的嵌套值。


3

针对你的最后一个问题 - 优化本身没有问题 - 唯一不好的是过早的优化。如果你发现有一个问题,而唯一解决它的方法是让代码变得不可读,那么你必须在可读性/可维护性和性能之间做出权衡。如果性能是最重要的因素,那么请毫不犹豫地将你美丽的代码转变为丑陋的意大利面条代码。但前提是你已经尝试了其他选项。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接