Есть ли способ определить, кэшируются ли файлы через JavaScript?

Question

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

Я оптимизирую css файлы, например:

<link href="catalog/view/javascript/jquery/magnific/magnific-popup.css" type="text/css" rel="stylesheet" media="nope!" onload="this.media='all'">

Это прекрасно работает для меня , поскольку я создаю предварительный загрузчик, который ожидает загрузки всех css и затем показывает мою страницу. В этом случае PageSpeed ​​доволен, а я счастлив.

Проблема в том, что прелоадер в основном работает:

     <script>
        document.onreadystatechange = function() {
            if (document.readyState !== "complete") {
                document.querySelector(
                  "body").style.visibility = "hidden";
                document.querySelector(
                  "#loader").style.visibility = "visible";
            } else {
                document.querySelector(
                  "#loader").style.display = "none";
                document.querySelector(
                  "body").style.visibility = "visible";
            }
        };
    </script>

Таким образом, каждый раз, когда я открываю страницу, он показывает загрузчик, и Я хочу показать это только в первый раз / пока страница все еще рендерится и показывает чистый html из-за блокировки css /.

Так что мне интересно, есть ли способ сделать это ..

Заранее спасибо!

Answer 1

Вы можете go 3 способа: 1. Использовать Cookie 2. Использовать localStorage 3. Использовать sessionStorage

Я бы порекомендовал вам использовать sessionStorage или localStorage, 1-й по соображениям безопасности и 2-й = cookie-файлы медленно идут прочь.

Чтобы использовать sessionStorage, вы можете сделать что-то вроде этого:

//set sessionStorage
if (!sessionStorage.alreadybeenthere) {

    document.onreadystatechange = function() {
        if (document.readyState !== "complete") {
            document.querySelector(
                "body").style.visibility = "hidden";
            document.querySelector(
                "#loader").style.visibility = "visible";
        } else {
            document.querySelector(
                "#loader").style.display = "none";
            document.querySelector(
                "body").style.visibility = "visible";
        }
    };

    sessionStorage.alreadybeenthere = 1;

    console.log(Loader_executed)
}
else {
    console.log(Loader_not_executing)
}

Вы можете поэкспериментировать с localStorage, если вы уверены, что браузер пользователя настроен на сохранение кэша браузера.

Более подробную информацию можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 2

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

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

Answer 3

Вы можете использовать интерактивное состояние вместо complete . Он работает при построении DOM, но дополнительные ресурсы все еще загружаются. Полный код:

switch (document.readyState) {
  case "loading":
    document.querySelector("body").style.visibility = "hidden";
    document.querySelector("#loader").style.visibility = "visible";
    break;
  case "interactive":
  case "complete":
    document.querySelector("body").style.visibility = "visible";
    document.querySelector("#loader").style.visibility = "hidden";
    break;
}