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

Question

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

我想在 ipad 上运行这个应用程序，从最初的测试来看它真的很慢(抖动和丢失内容)。

要在ipad上流畅运行应该注意哪些方面？ 我应该避免 javascript 调用吗？我可以使用硬件加速将 Javascript 替换为 CSS3 吗？

TIA

京东

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
});