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

  Переглядів 36,780

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 Рік тому
Спасибо, это великолепный доклад.
@dzianisdashkevich1848
@dzianisdashkevich1848 2 роки тому
клевый доклад, спасибо большое!
@Alexus1504
@Alexus1504 3 роки тому
Интересный доклад!
@denispepper2830
@denispepper2830 Рік тому
Лекция - огонь!!!!
@user-br1tu9xh4w
@user-br1tu9xh4w 11 місяців тому
Спасибо! Очень полезно и доступно!
@evgenylevchenya8734
@evgenylevchenya8734 4 роки тому
Клёвый доклад
@zakchips
@zakchips 3 роки тому
спасибо. хорошая структура материала, помогает восполнить очевидные и не очень пробелы в знаниях.
@somethingn6091
@somethingn6091 Рік тому
Невероятно полезно для джунов, спасибо))
@dobermanpharaoh7567
@dobermanpharaoh7567 3 роки тому
супер, узнал много нового, особенно по дев тулз
@armensargsyan8981
@armensargsyan8981 10 місяців тому
Спасибо за всю инфу, про Layers вообще не знал(это меняет многое!), еще раз спасибо!
@OutsideVibe
@OutsideVibe Рік тому
спасибо
@egorpopov7965
@egorpopov7965 2 роки тому
охуенно пацаны, лайк
@kirillpavlovskii8342
@kirillpavlovskii8342 2 роки тому
Промисы это часть языка JavaScript , они никак не относятся к браузерным api. Браузерный api это fetch
@slavikfedorik1896
@slavikfedorik1896 Рік тому
Если не ошибаюсь, setTimeout это макротаска
@user-mw7vo6tx9i
@user-mw7vo6tx9i 3 місяці тому
Насколько я понимаю, функция requestIdleCallback как раз очень полезная. Она ведь запускается только тогда, когда нет нагрузки и есть свободные ресурсы
@user-lf1ep5io7r
@user-lf1ep5io7r Рік тому
Не понял, о каких потоках идёт речь на 01:04:00. JS же однопоточный
@dsrcorporationru
@dsrcorporationru Рік тому
В данном случае речь идёт о веб воркерах. Браузерный Web API позволяет обозначить кусок логики как воркер, и после этого браузер будет выполнять его в отдельном потоке. Веб воркер не имеет доступа к main thread потоку, в котором исполняется основной js. Если ресурсов устройства хватит, то web worker API исполнит код, обозначенный как web worker, в отдельном потоке, иначе в конкурентном режиме.
@user-bd3ub4gn9x
@user-bd3ub4gn9x Рік тому
Аттрибут defer тоже самое, что и async, только можно явно указать порядок выполнения скриптов? 😂 Какой ужас. Аттрибут defer явно указывает парсеру, что скрипт должен быть загружен только после построения всего dom. А async может загрузить скрипт до построения dom и может привести к критическим ошибкам, если в данном скрипте есть обращение к дом, который ещё не загрузился. Это теория на уровне junior.
@user-bv7jf1lu1s
@user-bv7jf1lu1s Рік тому
ты все верно говоришь) именно это я подразумевал сказать, но соглашусь - сформулировал очень неоднозначно
@xrollup
@xrollup 3 роки тому
Пиарщица-стройняшка, ничо так :)
@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 ukposts.info/have/v-deo/a35lmo6JpJV1ypc.html
@HaveFun77777
@HaveFun77777 3 роки тому
@@dsrcorporationru ukposts.info/have/v-deo/rpuGiI5on6imp2w.html&ab_channel=DevConf
@1want2be3
@1want2be3 3 роки тому
Согласен. Можно пойти дальше и провести митап стоя на голове. Поражаюсь баранам, которым важно КАК, но не важно ЧТО. Осадочек у него остался, какое надо самомнение иметь чтобы полагать, что кому-то не насрать на тебя - я не знаю.
@Alexus1504
@Alexus1504 3 роки тому
А зачем стоять? Что за бзик?!
@egorrublev5529
@egorrublev5529 5 місяців тому
всё бы хорошо но слушать не возможно, работайте над ораторским искусством и подачей
КАК РАБОТАЕТ БРАУЗЕР?
45:23
Alek OS
Переглядів 109 тис.
КТО СМОГ ПОБЕДИТЬ?😳
00:36
МЯТНАЯ ФАНТА
Переглядів 602 тис.
ВИРУСНЫЕ ВИДЕО / Мусорка 😂
00:34
Светлый Voice
Переглядів 9 млн
Андрей Мелихов - V8 под капотом
59:57
HolyJS
Переглядів 50 тис.
Подборка полезных программ для OSINT разведки
10:02
Чёрный Треугольник
Переглядів 66 тис.
Про Kafka (основы)
49:23
Владимир Богдановский
Переглядів 342 тис.