Уменьшение размера большого одностраничного приложения AJAX (jQuery, ASP.net)

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

Другой способ - динамически загружать нужные вам части через 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;
  }
}

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

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

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

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

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

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

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

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

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

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

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

HTH.

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

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

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

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

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

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

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