Важные аспекты

Мы профессиональная команда, которая на рынке работает уже более 2 лет и специализируемся исключительно на лучших продуктах.

У нас лучший товар, который вы когда-либо пробовали!

Наши контакты:

Telegram:

https://t.me/stuff_men

E-mail:

stuffmen@protonmail.com

ВНИМАНИЕ!!! В Телеграмм переходить только по ссылке, в поиске много Фейков!

Внимание! Роскомнадзор заблокировал Telegram ! Как обойти блокировку:

http://telegra.ph/Kak-obojti-blokirovku-Telegram-04-13-15

DataArt Технологический консалтинг и разработка ПО. Важные аспекты работы браузера для разработчиков. Антон Реймер Статья основана на вебинаре, который я проводил некоторое время назад. Рассчитана она, в первую очередь на тех, кто не знает, как работают браузеры, или тех, у кого есть пробелы в знаниях. Вероятно, здесь будет много очевидного для тех кто не первый день в веб-разработке. Статью я решил разделить на две части. В первой рассмотрим общие принципы работы браузера. Во второй части я акцентирую внимание на некоторых важных моментах: Браузер — программа, работающая в операционной системе. Основное предназначение браузера — воспроизводить контент с веб-ресурсов. В качестве веб-ресурса в большинстве случаев выступает html-страница. Это также может быть pdf-файл, png, jpeg, xml-файлы и другие типы. Среди огромного количества браузеров можно выделить самые популярные: Мы рассмотрим браузеры с открытым исходным кодом: Из чего состоит и как работает браузер? На схеме изображены модули браузера, каждый выполняет собственную функцию. Начнем с пользовательского интерфейса. Пользовательский интерфейс — то, что видит перед собой пользователь, т. Несмотря на то что пользовательские интерфейсы очень похожи друг на друга, никакого стандарта, который их описывал бы, не существует. Так исторически сложилось, что браузеры постепенно перенимали интерфейс друг у друга и становились все более похожими. Механизм браузера отвечает за взаимодействие пользовательского интерфейса и модуля отображения, а также за сохранение данных в памяти. Этот модуль — самый важный для разработчиков. Работа разработчика, в первую очередь, происходит именно с ним, а как можно понять по названию — отвечает он за отображение информации на экране. Далее мы подробно рассмотрим модуль отображения и более детально разберем, как он работает. Следующий модуль — сетевые компоненты. Он отвечает за запросы по сети, берет данные с внешних ресурсов и взаимодействует с модулем отображения. Модуль JS Interpreter отвечает за интерпретацию скрипта, и его выполнение. Самые известные это V8 и JavaScriptCore. Следующий модуль — исполнительная часть пользовательского интерфейса UI backend. Она отвечает за отрисовку всего на экране и работу пользовательского интерфейса. Последний модуль — хранилище данных. Браузеру нужно где-то хранить данные, обычно для этого используется оперативная память. Какие данные нужно хранить? Например, кэш, собственные настройки. Также к хранилищу данных можно отнести indexedDB, который появился в стандарте html5 — собственные базы данных браузера. Модуль отображения Модуль отображения получает данные от сетевого модуля. Данные поступают пакетами по 8 Кб. Что важно — модуль отображения не ждет, пока придут все данные, он начинает обрабатывать и выводить их на экран по мере поступления. В случае с html-страницами, он начинает их анализировать, происходит парсинг html это отдельная большая тема, я на ней останавливаться не буду. Главное, что нужно понимать: Также по окончании парсинга срабатывает событие load, которое можно обрабатывать в скрипте. Это значит, что документ готов и скрипт может с ним работать. DOM-дерево — document object model. На основе DOM-дерева происходит конструирование дерева отображения render tree. Дерево отображения — тоже важная часть модуля отображения. По большому счету, два этих дерева — DOM-дерево и дерево отображения — наиболее важные элементы для разработчика. Дерево отображения во многом повторяет структуру DOM-дерева далее будет пример, где это будет представлено нагляднее , но имеет некоторые отличия: Дерево отображения не содержит скрытых элементов. Если у нас есть html-элемент, у которого прописан display: При этом, если visibility: Некоторые DOM-узлы, которые в DOM-дереве представлены как единый узел, в дереве отображения могут быть представлены в виде нескольких. Яркий пример — составной тэг select. Если в DOM-дереве это один узел, в дереве отображение он преобразовывается в минимум три узла. Первый узел отвечает за отображение выбранного элемента. Второй — за выпадающий список с возможными пунктами. И, наконец, третий блок отвечает за стрелочку. Текст в DOM-дереве представлен как простая node. DOM-дереву нет никакого дела до того, что там написано, сколько строк этот текст занимает. В то время, как для дерева отображения — это важно, и текст трансформируется в несколько узлов, в зависимости от того сколько строк он занимает. Это нагляднее рассмотрим чуть позже. Дерево отображения служит для того, чтобы браузер понимал, что выводить на экран. Оно содержит информацию о том, из каких блоков состоит страница. Дальше в тексте для простоты я буду называть составные части дерева отображения прямоугольниками , чтобы не путать с html блоками. Дерево отображения — совокупность прямоугольников, которая должна быть выведена на экране. После того как дерево отображения сконструировано, следует этап компоновки. На этом этапе всем прямоугольникам присваиваются размеры и координаты. Каждый прямоугольник получает свои ширину и высоту, координаты в окне браузера. После компоновки происходит отрисовка дерева отображения. Пользователь видит уже конечный результат. Модуль отображения в каждом браузере устроен по-своему, но схема работы схожая. Предлагаю рассмотреть два браузерных движка: Модуль отображения получает html и стили. В результате парсинга html возникает DOM-дерево. После чего происходит компоновка дерева. Называется она здесь Layout. И в завершении происходит отрисовка Painting. Если посмотреть на Gecko , можно заметить, что схемы очень похожи. Главные отличия — в терминологии. Парсятся стили, образуется дерево стилей. Этап Attachment здесь называется Frame Constructor, но, по сути, это тоже самое. В результате совмещения образуется дерево отображения, здесь оно называется Frame Tree. Компоновка здесь называется Reflow. А отрисовка называется Painting, так же, как и в Webkit. Для простоты приравняем некоторые термины: В данном случае оно будет выглядеть следующим образом. Есть корневой элемент он всегда присутствует , называется он documentElement и соответствует тегу html. В этом дереве присутствуют все теги. И заметим, что текст представлен, как \\\\\\\\\\\\\\\[text node\\\\\\\\\\\\\\\]. И DOM-дереву больше ничего о тексте знать не нужно. У него также есть корневой элемент RenderView , но уже можно увидеть отличия между DOM-деревом и деревом отображения. Во-первых, нет тега head , т. Как я писал выше, узлы дерева отображения мы будем называть прямоугольниками. Для наглядности я так и отобразил их на иллюстрации. Модуль отображения также занимается обработкой скриптов. Порядок обработки скриптов и таблиц стилей Важно понимать порядок, в котором происходит обработка скриптов. Рассмотрим следующий пример, где я попытался продемонстрировать все возможные способы подключения скриптов и стилей. Первое, что нужно знать про скрипты, — когда при парсинге html анализатор встречает скрипт, он останавливает дальнейший парсинг документа. И пока скрипт 1 не выполнится, дальнейший анализ документа происходить не будет. Но при этом браузер продолжает выполнять ориентировочный синтаксический анализ. Браузер все равно смотрит, что следует за скриптом. Если находятся ссылки на внешние ресурсы, которые нужно скачать и загрузить, он подгрузит эти данные, пока выполняется скрипт 1. Сделано это для оптимизации. При этом скрипт 3 все равно не будет выполняться, пока не выполнится скрипт 1. К моменту, когда скрипт 1 уже выполнится, скрипт 3 уже может быть полностью загружен. Скрипты можно вставлять в теги head и body. Разница в том, что в скрипте 2, в отличии от скрипта 1, практически весь документ уже будет проанализирован. У скрипта могут быть атрибуты, такие как defer и async. Они похожи, но у них есть отличия: Атрибут defer сообщает браузеру, чтобы тот не ждал окончания выполнения скрипта, а продолжал парсинг html-страницы. При этом скрипт 4 выполнится только после того, как весь html-документ будет проанализирован и построено DOM-дерево. Атрибут async тоже говорит браузеру, что дальнейший html-документ может быть проанализирован, пока скрипт выполняется. При этом он загружается в параллельном потоке и выполняется сразу после загрузки. Это означает, что он может быть выполнен раньше, чем скрипт1, если последний тоже имеет атрибут async. В случае с defer скрипт 4 всегда выполняется после скрипта 1. С атрибутом async неизвестно, когда он будет выполнен и какая часть документа уже будет проанализирована к этому моменту. Стили , в отличие от скриптов, никак не могут повлиять на документ. Если скрипты могут добавить дополнительные узлы или теги, то стили этого сделать не могут. Поэтому никакой надобности для браузера блокировать дальнейший анализ документа нет. При этом есть небольшой нюанс. Например, скрипт 1 может работать с теми или иными стилям, и может потребоваться доступ к ним. Браузеры стараются этот нюанс учесть. Firefox, например, если находит какие-то не подгруженные стили в процессе ориентировочного синтаксического анализа, блокирует выполнение скрипта, подгружает стили, после чего завершает выполнение скрипта. Chrome действует аналогичным образом, но чуть более оптимизировано. Он останавливает скрипт, только если понимает, что в этом скрипте происходит работа с не подгруженными стилями. Тип окна свойство display. Схема позиционирования свойства position и float. Внешняя информация размеры изображения, размер экрана. Компоновка окон — это этап компоновки дерева отображения. Я не буду подробно на ней останавливаться. При компоновке окон учитываются следующее факторы: Два основных типа — inline и block. Другие, такие как inline-block table и прочие, появились уже позже. Отличие в том, что display: Если в элементе два слова, ширина прямоугольника будет равна ширине, необходимой для вывода этих слов. Inline-элементы выстраиваются друг за другом. А блочные элементы — друг под другом. Следующее, что влияет на компоновку элемента, — свойства position и float. Position по умолчанию static, при этом прямоугольник идет в стандартном потоке компоновки. При этом позиция элемента может быть сдвинута относительно этого места: Абсолютное позиционирование, к которому относится position: Остальные прямоугольники его не учитывают. Он также не учитывает соседние элементы. Координаты его вычисляются относительно корневого элемента страницы, либо относительно предка, у которого position не static. Размеры же вычисляются тоже относительно родителя. Также на позиционирование влияет свойство float. Оно указывает, что наш прямоугольник идет в стандартном потоке, но при этом занимает либо крайнюю левую, либо крайнюю правую позиции. В заключение этой части стоит сказать что, основной поток браузера представляет собой бесконечный цикл, поддерживающий рабочие процессы. Он ожидает отправки событий, таких как reflow и repaint. Эти события ему приходят от модуля отображения. Получив их, он выполняет соответствующие действия. В Firefox модуль отображения работает в одном потоке. Он един на весь браузер. В Chrome все немного иначе: Важно, что сетевой модуль работает в отдельных параллельных потоках, которые не связаны с модулем отображения. Следовательно, сетевой компонент может использовать ресурсы независимо от того, что происходит в модуле отображения. Обычно у такого компонента есть возможность работать одновременно с несколькими подключениями и подгружать сразу несколько файлов. В Firefox, например, может быть шесть параллельных потоков, с помощью которых можно подгружать контент, скрипты и т. В следующей части мы детально рассмотрим события reflow и repaint и попытаемся понять как грамотная работа с ними может повысить скорость работы приложения. DataArt 99,89 Технологический консалтинг и разработка ПО. Надо отметить что иметь отдельное RenderingTree совсем не обязательно. В Sciter например DOM element содержит как список DOM nodes так и layout controller — список дочерних объектов для размещения и отображения. У параграфа свой text layout controller, а у div, который содержит блочные элементы, — block vertical layout controller. У таблиц — свой и т. Такая архитектура более компактна помимо всего прочего. Спасибо за живое авторское изложение простых, но важных моментов. А запись упомянутого вебинара имеется? Или это внутренний ресурс DataArt? Да, вебинар — часть нашей внутренней образовательной программы. Но совсем скоро мы опубликуем вторую часть статьи на его основе. В дереве отображения не указан элемент html. Однако он явно отображается во всех упомянутых браузерах, так как мы можем повлиять на него с помощью правил CSS. Однако указан некий root. Или в схеме ошибка? Здесь все же будет не совсем правильно приравнивать узел root в дереве отображения к узлу html в DOM-дереве. Дерево отображения отвечает за то, что отображается на экране, т. А узел html может включать элементы, которые во viewport в тот или иной момент времени не попадают. Поэтому равенство здесь не совсем корректно. Другими словами, узел root дерева отображения соответствует viewport браузера. Но узел body тоже может включать в себя такие элементы, а на схеме он есть. Но дерево отображения и DOM-дерево все-таки две разных структуры, несмотря на то, что можно провести соответствие. Схема показывает, что есть соответствие между узлами в DOM-дереве и узлами в дереве отображения. И, например, в дереве отображения есть какой-то узел, который так или иначе соответствует узлу body в DOM-дереве. Но я бы осторожно ставил знак равенства между ними. В источнике, из которого я брал, корневой элемент указан как root, возможно, как раз чтобы подчеркнуть, что аналогия с узлом html неполная, и нужно иметь ввиду, что он соответствует viewport, а не документу. Спасибо, что уделяете время. Можно ссылку на источник? Я пока что всё равно не понимаю. Про DOM-дерево я ничего не говорю. И про root элемент на минуту забудем. Вот эта картинка https: В дерево включён элемент body, но не включён html, и я не пойму, почему. Они оба находятся во viewport, всё время. Оба включают в себя элементы, которые во viewport время от времени не попадают. Фактически, для большинства веб-страниц, html и body совпадают по расположению в браузере. Про async написана неправда, script2 никак не может быть выполнен раньше script1, async указывает только на асинхронные загрузку и выполнение, все происходит в том же самом потоке, ничего параллельного здесь нет. Тем более, если у script1 нет атрибута async, то браузер даже не начнет парсить строку script2. По моим данным, выполнение script5. Как оно должно быть описано в спецификации: Параллельно выполняется загрузка, но не скрипт. У вас неверные данные, можно достаточно просто проверить. И это очень правильно, так как никто в js не ожидает параллельного выполнения в одной области видимости. Заранее извиняюсь за грубость! Очень неприятно, что автор не указал источник статьи taligarsiel. За проведенную работу по переводу конечно же огромное спасибо, но очень прошу, указывайте ссылки на используемые источники! Как я уже писал, статья основана на вебинаре и состоит из двух частей. Список источников я привел в конце вебинара и планировал его прикрепить ко второй части. Наверное, во избежание подобной ситуации имело смысл его продублировать в обеих частях. Первая часть действительно во многом основана на приведенной статье на русский она уже давно переведена. Намерения выдавать что-то чужое за свое, тем более, такую известную и широко распространенную информацию, у меня не было. Разве они не могут добавить узлы? Не понял из Вашей статьи, в чем фишка дерева отображения? Разница лишь в том, что в дереве отображения нет тега и нет тегов со стилями в параметрах? Не понял смысла разделять деревья. Вроде бы и понятно, но… зачем, почему?.. Скажем есть такой markup: Не все ноды из дома есть в рендеринге и не все ноды из рендеринга есть в доме например, псевдоэлементы. НЛО прилетело и опубликовало эту надпись здесь. Дата основания 30 апреля Сайт dataart. DataArt запустил игровую платформу самопроверки знаний для IT-специалистов 10,3k Классификация звуков с помощью TensorFlow 4,9k 5. Зачем я купил Mac Mini Late накануне года? Интересные публикации Хабрахабр Geektimes. С днём рождения, компьютерная мышка GT. Hands Free, но не телефон. Послушный дом, когда рук не хватает GT. Взаимодействие веб-страницы с Ethereum. Отчет о старте Atos IT Challenge. Недельный спринт, анкета кандидата и картонный мужик. Перспективы эволюции жестких дисков: Услуги Реклама Тарифы Контент Семинары.

Важные аспекты