Мобильный сайт слишком медленный по телефону

Question

Я создаю прототип для мобильного раздела веб-сайта. Он не использует динамических сотрудников, просто jQuery и Foundation 4. Когда я тестирую сайт в браузере iphone, очень медленно загружать и реагировать на касания. Можете ли некоторые опытные люди рассказать мне все, чтобы убедиться, что сайт загружается и работает быстрее на мобильном устройстве?

Все мои изображения сохранены «для сети», поэтому они не должны быть проблемой. Это может быть медленным, потому что моя таблица стилей CSS очень длинная? Я не специалист по объединению и применению одного класса для многих вещей, так может быть, у меня слишком много id-ов и отдельных классов? Будет ли это большой проблемой в этом случае? Кроме того, это может быть медленным, потому что я использую Foundation, jQuery и подключаемый модуль Flexlider, и каждый из них имеет свои собственные таблицы стилей и .js-файлы? Должен ли я выбросить все файлы, которые я не использую из их папок? Я на правильном пути и что еще я могу сделать? Заранее спасибо.

Answer 1

Есть некоторые вещи, которые помогли мне сделать мое мобильное приложение быстрее. У меня была такая же проблема, как и вы, реакция на экран была очень низкой.

---

Избавьтесь от каждого неиспользуемого кода

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

Вам даже нужны занятия или удостоверения?

Глядя на мое приложение, у меня почти на любом элементе был класс или Id. Если бы я мог использовать селектор элементов. here Дополнительная информация о селекторах. Следуйте структуре DOM.
В основном я использовал класс для групп и идентификаторов для одного конкретного элемента (который мне почти никогда не нужен).

Проверьте, если у вас есть стили CSS, которые не добавить что-то

Иногда у вас есть несколько стилей, которые на самом деле не добавлять ничего к нему. Прекрасным примером является использование float: *; и display: inline-block;. При использовании обоих из них на одном элементе нет дополнительной функции, так как float делает элемент inline-block по умолчанию.

оптимизируют вам сценарий

С этим я имею в виду, можете ли вы короче вам коды с той же функциональностью. Используя две почти идентичные функции? сократите их до одной функции. Также использование готовой функции вашего языка скриптов поможет вам быстрее сделать ваш код. Поэтому не создавайте свою собственную функцию сортировки, а используйте функцию premade. За помощью по оптимизации кода вы предлагаете посмотреть here.

JQuery селекторы

Сделайте селекторы Jquery более конкретны. Например:
У вас может быть div с содержанием класса.

<div class="content"></div> 

Вместо того, чтобы выбрать его с

$('.content') 

Вы можете использовать

$('div.content') 

JQuery теперь можно ограничить поиск до Div только элементы.
Подробнее передний более эффективные JQuery селекторы here

Магазин код determenation

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

Не использовать «большие» плагины при использовании половины

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

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

Не стесняйтесь исправлять меня, когда я ошибаюсь.