Какие приемы можно использовать для повышения производительности страниц JS на мобильных устройствах?

Question

У меня есть сайт с большим количеством JS-кода (~ 100K, включая jQuery).Когда я просматриваю похожие сайты на своем телефоне или планшете, я обычно разочаровываюсь, насколько они медлительны.Я хочу, чтобы мой сайт работал хорошо на мобильных устройствах (с точки зрения времени загрузки страницы и отзывчивости ), без разработки отдельной "дружественной для мобильных устройств" версии сайта или заменыбольшие части кода.

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

Вотпара примеров того, что я ищу:

• Настройка jQuery.fx.off = true для пропуска анимаций
• Отключение интенсивных эффектов CSS, таких как box-shadow, text-shadow и border-radius

Что еще?

Answer 1

Задержка является убийцей в мобильной среде, поэтому одной из первых вещей, на которой следует сосредоточиться, является сокращение запросов, например:

Вставьте CSS и JS, затем разделите их и кэшируйте в локальном хранилище (Bing mobileделает это)

В качестве альтернативы встроите JS и оберните в комментарии, затем удалите комментарии и оцените JS (Мобильный Gmail использовал для этого - не знаю, так ли это)

Использовать данные-URI для изображений

Переключитесь с jquery на более тонкий фреймворк, такой как zepto.js

Не используйте большие смещения -ve, чтобы скрыть элементы из вида.

Если вы найдете @Презентация стандартисты из Velocity EU, содержит целый ряд других мыслей.

Answer 2

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

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

Кроме того, для добавления в ваш список я настоятельно рекомендую использовать Minify: http://code.google.com/p/minify/

Answer 3

Взгляните на следующую статью, которую я написал на Методы оптимизации производительности Javascript .

Для времени загрузки страницы на мобильных устройствах наиболее релевантным разделом является Управление и активное сокращение ваших зависимостей . Вот некоторые приемы:

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

Для Отзывчивости пользовательского интерфейса , на котором вы хотите сосредоточиться Сокращение взаимодействия с объектами хоста (DOM) и приемов около Максимизация эффективности ваших итераций . Вот некоторые ключевые:

• Сохраняйте свой HTML-супер-скудным (избавьтесь от всех этих бесполезных тегов DIV и SPAN)
• Хранить ссылки на указатели на объекты в браузере.
• Сокращение количества вызовов для модификации DOM до абсолютного минимума, особенно изменения стиля.

Все остальные разделы полезны вокруг различных аспектов создания оптимизированного и отзывчивого пользовательского интерфейса. Надеюсь, вы найдете их полезными.