Пул предварительно загруженных фреймов - PullRequest
Новая
       18

Пул предварительно загруженных фреймов

3 голосов
/ 16 февраля 2012

Мое приложение просто загружает настоящую HTML-страницу в первый раз ( заголовок , содержимое , боковая панель и нижний колонтитул ).Затем каждый щелчок по ссылке загружается через AJAX и отображается (просто загружается новый content ).

Некоторый загруженный ajax content содержит один или несколько фреймов.Некоторые пользователи сообщают, что когда они нажимают на некоторые страницы (нажимая на ссылку sidebar ), загрузка страницы занимает слишком много времени.Эти страницы, о которых они сообщают, являются страницами с 4 или 5 фреймами внутри.Приложение отправляет что-то вроде: 

<div>
    Content...
    <iframe style="display:none" src="URL1"></iframe>
    <iframe style="display:none" src="URL2"></iframe>
    <iframe style="display:none" src="URL3"></iframe>
    <iframe style="display:none" src="URL4"></iframe>
    More content...
</div>

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

Я думал о создании пула iframe, поэтому я просто загружу 5 iframe при первой загрузке страницы (когда я загружаю заголовок,боковой панели и нижнего колонтитула), а затем повторно использовать эти Iframes по требованию, поэтому вызов AJAX вернет фрагмент кода, подобный следующему: 

<div>
    Content...
    <div class="iframe" style="display:none" src="URL1"></div>
    <div class="iframe" style="display:none" src="URL2"></div>
    <div class="iframe" style="display:none" src="URL3"></div>
    <div class="iframe" style="display:none" src="URL4"></div>
    More content...
</div>

и обратный вызов success будет назначать каждый div.iframe с соответствующим ему iframe.

Достаточно ли будет ускорить загрузку страницы и улучшить пользовательский опыт?Есть ли плагин jQuery или код, который уже делает это или подобное?Есть ли другая альтернатива?

Ответы [ 2 ]

1 голос
/ 20 февраля 2012

Прежде всего: если у вас есть контроль над всем контентом и у вас нет серьезных аргументов для этого, вы не должны использовать iframes. Они добавляют некоторые накладные расходы, не подходят для SEO и с ними неудобно работать.

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

Не бойтесь позволить пользователю подождать некоторое время. Он привык к тому, что при переходе по ссылке происходит некоторое время ожидания. Важно, что вы указываете, что что-то происходит (используйте для этого spinner ).

Другим важным аспектом при использовании AJAX является история. Пользователь ожидает, что кнопка «назад» (и «вперед») будет работать как положено. AJAX не поддерживает это само по себе. Подумайте о том, чтобы использовать плагин истории jquery, например , этот , чтобы значительно улучшить удобство использования вашего приложения.

Я бы сделал что-то вроде этого: 

<div id="content1" style="display:none"></div>
<div id="content2" style="display:none"></div>
<div id="content3" style="display:none"></div>

loadContent();

function loadContent(){
   // asynchronously load content1, upon success content2, and so on,
   // until all resources are loaded
}

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

1 голос
/ 20 февраля 2012

Иван

Вы можете полностью загрузить свою первую страницу, а затем начать загружать фреймы, используя AJAX, в какой-то кеш (возможно, строки JSON?). Как вы говорите - вы можете загрузить кешированный контент по запросу пользователя. Не забудьте также обслуживать людей, у которых отключен JavaScript.

Если вы обнаружите, что запрос на загрузку iframes по мере необходимости (без предварительной загрузки) стоит выяснить, почему они загружаются медленно. Что происходит, когда вы загружаете iframe src напрямую?

Почему вы используете так много iframe? Если все они указывают на внешние веб-сайты, это значительно замедлит время загрузки, поскольку каждая страница должна будет отображаться, прежде чем ваш запрос AJAX сможет перетянуть контент на вашу страницу. Если они указывают на внутренние (локальные) страницы, то, возможно, обратите внимание на то, что они не используются?

...