предварительная загрузка содержимого HTML на исходной странице HTML для будущих запросов

Question

Я создаю приложение, которое запрашивает много контента с сервера. Я установил таймеры от клика для рендеринга по всему приложению на каждом этапе, AJAX-запрос, DOM-инъекция и рендеринг. Я обнаружил, что запросы совершенно непредсказуемы, и в среднем я записал, что они могут занимать 43% от конвейера кликов к визуализации.

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

 MyRequest.prototype.sync = function(r) {

    if (this.storage[r.path]) {
        return this.storage[r.path];
    } else {

        this.req = new XMLHttpRequest();
        this.req.open('GET', r.path, false);
        this.req.send(null);

        if (this.req.status === 200) {  
           this.storage[r.path] = this.req.responseText;
           return this.req.responseText;  
        } else {
           return null;
        }
    }
};

Другие решения, о которых я думал, - это сохранение контента в дереве DOM, когда элементы DOM выталкиваются из области просмотра или отображения: ни одно из них не влияет на дерево рендеринга. И захват содержимого из DOM при необходимости.

** Какова лучшая практика для предварительной выборки контента, предпочтительно по начальному HTTP-запросу html-страницы, который в конечном итоге будет запрошен? Является ли этот метод достойным решением?

Answer 1

Если вы можете сделать это правильно, вы заработаете миллионы:)

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

Существует несколько стратегий:

Загрузка содержимого с исходным запросом

Допустим, первая загружаемая страница имеет 6 кнопок. Если очень вероятно, что пользователь нажмет на button1 и button3, возможно, стоит отправить эти страницы сразу.

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

Загрузка страниц на заднем плане

Если вы находитесь в «воронке» ситуации, когда, скорее всего, пользователь нажмет «следующая» на следующей странице, загрузите страницу в фоновом режиме. Когда пользователь нажимает кнопку «Далее», страница уже существует.

Не выгружать ничего

Если вы находитесь в ситуации, когда пользователь часто переключается между несколькими страницами, не выгружайте их. Храните данные в памяти или даже всю структуру HTML в DOM (display:none и т. П.).

Получение страниц по мере необходимости

Это ваш «запасной вариант» и, вероятно, то, что вы сейчас используете.

---

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

Вы должны найти правильный баланс для этих методов.