将HTMl5应用程序移动到ipad时需要注意什么？

Question

我有一个HTML5应用程序，它有一些javascript动画（一个运行时钟），SVG动画（主要由Javascript控制）以及一些视频播放。

我想在ipad上运行应用程序，从最初的测试开始很慢（紧张和缺少内容）。

我应该在哪些方面让它在ipad上顺畅运行？ 我应该避免使用javascript电话吗？我可以用硬件加速用CSS3替换Javascript吗？

TIA

JD

Answer 1

因为你标记jQuery我认为你正在使用它。

首先，您应尽可能优化代码，尤其是jQuery代码。

jQuery是一个利用基本JavaScript功能的库，可以让你编写更少的代码。但是代码越少并不代表更快的代码。事实上，你通常使用jQuery完成的许多任务都可以通过简单的纯JavaScript完成，只需编写更多的代码行，但需要更多高性能的脚本。

另外，请注意不要使用太多的事件侦听器。事件默认情况下会向元素父级冒泡，因此您可以将单个事件侦听器附加到父级，并且所有子级都可以使用event.target通过其父级侦听器捕获该事件。

如果你使用JavaScript来制作你只能使用CSS和HTML做的事情，那么在没有JS的情况下做它，它会更快。

这只是代码优化的一些提示，但我建议您搜索一些JavaScript和jQuery最佳实践以及要避免的事情。

Here您可以找到很多关于JavaScript最佳做法的信息。

修改

由于您似乎正在开始前端Web开发，因此我将在使用jQuery时添加您真正想要避免的内容。

保留对您搜索过的元素的引用，而不是多次搜索它们。

// THIS IS BAD!
$('#foo').doSomething();
$('#foo').doSomethingElse();
$('#foo').doOtherThings();

// Better approach
var $foo = $('#foo');

$foo.doSomething();
$foo.doSomethingElse();
$foo.doOtherThings();

// You can also chain
$foo.doSomething().doSomethingElse.doOtherthings();

关于事件监听器，假设你在其他元素中有许多元素

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
</div>

每次用户点击<p>代码时，您都希望对其进行操作。

// THIS IS BAD!!
$('#foo p').click( function() {
    // do something...
});

// Better to use only one event listener attached to the container, and refer to the target element who originated the event
$('#foo').click( function( event ) {
    // event.target is now the real element being clicked
});