Как работает браузер: дерево рендеринга, HTML/CSS парсинг, модели цикла событий

  Рет қаралды 37,217

DSR Corporation RU

DSR Corporation RU

4 жыл бұрын

Доклад Дмитрия Разинкова на митапе по веб-разработке, организованном DSR Corporation.
Вы узнаете, какие процессы происходят в браузере при отрисовке веб-страниц, разберетесь со структурой дерева рендеринга, узнаете о наиболее эффективных CSS-селекторах, распространенных браузерных движках, особенностях парсинга HTML/CSS и моделях цикла событий.
Дмитрий поделится действительно работающими хитростями оптимизации производительности веб-приложений и сайтов, проверенными на крупных веб-проектах для международных компаний.

Пікірлер: 44
@damirkacineman538
@damirkacineman538 4 жыл бұрын
Гоподи, почему так мало лайков, это же гииииигантский раздел за 1 час с лишним, спасибо большое за ваши труды!
@user-hj2ld5gh9f
@user-hj2ld5gh9f 4 жыл бұрын
Хороший доклад, спасибо! Хорошо структурирован и очень полезный.
@user-cg8mv6oz8l
@user-cg8mv6oz8l 2 жыл бұрын
Крутой доклад, спасибо!
@yaolegoleynik
@yaolegoleynik 3 жыл бұрын
Спасибо отличный доклад
@user-yr3gb9bh4k
@user-yr3gb9bh4k Жыл бұрын
Спасибо, это великолепный доклад.
@Alexus1504
@Alexus1504 3 жыл бұрын
Интересный доклад!
@dzianisdashkevich1848
@dzianisdashkevich1848 2 жыл бұрын
клевый доклад, спасибо большое!
@zakchips
@zakchips 3 жыл бұрын
спасибо. хорошая структура материала, помогает восполнить очевидные и не очень пробелы в знаниях.
@denispepper2830
@denispepper2830 Жыл бұрын
Лекция - огонь!!!!
@user-br1tu9xh4w
@user-br1tu9xh4w 11 ай бұрын
Спасибо! Очень полезно и доступно!
@evgenylevchenya8734
@evgenylevchenya8734 4 жыл бұрын
Клёвый доклад
@armensargsyan8981
@armensargsyan8981 10 ай бұрын
Спасибо за всю инфу, про Layers вообще не знал(это меняет многое!), еще раз спасибо!
@somethingn6091
@somethingn6091 Жыл бұрын
Невероятно полезно для джунов, спасибо))
@dobermanpharaoh7567
@dobermanpharaoh7567 3 жыл бұрын
супер, узнал много нового, особенно по дев тулз
@OutsideVibe
@OutsideVibe Жыл бұрын
спасибо
@slavikfedorik1896
@slavikfedorik1896 Жыл бұрын
Если не ошибаюсь, setTimeout это макротаска
@kirillpavlovskii8342
@kirillpavlovskii8342 2 жыл бұрын
Промисы это часть языка JavaScript , они никак не относятся к браузерным api. Браузерный api это fetch
@egorpopov7965
@egorpopov7965 3 жыл бұрын
охуенно пацаны, лайк
@user-mw7vo6tx9i
@user-mw7vo6tx9i 4 ай бұрын
Насколько я понимаю, функция requestIdleCallback как раз очень полезная. Она ведь запускается только тогда, когда нет нагрузки и есть свободные ресурсы
@user-lf1ep5io7r
@user-lf1ep5io7r 2 жыл бұрын
Не понял, о каких потоках идёт речь на 01:04:00. JS же однопоточный
@dsrcorporationru
@dsrcorporationru 2 жыл бұрын
В данном случае речь идёт о веб воркерах. Браузерный Web API позволяет обозначить кусок логики как воркер, и после этого браузер будет выполнять его в отдельном потоке. Веб воркер не имеет доступа к main thread потоку, в котором исполняется основной js. Если ресурсов устройства хватит, то web worker API исполнит код, обозначенный как web worker, в отдельном потоке, иначе в конкурентном режиме.
@xrollup
@xrollup 3 жыл бұрын
Пиарщица-стройняшка, ничо так :)
@user-bd3ub4gn9x
@user-bd3ub4gn9x 2 жыл бұрын
Аттрибут defer тоже самое, что и async, только можно явно указать порядок выполнения скриптов? 😂 Какой ужас. Аттрибут defer явно указывает парсеру, что скрипт должен быть загружен только после построения всего dom. А async может загрузить скрипт до построения dom и может привести к критическим ошибкам, если в данном скрипте есть обращение к дом, который ещё не загрузился. Это теория на уровне junior.
@user-bv7jf1lu1s
@user-bv7jf1lu1s Жыл бұрын
ты все верно говоришь) именно это я подразумевал сказать, но соглашусь - сформулировал очень неоднозначно
@TeppopucT
@TeppopucT 3 жыл бұрын
Я здесь, потому что хочу понять, почему мои 100-200 мс превращаются в ваши 500-2000 мс.
@antonveremyanin6318
@antonveremyanin6318 3 жыл бұрын
Иван, Вы про что?
@TeppopucT
@TeppopucT 3 жыл бұрын
@@antonveremyanin6318 я бэкенд
@illiafilatov4491
@illiafilatov4491 2 жыл бұрын
@@TeppopucT я узбек
@user-yi9gy4cz7n
@user-yi9gy4cz7n 2 жыл бұрын
я не понимаю зачем делать слайды на английском языке, потому что аудитория русская. Если ты англичанин - вот тебе ссылка на английскую версию слайдов. Или же чувак хочет вещать и для англоязычной аудитории. Хотя, мне кажется, там и своих героев хватает. Хотя я и знаю язык в достаточной степени, чтобы понимать о чем идет речь на слайдах, все же отвлекаясь на перевод слов отвлекаешься от того, что говорит докладчик, или приходится останавливать видео. Я что хочу сказать, что это - не очень хороший жест по отношению к слушателям, и думал он в момент составления слайдов явно не о них. До конца не досмотрел еще, но в целом материал кажется неплохим. Досмотрел. Материал обширный и все сразу переварить не получится. Надо дальше вникать в детали и проч. Спасибо за доклад.
@Maxim9575
@Maxim9575 2 жыл бұрын
Скорее всего доклад не для русских, отсюда и англоязычность. А перевести, рука обломится, поэтому что имеем то имеем. Проще пойти почитать информацию самостоятельно в таком случае, достоверность будет выше чем слушать стороннюю интерпретацию. P.S У меня есть ссылочки на очень интересные темы связанные с работой браузера если нужно могу поделиться. Я это вообще на перемотке глянул, подача заунывная.
@user-yi9gy4cz7n
@user-yi9gy4cz7n 2 жыл бұрын
@@Maxim9575 скиньте, пожалуйста в личку или сюда
@Maxim9575
@Maxim9575 2 жыл бұрын
@@user-yi9gy4cz7n ответ то ли фильтруется с ссылками либо автор канала удаляет. Оставьте мне свой почтовый ящик.
@sad_rin
@sad_rin 2 жыл бұрын
Очень очень поверхностно (
@danilx6239
@danilx6239 Жыл бұрын
Доклад в целом неплохой, но подача хромает. Даже не буду говорить про саму подачу от спикера. Скажу что звук самой записи плохой. Можно и нужно лучше, если вы выкладываете на ютуб хотите собирать лайки. От себя добавляю, что хотелось узнать про тяжесть парсинга различных CSS-селекторов. К сожалению тут этого коснулись совсем немного. Понимаю, о чем говорит автор, но на практике никогда не встречал проблем с вложенными цсс-селекторами. Мне кажется что БЭМ был придуман не для ускорения цсс-парсинга, а для борьбы с "перезаписыванием" различных цсс-правил. Моё мнение - может в 2007 году вложенные селекторы и нагружали браузер, но современный цсс работает на столько быстро и хорошо, что это вообще не та проблема, на которую нужно смотреть. Дом состоящий из 100-150к узлов нагрузит браузер намного сильнее, чем сложный цсс, примененный на этот дом.
@webxcryptoit7308
@webxcryptoit7308 Жыл бұрын
Звук, ужасный!
@MsZulu0
@MsZulu0 3 жыл бұрын
Господи, почему у вас все разрабы сидят на презентации... Такое чувство что вы боитесь публику, прячетесь за столом. Удручает. Посмотрите как себя ведут спикеры на крыпных митапах. Тема хорошая, но осадочек от того что докладчик от меня что-то прячет осталось)
@dsrcorporationru
@dsrcorporationru 3 жыл бұрын
Станислав, а сможете привести пример образцового выступления с Вашей точки зрения?
@ubube4603
@ubube4603 3 жыл бұрын
@@dsrcorporationru kzfaq.info/get/bejne/abRkmbuD0sWomZc.html
@HaveFun77777
@HaveFun77777 3 жыл бұрын
@@dsrcorporationru kzfaq.info/get/bejne/rNGFh7tizdjZdmw.html&ab_channel=DevConf
@1want2be3
@1want2be3 3 жыл бұрын
Согласен. Можно пойти дальше и провести митап стоя на голове. Поражаюсь баранам, которым важно КАК, но не важно ЧТО. Осадочек у него остался, какое надо самомнение иметь чтобы полагать, что кому-то не насрать на тебя - я не знаю.
@Alexus1504
@Alexus1504 3 жыл бұрын
А зачем стоять? Что за бзик?!
@egorrublev5529
@egorrublev5529 5 ай бұрын
всё бы хорошо но слушать не возможно, работайте над ораторским искусством и подачей
КАК РАБОТАЕТ БРАУЗЕР?
45:23
Alek OS
Рет қаралды 114 М.
Como ela fez isso? 😲
00:12
Los Wagners
Рет қаралды 11 МЛН
маленький брат прыгает в бассейн
00:15
GL Show Russian
Рет қаралды 4,4 МЛН
Why? 😭 #shorts by Leisi Crazy
00:16
Leisi Crazy
Рет қаралды 33 МЛН
Продвинутый JavaScript
1:39:36
Yandex for Frontend
Рет қаралды 97 М.
TCP/IP: что это и зачем нужно
1:35:59
Hillel IT School
Рет қаралды 580 М.
Андрей Мелихов - V8 под капотом
59:57
Como ela fez isso? 😲
00:12
Los Wagners
Рет қаралды 11 МЛН