Как изменять инфу на сайте?

Question

[FlyMoBiS]

сделал кино сайт на главной страницы разная инфа с текстом и картинками,
страницы переключаются путем нажатия на кнопку дальнейшего получения ответа и изменения картинок/текста
когда захожу в консоль и переключаю "страницы"(сайт не перезагружается. просто изменяется) то мне показывает вот такое чему верить?

если включить кешь то он не загружает заного все но при этом он также сохраняет мегабайты
а если изменить и вместо подмены перенапрявлять(перезагружать сайт) то он загружает 1 раз

но главный вопрос "Как зименять инфу на сайте?"

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

хотя если он делает это только при закритии/долгого времени (удаляет) то у меня на сайте переключений может быть сотни и больше

мне нужно самому удалять ненужное или всетаки браузер в зависимосте от настроек/нужды сам чистит?

и вообще есть ли возможность удалять это или это делает только браузер?

*если вы хотите написать что это можно найти в инете то напишите как искать подобные запросы в инете*

Comments

[Сергей Сергей]

Если сайт из конструктора, то вся эта ересь не важна.
Если сайт рукописный, то со временем понимание придёт, наверное.

[Александр Васильев]

Булька, вилька, тарелька пишем без «ь».
Сол, мол - с «ь».

Answer 1

[Михаил Ливач]

ткните в любой из сетевых запросов ( в Вашем случае - картинку в середине скриншота ), и увидите заголовки запроса и ответа. И погуглите "http cache control".
По рекомендациям гугла, ресурсы ( assets ) надо кешировать на год, а изменять через изменение пути к ресурсу.

Comments

[FlyMoBiS]

спасибо за это информацию я использую это в дальнейшей разработке (кешь/кешь контрол)
и извиняюсь за неправильное представление проблемы

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

крч вот можете подсказать? мне ведь надо что то изменить при изменении ссылки на картинки а то мне кажется что если заполнить 1000 раз таким образом если браузер не оптимизирует все сам то сеанс сайта может занимать сотни м-байт

___

...
<b>// изменяет ссылку на картинку и ссылку* ссылки*
// image.src ='...' n a.href = '...'</b>
const fillItem = async (itemData, element) => {
    if (typeof element != 'object') { return; };
    if (typeof itemData != 'object') { return; };
    if (typeof itemData.posters == 'object') {
        let posterURL = './frontend/images/notFound.png';
        if (typeof itemData.posters.original.url === 'string') { posterURL = itemData.posters.original.url }
        else if (typeof itemData.posters.medium.url === 'string') { posterURL = itemData.posters.medium.url };
        element.getElementsByTagName('img')[0].src = storageHOST + posterURL;
    };
    if (typeof itemData.names === 'string') {
        let name= '';
        if (typeof itemData.names.ru === 'string') { name= itemData.names.ru }
        else if (typeof itemData.names.alternative === 'string') { name= itemData.names.alternative }
        else if (typeof itemData.names.en === 'string') { name= itemData.names.en }
        if (name.length > 33) { name= nameAnime.slice(0, 30) + '...' };
        element.getElementsByTagName('p')[0].textContent = name;
    };
    element.getElementsByTagName('a')[0].href = '/player?id=' + itemData.id;
};
<b>// изменяет количество элементов</b>
const changeItems = (itemsData) => {
    if (typeof itemsData != 'object') { return; };
    for (let i = 0; i < itemsData.length; i += 1) {
        fillItem(itemsData[i], allItems[i]);
    };
    deleteItems(allItems.length - itemsData.length);
    itemsData.splice(0, allItems.length);
    if (itemsData.length < 1) { return; };
    createItems(itemsData);
};

function changePage() {
    if (typeof currentPage === 'string') { currentPage = Number.parseInt(currentPage); };
    if (typeof currentPage !== 'number') { currentPage = 1; };
    if (typeof search === 'string') {
        req = Api.getSearch(search, currentPage, itemsInPage);
    } else {
        req = Api.getUpdates(currentPage, itemsInPage);
    };
    req.then((res) => {
        res = JSON.parse(res);
        maxPages = res.pagination.pages;
        changeItems(res.list);
    }, (err) => {
        console.log('f', err);
    });
};

changePage() может вызываться неограничено число раз за один сеанс, все будет норм или нет?

[Михаил Ливач]

FlyMoBiS, я считаю, что проще взять данные ( хотя бы синтетический тестовый набор) и проверить. В DevTools есть Recorder, Performance Monitor, Memory ( последний даже виден на скриншоте, только я бы выбрал режим Allocation Sampling).

[Михаил Ливач]

FlyMoBiS, оффтопик касательно показанного кода: я могу подсказать только самое простое.
1) если разумно выделить из fillItem() отдельные функции fillItemImage(), fillItemTitle() ( можно даже fillItemLink() для единообразия, хоть она и будет совсем короткой ), то станет лучше.

2) ошибка в строке

if (name.length > 33) { name= nameAnime.slice(0, 30) + '...' };

3) тут тоже: if (typeof itemData.names === 'string') - там же по смыслу видно, что не строка, а хеш (объект).

4) блок проверок в имени наверняка можно записать читабельнее. Что там может быть, если не строки? Null? Стоит вынести в функцию:

const getName = function (names) {
    // не уверен, что это лучший вариант
    const name = String( names.ru || names.alternative || names.en || "" );
    // поборники чистоты разделят поиск непустого варианта и обрезку в разные функции
    if ( name.length > 33 ) {
        return name.slice(0, 30) + '...';
    }
    return name;
}

и тогда в том месте кода даже переменная не нужна:

element.getElementsByTagName('p')[0].textContent = getName( itemData.names );

5) c currentPage можно похоже записать:

currentPage = MathNumber.parseInt(currentPage) || 0;
currentPage = Math.max( currentPage, 1 );

6) функция changeItems() выглядит подозрительно. Я не очень понял, что там происходит, но сначала идет вроде как более "тяжёлая" операция ( модификация DOM ), а потом какие-то подгоны массивов под размер. Нельзя ли сделать наоборот?

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

[FlyMoBiS]

Михаил Ливач, спасибо но II не использую так как js иногда ведет себя не так как языки которые я использовал до этого и 0 || 1 он выберет 1 (а я хочу просто чтобы он не выбрал undefined/null) подумал что он может захотеть выбрать более длиную строку
касательно всего остального спасибо за некоторые правки но я хотел поулить ответ на то будет ли в браузере сайт использовать кучу памяти и надо ли мне оптимизировать самому это все или браузер сам управляет паматью
и про devtools спасибо потестирую надеюсь ничего делать не надо

[Михаил Ливач]

подумал что он может захотеть выбрать более длиную строку

А Вы не фантазируйте, что он может захотеть, а почитайте спецификацию.
В данном случае Ваше "хочу" и поведение интерпретатора совпадают.

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

И на это я Вам тоже ответил. Для Вашего кода написать синтетический тест достаточно просто.