Ленивая загрузка разметки HTML

Question

Моя организация - это компания, занимающаяся электронной коммерцией, и у нее есть множество страниц с длинным списком товаров, на некоторых страницах может быть 20 товаров, а на других - до 100!- Не спрашивайте меня, почему!

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

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

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

Любые альтернативные методы также будут прослушаны

С нетерпением ждем любых мнений

Answer 1

Вы можете динамически загружать контент при прокрутке .

Вы можете загрузить все ключевые данные в своем HTML-коде, а затем добавить необходимую разметку с помощью Javascript.

Кроме того, вы можете отправить компактный XML-документ и применить XSLT-преобразование на стороне клиента, если клиент принимает его (см. Заголовок «Accept:»).

Answer 2

Я использовал следующий подход, чтобы скрыть время грима для рендеринга / создания контента (android, jq и jq-mobile)

а) Контент создается в фоновом режиме. Всегда создаются маленькие кусочки (длительностью 20-30 мс) и вставляются в дом. Примерно через 50 мс (setTimeout) будет создан следующий кусок и вставлен в DOM

b) Специфично для Android: я заметил, что первый выбор элемента DOM (например, $ (x # xyz ’)) занимает относительно много времени (около 10 мс). Если к элементу обращаются во второй раз, это займет всего 1 мс (Samsung S3). Надеюсь, это поможет

Answer 3

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

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