Приведет ли бесконечная прокрутка к сбоям браузера?

я реализовал бесконечный свиток так:

new_page_value = 1;

$(window).scroll(function() {
    if($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {

        new_page_value = parseInt(new_page_value) + 1;

        get_page(new_page_value);

    }
});

когда пользователь почти достигает нижней части страницы (200px слева) функция get_page() называется. Это содержит вызов ajax, который получает все содержимое новой страницы и добавляет до <body> документа.

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

было бы это возможным решением этой проблемы:

Я буду продолжать добавлять новые страницы в документ <body> до 10-й страницы, после чего я буду заменять <body> содержание полностью вместо добавления. Итак, используя html(), а не append().

Я просто не знаю, будет ли это действительно работать для предотвращения сбоев. Уилл!--7--> очистить "память" предыдущего html, который был доставлен через ajax?

7
browser crash javascript jquery

3 ответов

Я действительно думаю, что это распространенная проблема для многих сайтов с содержанием списка AJAX. Итак, давайте возьмем пример на некоторых из самых популярных (подумайте о масштабе = опыте ) веб-сайтов и их решений:

Google Images

если вы проверить images.google.com и вы ищете все, что угодно, например, "guiness", вы увидите страницу, полную результатов (на самом деле изображения загружены ajax, а не html-код, поэтому страница с фиксированной высотой), и когда вы прокрутка внизу есть кнопка "Show more results". Это может быть решением одной из ваших проблем, но действительно ли необходимо разместить кнопку внизу, например, на 10-й странице? Я действительно думаю, что это вообще хорошее решение для удобства использования страницы и утечки памяти, но это действительно не необходимый вариант, как мы можем видеть в:

Facebook

Facebook Newsfeed-это другая история. Есть кнопка "Show more posts", но я действительно не знаю, когда именно он отображается, а не загрузка следующей страницы сообщений. Однажды мне довелось загрузить 10-15 страниц сообщений, только прокручивая. И вы знаете, что сообщения Facebook включают видео, фотографии, комментарии AJAX и много других причудливых вещей Javascript, которые занимают много памяти. Я думаю, что им удалось сделать это после многих исследований, сколько пользователей прокручиваются вниз.

на YouTube

Youtube имеет "Load more videos" на каждой странице, поэтому решение в основном похоже на Google, за исключением того, что Google отображает весь html страницы и при прокрутке просто загружает изображения.

Twitter

Twitter поддерживает бесконечную прокрутку. Да, они делают это, возможно, потому, что tweet-это 140 символов, и им не нужно так беспокоиться о памяти. Ведь кто готов прочитать более 1000 страниц твитов при одной загрузке страницы. Поэтому у них нет кнопки для "load more" и им это не нужно.

Итак, есть два решения :

  1. использовать бесконечную прокрутку (вы должны учитывать, сколько контента вы загружаете и насколько он богат )
    2. использование : "Load More"

скорее всего, вы не должны удалять уже загруженный контент из списка.

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

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

4

я работал с этим раньше, и вот некоторые мои мысли:

a) если вы добавляете данные на страницу(ы) памяти в то время, то это не проблема, некоторые браузеры могут не реагировать хорошо, но большинство из последних браузеров будет отображаться без каких-либо проблем, пока есть достаточно памяти на целевой машине, вы, вероятно, могли бы увидеть, как использование ОЗУ увеличивается при добавлении страниц. Используйте chrome для этого, поскольку каждая страница является отдельным процессом и имеет встроенную задачу менеджер!--6-->

b) относительно использования html(), Он действительно удаляет разметку, но делает это с большой стоимостью, поскольку он пытается позаботиться о специальных условиях и имеет накладные расходы и обращается ко всем элементам управления, вложенным в контейнер, который вы заменяете (не уверен в последнем Пэте), но у него есть стоимость. Более простой способ очистить DOM - использовать innerHTML свойство и установить его пустым, jquery делает это, но это в более поздний момент в html() API-интерфейс. откройте api и посмотрите на метод. используя innerHTML

$("<selector>")[0].innerHTML=""

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

надеюсь, что ответы на ваш вопрос и прокрутка btw infinte-это ваш друг, используйте его, не проектируйте случай, который, вероятно, будет проверен только вашей командой QA. Лучше потратить свои усилия в другом месте.

1

Да, это будет, если я могу предложить идею после того, как, скажем, 5 страниц просто удалите первую страницу и добавьте новую вместо того, чтобы удалять все предыдущие страницы. удачи :)

0