Задать вопрос
@mnnoee

Как оптимизировать загрузку и парсинг больших JS файлов со стороны браузера/клиента?

Есть скрипт
#!/bin/bash

GALLERY_DIR="./gallery"
OUTPUT_FILE="./gallery/gallery-data.js"

echo "const galleryData = [" > "$OUTPUT_FILE"

while IFS= read -r -d '' img; do
    filename=$(basename -- "$img")
    name_no_ext="${filename%.*}"
    md5_value=$(md5sum "$img" | awk '{print $1}')

    printf "  {\n" >> "$OUTPUT_FILE"
    printf "    i: \"%s\",\n" "$filename" >> "$OUTPUT_FILE"
    printf "    t: \"%s\",\n" "$name_no_ext" >> "$OUTPUT_FILE"
    printf "    d: \"\",\n" >> "$OUTPUT_FILE"
    printf "    s: \"%s\"\n" "$md5_value" >> "$OUTPUT_FILE"
    printf "  },\n" >> "$OUTPUT_FILE"
done < <(find "$GALLERY_DIR" -maxdepth 1 -type f \( -iname "*.webp" -o -iname "*.jpg" -o -iname "*.png" \) -print0)

echo "];" >> "$OUTPUT_FILE"


Который генерирует файл JS формата с последующей её загрузкой у клиента.

Выхлоп этого js следующий:

const galleryData = [
  {
    i: "/gallery/123123.webp",
    t: "можно менять",
    d: "и описание тоже",
    s: "3b10082cf3075f2e6a57deab33f5868d"
  }
];


Я понимаю, что эту систему можно увеличить хоть до 10тысяч фотографий, но размер в 10мб~ будет велик, если я правильно считаю

Как это все оптимизировать можно?

Код который хавает данные объекты их генерирует до бесконечности, то есть не каждый браузер сможет отобразить все 10к фоток
А если сделать ленивую загрузку? Даже с кешированием, через brotli/gzip?

Этот проект скорее для самого себя чем в продакшн, я не знаю что делать.
Да, я пробую только в грубую статику, только хардкор и генерация на стороне клиента

Буду рад любой идеи, как реализовать.. разбиение js-database и скорее их ленивой загрузки, но без разбиения основного файла
Так как сама цель иметь тьму объектов и статика, полностью статика.
  • Вопрос задан
  • 203 просмотра
Подписаться 1 Средний Комментировать
Решения вопроса 4
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Совершенно непонятно, зачем на одной странице нужны 10 тыс фоток.
Во-первых, столько физически не поместится даже на три-пять экранов.
Во-вторых, человек в принципе не способен воспринимать такое количество информации одновременно.
Скорее всего, мне думается, это просто лента фотографий, которая "бесконечно" прокручивается для просмотра.
Вот из этого и нужно исходить.

Сложить список файлов в базу данных.
Загружать небольшое количество, ну скажем 50-100 изображений.
По мере прокрутки страницы подгружать еще сотню следующих. Предыдущие удалять. При прокрутке в обратную сторону подгружать предыдущие, а ушедшие из зоны видимости удалять.
И никакой нагрузки на браузер не будет, и визуально будет казаться, что все фото присутствуют на странице.
Ответ написан
@rPman
Постарайтесь не закладывать нагрузку на браузер, хотя 10мб json это большие но не фатальные размеры. Скорее всего проблема не в json а
браузер сможет отобразить все 10к фоток

и да, естественно, сделайте ленивую загрузку фото.
Ответ написан
Комментировать
@alekssamos
Программист любитель
Если статика, то генерировать много маленьких пронумерованных json. photos1.json, photos2.json, photos68.json...
И если однажды мы при увеличении цифры получим 404, значит, скорее всего, фотки закончились.
Перед новой генерацией зачистить тоже легко: rm -f photos*.json
Ответ написан
Комментировать
VoidVolker
@VoidVolker Куратор тега JavaScript
Dark side eye. А у нас печеньки! А у вас?
  1. Установить NodeJS
  2. Установить MongoDB
  3. Установить Mongoose или любую другую ORM
  4. Написать простейшие контроллёры для вашего API
  5. Запустить сервис на VPS и использовать для ваших задач
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы