Сокращение большого одностраничного приложения AJAX (jQuery, ASP.net) - PullRequest
4 голосов
/ 10 июля 2009

В настоящее время я создаю одностраничное приложение AJAX. Это большая «форма регистрации», которая была построена как многошаговый мастер с несколькими ветвями и различными словами, в зависимости от того, что выбирает пользователь. В конце формы находится редактируемая страница обзора. Когда пользователь отправляет форму, он отправляет нам довольно большое электронное письмо и небольшое электронное письмо. Это вроде как очень скучно выбирать свою собственную книгу приключений.

Ползучесть функций выдвинула размер этого приложения за пределы возможностей текущей архитектуры, и она слишком медленная для работы на любых медленных компьютерах (не подходит для веб-приложения), особенно на тех, которые используют Internet Explorer. В настоящее время он имеет 64 отдельных шага, 5400 элементов DOM, и только файл .aspx весит 300 КБ (4206 LOC). Загрузка приложения занимает от 1,5 секунд на быстрой машине с FireFox 3 до 20 секунд на более медленной машине с IE7. Перемещение между шагами занимает примерно одинаковое количество времени.

Итак, давайте вспомним особенности:

  • Многоступенчатый стиль мастера с несколькими путями форма (64 шага)
  • Текущий шаг показан следующим образом: http://codylindley.com/CSS/325/css-step-menu
  • Несколько проверенных полей
  • Изменение словарного запаса в зависимости от пользователя выбор
  • Окончательная, редактируемая страница обзора

Я использую jQuery 1.3.2 и следующие плагины:

  • Плагин jQuery Form Wizard
  • Плагин jQuery clueTip
  • jQuery sexycombo
  • jQuery плагин meioMask

А также некоторый пользовательский скрипт для загрузки слов из файла XML, запуска страницы обзора и некоторых эстетических принадлежностей.

Я не публикую это нигде в открытом доступе, но я в основном ищу несколько советов о том, как подходить к такого рода проектам и сделать их легкими и расширяемыми. Если у кого-то есть какие-либо идеи относительно инструментов, учебных пособий или технологий, это то, что я ищу. Я довольно начинающий программист (я в основном парень по CSS / xHTML / Design), так что говорите осторожно. Мне просто нужен хороший план атаки, чтобы сделать это приложение быстрее. Есть идеи?

Ответы [ 4 ]

4 голосов
/ 10 июля 2009

Один из способов - разбить шаги на несколько страниц / запросов. Для этого вам нужно где-то хранить состояние предыдущих страниц. Вы можете использовать базу данных для этого или другого метода.

Другим способом будет динамическая загрузка необходимых вам деталей через AJAX. Это не поможет с 54000 элементами DOM, но поможет с начальной загрузкой страницы.


Основываясь на комментариях к вопросу, быстрый способ «решить» эту проблему - создать класс C #, отражающий все поля вашего вопроса. Как то так:

public class MySurvey
{
  public string FirsName { get; set; }
  public string LastName { get; set; }
  // and so on...
}

Тогда вы сохраните это в сеансе (слишком легко ... Я знаю, что это не "лучший" способ), как это

public MySurvey Survey 
{
  get 
  { 
    var survey = Session["MySurvey"] as MySurvey;
    if (survey == null)
    {
      survey = new MySurvey();
      Session["MySurvey"] = survey;
    }
    return survey;
  }
}

Таким образом, у вас всегда будет ненулевой объект съемки, с которым вы можете работать.

Следующим шагом будет разбить эту большую форму на меньшие страницы, скажем: step1.aspx, step2.aspx, step3.aspx и т. Д. Все эти страницы будут наследоваться от общей базовой страницы, которая будет включать в себя указанное выше свойство. После этого все, что вам нужно сделать, это отправить запрос из step1.aspx обратно и сохранить его в Survey, аналогично тому, что вы делаете сейчас, но для каждого небольшого фрагмента. Когда закончите, перенаправьте (Response.Redirect ("~ / stepX.aspx")) на следующую страницу. Информация с предыдущей страницы будет сохранена в объекте сеанса. Если они закроют страницу браузера, они не смогут вернуться.

Вместо того, чтобы сохранять его в сеансе, вы можете сохранить его в базе данных или в файле cookie, но для файлов cookie ограничено 4 КБ, поэтому он может не подходить.

1 голос
/ 10 июля 2009

Я согласен с PBZ, сохранение отдельных шагов было бы идеальным. Вы можете, однако, сделать это с AJAX. Однако, если бы вы это сделали, потребовались бы некоторые вещи, которые звучали бы так, как будто бы они выходили за пределы вашего набора навыков, в основном, для фронт-энда разработки, вам, вероятно, нужно было бы создать новую строку базы данных и привязать ее к идентификатору сеанса пользователя, и каждый раз, когда они нажимают на следующий шаг, он обновляет эту строку. Возможно, даже привязать его к своему IP-адресу, чтобы, если все это взорвалось, они могли вернуться и нажать «помнишь меня?» для вашего приложения, чтобы получить его.

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

Что касается минимизации отдельных элементов DOM, упомянутый выше шаг может помочь уменьшить это, поскольку вы, вероятно, загружаете множество расширяемых функций для тех модулей, которые могут вам понадобиться или не понадобиться.

С другой стороны, мне нужно было бы увидеть источник, чтобы узнать, как сказать вам оптимизировать его, но похоже, что в отдельных шагах много избыточности, некоторые из которых, вероятно, можно урезать до функций, которые включите небольшую рекурсию или, по крайней мере, делегируйте некоторые задачи друг другу.

Хотелось бы помочь больше, но не копаясь в вашем источнике, я могу предложить только базовые стратегии. Желаем удачи!

0 голосов
/ 04 ноября 2009

Похоже, в основном это проблема оптимизации JQuery.

Первым предложением было бы переключить столько селекторов на идентификаторы, сколько вы можете. У меня было ускорение более чем в 200-300 раз, поскольку я мог перейти только к выбору атрибута id.

Второе предложение - это скорее план атаки. Поскольку IE - ваша основная проблемная область, я предлагаю использовать отладчик IE8. Вам просто нужно нажать f12 в IE8 ... Вкладки 3 и 4 - скрипт и профилировщик соответственно.

Как только вы сделали столько, сколько вы думаете, # 1, чтобы получить отправную точку, просто перейдите к профилировщику, нажмите Начать профилирование, выполните некоторые медленные действия на веб-странице, а затем прекратите профилирование. Вы увидите ваши самые длинные вызовы методов и просто проработаете их.

Для более точного тестирования / dev перейдите на вкладку скрипта. Точки останова местных жителей и т. Д. Для анализа. Вы можете разрабатывать / тестировать изменения через непосредственное окно ... то есть поставить точку останова, где вы хотите изменить функцию, вызвать функцию, выполнить свой javascript вместо определенного javascript в непосредственном окне.

Когда вы думаете, что что-то выяснили, профилируйте свои изменения, чтобы убедиться, что они действительно являются улучшениями. Просто запустите профилировщик, запустите старый код, остановите его и отметьте свой тест. Затем перезапустите профилировщик и используйте непосредственное окно для выполнения вашей измененной функции.

Вот и все. Если этот поток не может продвинуть вас достаточно далеко, как упоминалось выше, сам JQuery (и, следовательно, его плагины) не очень эффективен, и замена стандартным javascript ускорит все. Если тест ваших плагинов идет медленно, посмотрите, как заменить их другими плагинами.

0 голосов
/ 10 июля 2009

Согласитесь, разбейте шаги. 5400 элементов - это слишком много.

Есть несколько вариантов, если вам нужно сохранить его на одной странице.

  • AJAX запрашивает возврат либо необработанного HTML, либо массива объектов для анализа в HTML или DOM
  • фреймы или фреймы
  • JavaScript для установки innerHTML или манипулирования DOM на основе текущего шага. Обратите внимание, что с этой опцией IE7 и особенно IE6 будут иметь утечки памяти. Google IE6 утечки памяти JavaScript для получения дополнительной информации.
  • Используйте document.write, чтобы включить только файлы .js, необходимые для текущего шага.

НТН.

...