Блог

Главная - Вопросы по программированию - Изменить расширение с .ff на .ff.js повысить скорость?

Изменить расширение с .ff на .ff.js повысить скорость?

#javascript #file #asynchronous #xmlhttprequest #browser-cache

#javascript #файл #асинхронный #xmlhttprequest #браузер-кэш

Вопрос:

Эй! Недавно я создал небольшую платформу для создания своих небольших веб-страниц и проектов поверх.

Сегодня я просматриваю множество статей о хитростях для ускорения работы. Я заинтересован в улучшении скорости xhr.

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

Я использую специальное расширение filename.ff в своих фреймворках, чтобы знать, какие файлы я хочу использовать при доступе к ресурсу.

В качестве живого примера https://bugs.stringmanolo.ga/#projects/fastframework загружается с https://github.com/StringManolo/bugWriteups/blob/master/projects/fastframework/fastframework .ff с использованием XHR при нажатии на ссылку fastframework на этой странице https://bugs.stringmanolo.ga/#projects

Мой вопрос: если я изменю расширение с fastframework.ff на fastframework.ff.js кэшируется ли файл браузером, и тогда он будет загружен быстрее? Также будет работать в автономном режиме? Или оно уже кэшировано? Изменение используемого кода фреймворка.ff.js это вообще не будет иметь никакого значения?

Комментарии:

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

2. Потому что я не знаю, где будет работать фреймворк. Работает как в blogger, так и на сайте. Также я использую netlify для размещения своих проектов.

Ответ №1:

Я, наконец, решил это лучшим способом, используя service workers и cache api. Я предоставляю вам код, который я использовал здесь, так что, возможно, это поможет кому-то в будущем.

ff.js (ff — это объект ff = {})

 /*** Cache Service Workers Code */
ff.cache = {}
ff.cache.resources = [];

ff.cache.start = function(swName, ttl) {
  let tl = 0; 
  tl = localStorage.cacheTTL;
  if ( tl) {
    const now = new Date();
    if (now.getTime() >  localStorage.cacheTTL) {
      localStorage.cacheTTL = 0;
      caches.delete("cachev1").then(function() {
      });
    } 
  } else {
    navigator.serviceWorker.register(swName, {
      scope: './'
    })
    .then(function(reg) {
      caches.open("cachev1")
      .then(function(cache) { 
        cache.addAll(ff.cache.resources)
        .then(function() {
      localStorage.cacheTTL =  (new Date().getTime())    ttl;
        });
      });
    })
    .catch(function(err) {
    }); 
  } 
};

ff.cache.clean = function() {
  caches.delete("cachev1").then(function() { 

  });
};
/* End Cache Service Workers Code ***/

cache.js (это сервисный работник, перехватывающий запросы)

 self.addEventListener('fetch', (e) => {
 e.respondWith(caches.match(e.request).then((response) => {
  if(response)
   return response
  else
   return fetch(e.request)
 }) )
})

main.js (это основной файл, включенный в index.html файл)

 ff.cache.resources = [
"./logs/dev/historylogs.ff",
"./blogEntries/xss/xss1.ff",
"./blogEntries/xss/w3schoolsxss1.ff",
"./blogEntries/csrf/w3schoolscsrf1.ff",
"./projects/fastframework/fastframework.ff",
"./projects/jex/jex.ff",
"./ff.js",
"./main.js",
"./main.css",
"./index.html",
"./resources/w3schoolspayload.png",
"./resources/w3schoolsxsslanscape.png",
"./resources/w3schoolsxss.png"];
ff.cache.start("./cache.js", 104800000); 
/* 604800000 milliseconds equals 1 week */

Вы можете протестировать его в режиме реального времени в https://bugs.stringmanolo.ga/index.html размещается из репозитория github на случай, если вам понадобится просмотреть больше кода.