Quasar Framework – высокопроизводительные пользовательские интерфейсы VueJS

Позволяет создавать

  • SPAs (Single Page App)
  • SSR (Server-side Rendered App) (+ optional PWA client takeover)
  • PWAs (Progressive Web App)
  • BEX (Browser Extension)
  • Mobile Apps (Android, iOS, …) through Cordova or Capacitor
  • Multi-platform Desktop Apps (using Electron)

https://quasar.dev/

101arrowz/fflate – высокопроизводительное (де) сжатие на js

Поддерживает DEFLATE, GZIP, and Zlib data

const compressed = new Uint8Array(
  await fetch('/GZIPorZLIBorDEFLATE').then(res => res.arrayBuffer())
);
// Above example with Node.js Buffers:
// Buffer.from('H4sIAAAAAAAAE8tIzcnJBwCGphA2BQAAAA==', 'base64');

const decompressed = fflate.decompressSync(compressed);

https://github.com/101arrowz/fflate

Лучший способ отложенной загрузки изображений для максимальной производительности

 <picture>
    <source data-srcset="path/to/image.webp" type="image/webp" />
    <source data-srcset="path/to/image.jpg" />
    <img loading="lazy" 
        class="lazyload"
        src="path/to/placeholder/image.png"
        data-src="path/to/image.jpg"
        alt="Image description"
    />
</picture>
<script>
    if ("loading" in HTMLImageElement.prototype) {
        var images = document.querySelectorAll('img[loading="lazy"]');
        var sources = document.querySelectorAll("source[data-srcset]");
        sources.forEach(function (source) {
            source.srcset = source.dataset.srcset;
        });
        images.forEach(function (img) {
            img.src = img.dataset.src;
        });
    } else {
        var script = document.createElement("script");
        script.src = "/link/to/lazyload.js";
        document.body.appendChild(script);
    }
</script>

https://github.com/aFarkas/lazysizes

Для нативной отложенной загрузки нам нужно только присвоить значение data-src значению src для img и исходных элементов и позволить браузеру обработать все остальное.

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

Scroll Up