На что обратить внимание при переносе приложения HTMl5 на ipad? - PullRequest
1 голос
/ 05 августа 2011

У меня есть приложение HTML5, в котором есть некоторые анимации javascript (одна, которая запускает часы), SVG-анимация (которая в значительной степени контролируется Javascript), а также некоторые воспроизводимые видео.

Я хочу запустить приложение на ipad, которое из начальных тестов очень медленное (дрожит и отсутствует контент).

Какие области я должен смотреть, чтобы он работал гладко на Ipad? Должен ли я избегать вызовов JavaScript? Могу ли я заменить Javascript на CSS3 с аппаратным ускорением?

ТИА

JD

1 Ответ

2 голосов
/ 05 августа 2011

Поскольку вы пометили jQuery, я предполагаю, что вы используете его.

Прежде всего, вы должны максимально оптимизировать свой код, особенно код jQuery.

jQuery - это библиотека, которая использует базовые функции JavaScript, чтобы позволить вам писать меньше кода. Но меньшее количество кода не означает более быстрый код. Фактически, многие из задач, которые вы обычно выполняете с помощью jQuery, могут быть выполнены с помощью простого простого JavaScript, просто написав немного больше строк кода, но с более производительными сценариями.

Кроме того, помните, что не следует использовать слишком много слушателей событий. По умолчанию события всплывают по отношению к родительским элементам, поэтому вы можете прикрепить один родительский прослушиватель к событию, и все дочерние элементы смогут перехватить это событие через родительский прослушиватель, используя event.target.

Если вы используете JavaScript для создания вещей, которые вы можете делать только с CSS и HTML, делайте это без JS, это быстрее.

Это всего лишь несколько советов по оптимизации кода, но я предлагаю вам поискать некоторые лучшие практики JavaScript и jQuery и вещи, которых следует избегать.

Здесь вы можете многое узнать о лучших практиках JavaScript, например.

EDIT

Поскольку кажется, что вы начинаете разработку веб-интерфейса, я добавлю кое-что, чего вы действительно хотите избежать при использовании 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
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...