当前位置：文江博客话题详情

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

发布于 2024-11-28 05:37:39 字数 257 浏览 0 评论 0原文

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

我想在 iPad 上运行该应用程序，从最初的测试来看，它真的很慢（紧张和缺少内容）。

我应该注意哪些方面才能使其在 ipad 上流畅运行？我应该避免 JavaScript 调用吗？我可以用带有硬件加速的 CSS3 替换 Javascript 吗？

TIA

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅此而已 2024-12-05 05:37:39

既然你标记了 jQuery，我想你正在使用它。

首先也是最重要的是，您应该尽可能优化您的代码，特别是 jQuery 代码。

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

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

如果您使用 JavaScript 来实现仅使用 CSS 和 HTML 就能完成的操作，那么不用 JS 即可完成，这样会更快。

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

例如，在这里您可以找到很多有关 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>

，并且您希望在用户每次单击

标记时对它们执行某些操作。

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

Since you tagget jQuery I presume you are using it.

First and foremost you should optimize your code as much as possible, expecially jQuery code.

jQuery is a library which utilize basic JavaScript functionalities to let you write less code. But less code doesn't mean faster code. In fact, many of the tasks you usually do with jQuery can be done with simple plain JavaScript, just writing little more lines of code, but with more performant scripts.

Also, be aware not to use too many event listeners. Events bubble up by default to the element parents, so you can attach a single event listener to the parent, and all the children will be able to catch that event via their parent listener using event.target.

If you are using JavaScript to make things you could do with CSS and HTML only, do it without JS, it's faster.

This is just some hints of code optimization, but I suggest you to search for some JavaScript and jQuery best practices and things to avoid.

Here you can find much about JavaScript best practices for example.

EDIT

Since it seems you are starting front-end web development I will add something you really want to avoid when using jQuery.

Keep references about elements you searched for, instead of search for them many times.

// 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();

About the event listener, say you have many elements inside an other element

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

And you want to do something with them every time the user clicks on the <p> tags.

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

回复收藏 0 原文

~没有更多了~