Проблемы с производительностью мобильного веб-приложения - PullRequest
Новая
       36

Проблемы с производительностью мобильного веб-приложения

0 голосов
/ 06 сентября 2011

Я создаю мобильное веб-приложение, и, хотя я все еще нахожусь в процессе создания прототипа, мне трудно исправить некоторые проблемы с производительностью.

Само приложение (работаетвсе гладко в настольных браузерах, но значительно вяло в Mobile Safari): прототип веб-приложения Hancards .Вы можете войти как mifeng: wangwang или создать нового пользователя.

Общая неуклюжая производительность может быть допустимой, за исключением одного: браузер просто падает (!) При открытии заданной страницынажмите «просмотреть» (увеличить все карточки), а затем попытаться вернуться на предыдущую страницу.

steps

Код, который выполняется при нажатии «просмотра», выглядит следующим образом (сам по себе очень вялый, есть ли способ улучшить его?): 

if ($(this).hasClass('big')) {
    $('.card').unwrap().removeClass('big flippable').addClass('small');
    $(this).removeClass('big');
}
else {
    $('.card').wrap('<div class="bigCardWrap" />').removeClass('small').addClass('big flippable');
    $(this).addClass('big');
}

И еще одна вещь, довольно странная ошибка.Очень часто блок «слово дня» не отображает текстовый узел для последнего элемента (<div class="meaning">), даже если он находится в коде.Текст не будет отображаться, если вы все равно не «встряхнете» DOM (снятие галочки и отметка галочкой одного из связанных свойств CSS также может этого добиться).Это происходит как в настольных, так и в мобильных браузерах Safari.

Код, который его записывает, выглядит следующим образом: 

// While we are here, also display the Word of the day
$.post('ajax.php', {action: 'stuff:showWotd'}, function(data) {

    // Decode the received data
    var msg = decodeResponse(data);

    // Insert the values
    $('.wotd .hanzi').text(msg.content[0]['hanzi']);
    $('.wotd .pinyin').text(msg.content[0]['pinyin']);
    $('.wotd .meaning').text(msg.content[0]['meaning']);

});

mysterious text node

Я не ожидаю васчтобы дать мне совет о том, как исправить производительность всего приложения (вероятно, мне придется пересматривать общий объем проекта, а не пытаться найти обходные пути), но я по крайней мере хотел бы посмотреть, как решить эти две проблемы.Спасибо!

1 Ответ

1 голос
/ 09 сентября 2011

Единственная проблема с производительностью, которую я вижу в скрипте, это вызовы wrap / unwrap - добавление и удаление элементов из DOM обычно происходит довольно медленно, и вы, вероятно, можете получить тот же эффект, если всегда иметь элемент-оболочку и изменять его класс вместо добавления или удаления.

Однако проблемы с производительностью, которые вы видите, наиболее вероятны в вашем css:

  • 3D-преобразования могут быть намного быстрее, чем 2D, из-за аппаратного ускорения. Похоже, у вас уже есть это, хотя вы должны быть осторожны с тем, к каким элементам он применяется
  • У теней есть реальные проблемы с производительностью, особенно при анимации. Удаление их, вероятно, исправит большую часть медлительности.
  • Может помочь перегруппировка фоновых изображений - одно фоновое изображение под прозрачными страницами работает быстрее, чем фоновое изображение для каждой страницы.
...