Как я могу улучшить производительность приложения AJAX?

Question

Мы все знаем, что преждевременная оптимизация - это зло. Оптимизация почти всегда подразумевает какой-то компромисс - усложнение систем, усложнение понимания и отладки и т. Д.

Преждевременная оптимизация означает (я думаю) «оптимизацию до того, как вы узнаете, в чем проблема - или даже есть ли проблема». В этом случае вы делаете одну из упомянутых жертв и ничего не получаете взамен. Следовательно, плохая идея.

С другой стороны, я действительно считаю, что пост Джеффа Этвуда 2006 года " Speed ​​Still Matters " применим вечно. Удовлетворенность пользователей во многом зависит от скорости.

Вопрос

Имея это в виду, при создании приложений AJAX, , какие инструменты можно использовать для выявления узких мест в скорости? И какие есть простые, простые улучшения, которые можно сделать?

Несколько начальных мыслей

Некоторые основные идеи, которые я знаю (не стесняйтесь расширять их):

• Делать меньше запросов. Например, если вы можете объединить несколько файлов JS или CSS в один, это один запрос.
• Отправка меньшего количества данных. Полезны меньшие размеры файлов (уменьшенный JS, сжатые изображения и т. Д.).

Некоторые вещи, которые мне интересны:

• Google Chrome (который я использую) запускает JS очень быстро. Мои пользователи могут работать в более медленных браузерах. Как я могу минимизировать влияние медленного браузера на мое приложение?

Answer 1

В делайте меньше запросов vein:

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

В отправьте меньше данных vein:

• убедитесь, что ваш сервер загружает содержимое , которые можно распаковать.
• перезагрузить меньшие куски HTML через AJAX.(Локализуйте свои изменения.)
• обратите внимание на ответ, который вы возвращаете;это так мало, как это может быть?Иногда JSON не является ответом при отправке очень больших ответов, которые могут быть тривиально проанализированы.

Для обработки медленных браузеров, особенно в отношении программирования веб-приложений, все, что вы делаете для улучшениябыстрый браузер помогает медленнее.Вы можете минимизировать смешные анимационные эффекты только для более медленных браузеров , но это не относится к категории "простых улучшений", IMO.Правильный ответ - определить ваши требования к производительности, минимальную конфигурацию компьютера / браузера, которая должна соответствовать этим требованиям, и протестировать ваш сайт .

Когда вы сталкиваетесь с слишком медленными вещами профиль вашего сайта .Между Firebug, инструментами разработчика для Chrome / Safari и инструментами разработчика для IE8 +, у разработчиков есть действительно превосходные способы выявления замедлений на основе JavaScript.Определите действительно тяжелые удары и либо переписайте, либо удалите их.

Answer 2

Вы упомянули об объединении и минимизации файлов js и css, чтобы они имели меньший размер, что, на мой взгляд, очень важно, но я не думаю, что вам следует отправлять слишком много этого посредством запросов ajax.

Я думаю, что, вероятно, лучше иметь большую начальную загрузку, где загружаются все css / js, а затем просто делать ajax-запросы только для данных (вероятно, json). Если это просто проблеск JSON, это будет намного быстрее.

Также на клиенте вы можете сделать свой код быстрее. Jquery - одна из самых быстрых библиотек, поэтому использовать ее там, где это имеет смысл, разумно, но вам нужно ее профилировать.

Firebug, Firebug, Firebug.

На стороне сервера Node.js (сервер реактора) впечатляюще быстр и заслуживает внимания.

Answer 3

Google Chrome (который я использую) запускает JS очень быстро.Мои пользователи могут работать в более медленных браузерах.Как я могу минимизировать влияние медленного браузера на мое приложение?

Мы должны были создать приложение, работающее на IE6, и это было кошмаром.Постарайтесь запомнить общие приемы оптимизации JavaScript, которые вы можете найти в сети.Затем, когда ваше приложение будет готово, возьмите медленный браузер и попытайтесь увидеть, где оно недопустимо медленное.Затем вернемся к Firebug и оптимизируем узкие места.

Для справки, мы закончили тем, что запустили Firefox 3, потому что IE6 сделал наше приложение кошмаром ожидания (много элементов пользовательского интерфейса).Я пришел к выводу, что если у ваших пользователей старые браузеры, сначала разработайте для них свое приложение (т.е. не слишком много Javascript, более базовый HTML).