169 похожих чатов

Возмем картинку, она загружает свой src когда? - только когда

ты ее прицепил к документу. Как только ты ее отцепишь браузер сразу выкинет "внутренности" картинки.

На SSR браузер получает готовый html видит там картинки, видосики и айфреймы загружает их как будто это обычный хтмл. Затем загружается JS файл с твоим бандлом и вызывается гидрация, пусть это будет вторая секунда когда юзер уже смотрит на готовую страницу. Гидрация берет отцепляет все ноды от дома - картинки пропадают, состояние видоса пропадает, айфреймы свой браузерный стейт тоже теряют. А затем гидрация сразу же прицепляет это все обратно. В итоге все что браузер уже сделал, он начинает делать заново. Грузит src видосов, картинок и айфреймов.

Вопрос зачем гидрация отцепляла ноды от дерева?

13 ответов

22 просмотра

https://drive.google.com/file/d/1GeDHFSAyolu27uyg7k0DzO6ZF-HcuFNq/view?usp=sharing пример записал такого поведения, но только с айфреймом ютуб. svelte/sapper. До этого был лейзиоад на айфрейм, но реклама не показывается при таком подходе в айфрейме - у них google полиси по поводу рекламы в автоплей режиме (лейзи был реализован через thumb на котором по клику грузился iframe)

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7...

спасибо =) вот и тот несуществующий узкий кейс с видосом ютюба как основным контентом страницы

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7...

а картинки у вас справа они тоже под свелтом или нет? Что будет если снять с них height?

Alexander Ponomarev
а картинки у вас справа они тоже под свелтом или н...

если речь о src https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100&height=100 то на сервере крутится imgproxy в который через nginx эти параметры передаются, если убрать высоту то загрузится c оригинальным аспект ретио и заданной шириной https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100, а если убрать ширину тоже, то загрузится с полной шириной картинки

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
если речь о src https://static.zentrum-der-gesund...

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

Alexander Ponomarev
это классно, но я хотел посмотреть как браузер пов...

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

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
а у него и нет атрибута, я пока вам видео записыва...

ну знач у него стили видимо жестко установлены?

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
не совсем понял вопрос

в CSS стилях этой картинки задана высота?

Alexander Ponomarev
в CSS стилях этой картинки задана высота?

задана только ширина через w-24 у родителя, высота определена через .image.is-square {padding-top: 100%;}, а как раз в примере на странице рецептов я правило на фигуру написал неправильно .image-square - которого не существует в tailwind

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
задана только ширина через w-24 у родителя, высота...

да вот если паддинг топ удалить из стилей и посмотреть как она будет гидрироваться, то там будет мерцание?

Alexander Ponomarev
да вот если паддинг топ удалить из стилей и посмот...

как раз на видео раздел рецептов с правилом неправильным и паддинга нет - ничего не мерцает

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

Обсуждают сегодня

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта