Принцип работы браузеров - Общие вопросы по программированию, компьютерный форум - Страница 3

_PROGRAMM_ · 29.08.2012, 10:31

Цитата:

Во вложении прикрепил результат импорта ActiveX mshtml.tlb в Delphi, может оно вам даст понимание строения DOM

Ну в общем обыкновенная модель DOM. Новое для меня следующее. Для хранения DOM модели создаются структуры, которые имеют имя тега, а в свойствах хранятся допустимые атрибуты. Ну может быть это к лучшему.
Возьмем упрощенную модель. Она будет иметь всего два тега <body> <font> и по атрибуту к ним.

Код:

struc html_body
{
   .name    db 16 dup(0)   ; для дальнейшей идентификации тега при поиске
   .bgcolor db 6 dup (0Fh) ; это для примера
   .parent  dd 0           ; тут адрес на родителя 
}
struc html_font
{
   .name    db 16 dup(0)
   .size    db 2  dup(0)
   .parent  dd 0
}

Потом, прочитав следующий тэг, расширять динамический массив на размер структуры. Вчера ночью пришла мысль делать ссылку на родителей, а не на дочерний элемент. Думаю, что таким образом реализовать html парсер получится. Какие у него недостатки? Каким образом хранить стили? Добавлять каждое свойство в структуру к атрибутам - не нормально. Может создать динамический массив для каждого? В первых четырех байтах указатель на тег, а в следующих - значение. 0 - разделитель. Ну опять же, реализовать это на ассемблере не так просто. Один динамический массив - нормально, а 1 + количество стилей - нет.

Человек_Борща · 29.08.2012, 10:37

Стилями CSS? Хм, нужно не просто знать CSS, нужно понимать как он взаимодействует с браузером.

Парсинг HTML и создание DOM более менее понятно, но там не просто ветви и их атрибуты. Все делится на мелкие части:
Поля ввода(input)
События
Действия

Я сам не до конца понимаю как оно связывает стиль с html кодом, может все же посмотрите исходники Firefox?
Допустим текст:
<td><div class="imagebutton" id="vB_Editor_QR_cmd_underline"><im g src="images/1070/editor/underline.gif" width="21" height="20" alt="Подчёркнутый" /></div></td>

Ссылается на секцию CSS в таблице стилей:

Код:

<!-- Editor CSS automatically added by functions_editor.php at line 680 -->
<!-- Editor Styles -->
<style type="text/css" id="vbulletin_editor_css_dynamic">
<!--
@import url("clientscript/vbulletin_editor.css?v=385");

.vBulletin_editor {
	background: #D4D2CC;
	padding: 8px;
}
.imagebutton {
	background: #D4D2CC;
	color: #000000;
	padding: 1px;
	border: none;
}
.ocolor, .ofont, .osize, .osmilie, .osyscoloar, .smilietitle {
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #FFFFFF;
}
.popup_pickbutton {
	border: 1px solid #FFFFFF;
}
.popup_feedback {
	background: #FFFFFF;
	color: #000000;
	border-right: 1px solid #FFFFFF;
}
.popupwindow {
	background: #FFFFFF;
}
#fontOut, #sizeOut, .popup_feedback div {
	background: #FFFFFF;
	color: #000000;
}
.alt_pickbutton {
	border-left: 1px solid #D4D2CC;
}
.popup_feedback input, .popup_feedback div
{
	border: 0px solid;
	padding: 0px 2px 0px 2px;
	cursor: default;
	font: 11px tahoma;
	overflow: hidden;
}
-->
</style>

Следовательно нельзя парсить HTML одновременно с CSS т.к. последний может быть где угодно.
Следовательно HTML это последний элемент, с которым работает парсер, ему предшествуют, наверняка
CSS и JS а может JS и CSS.

Значит нужно иметь некий контейнер всех CSS таблиц стилей в виде списка, где кажый элемент это блок, например:

Код:

.imagebutton {
	background: #D4D2CC;
	color: #000000;
	padding: 1px;
	border: none;
}

Когда парсер проходит строку HTML обрабатывает атрибуты, и видит там указание на CSS, он находит нужный блок по имени в списке CSS стилей, указывает элементу на него(и корректирует согласно указаниям стиля в этот же момент?).

Вообще мне больше интересен интерактивный процесс взаимодействия пользователя и модели DOM в реальном времени.
И предшествующий этому процесс. Особенно взаимодействие каскадных стилей и корректировка HTML под него, во время формирования DOM, сразу применяется стиль в элементу, или на этапе отображения DOM пользователю?

Naive · 29.08.2012, 10:57

Цитата:

Сообщение от Человек_Борща

Тот же что и у XML.
1. Каждая нить может иметь атрибуты
2. Каждая нить может содержать другие нити.

node == узел, не нить)

Naive · 29.08.2012, 11:04

Код:

struc html_body
{
   .name    db 16 dup(0)   ; для дальнейшей идентификации тега при поиске
   .bgcolor db 6 dup (0Fh) ; это для примера
   .parent  dd 0           ; тут адрес на родителя 
}
struc html_font
{
   .name    db 16 dup(0)
   .size    db 2  dup(0)
   .parent  dd 0
}

ИМХО, напрасно вы из иерархической структуры пытаетесь выстроить реляционную... хотя хз, что быстрее работает на ваших языках) Просто я привык на js работать с иерархической бд)
п.с. Тут есть видео, как гекко рендерит страницу.

Пепел Феникса · 29.08.2012, 11:37

так давайте сначала, структура идет тем не менее примерно та же, что я писал, ну можно события вынести отдельно, а можно в атрибуты пихнуть.
CSS по сути есть набор атрибутов, применяемых к элементу по селектору.
CSS применяется после построения/изменения DOM-структуры.
JS, по-моему выполняется по месту(чистые вставки, не события)
при рендеринге браузер использует информацию из элементов для построения оных.

на самом деле, все не так сложно, как кажется.

_PROGRAMM_ · 29.08.2012, 12:37

Цитата:

может все же посмотрите исходники Firefox?

А вы пробовали? Я нашел там парсер html разбитый на два десятка файлов, а css не найду.

Цитата:

напрасно вы из иерархической структуры пытаетесь выстроить реляционную

В памяти компьютера она хранится именно так. иерархическая структура имитируется.

Цитата:

на самом деле, все не так сложно, как кажется.

Согласен.
Для меня стал вопрос как осуществить это в плоской памяти?
Код от Пепел Феникса:

Код:

class Attribute
{
    string name;
    string value;
};

class Element//сам тэг
{
    string name;
    list<Attribute> attributes;
    list<Element> childs;
};

Например создается класс типа Element() с именем html. Пусть размер структуры будет статическим, но в ней имеются все атрибуты и CSS свойства(например, прозрачность, остальные стили, похожие на атрибуты, будут в них же и хранится, например border-width == border). Потом в классе html создается класс Element для body. И т.д. Документ выстроен. По событию onclick создается один div в body. Каким образом нужно поступить с памятью. Динамически расширить ее на размер структуры для div. Отодвинуть значения памяти в сторону увлечения адресов после того как body закрылся и вставить на это место div. Или моим вариантом: дописать в конец и указать родителя. Главная проблема - это лишнее резервирование памяти для нулей. Хотя сейчас подумал. У Дэвида Флэнагана(точно имя не помню) в книге когда-то было написано, что браузер, если стиль явно не задан, задает его сам. Даже не знаю. Я бы его при прорисовке задавал и не тратил лишние байты памяти.

Цитата:

так давайте сначала, структура идет тем не менее примерно та же, что я писал, ну можно события вынести отдельно, а можно в атрибуты пихнуть.
CSS по сути есть набор атрибутов, применяемых к элементу по селектору.
CSS применяется после построения/изменения DOM-структуры.
JS, по-моему выполняется по месту(чистые вставки, не события)
при рендеринге браузер использует информацию из элементов для построения оных.

Полезная информация. Спасибо.

Цитата:

Тут есть видео, как гекко рендерит страницу.

Ну это перерисовка. Я же хочу придумать как хранить информацию, для рендера. Чем меньше строк, тем быстрее перерисовка.

Пепел Феникса · 29.08.2012, 12:47

Цитата:

В памяти компьютера она хранится именно так. иерархическая структура имитируется.

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

Цитата:

Каким образом нужно поступить с памятью. Динамически расширить ее на размер структуры для div. Отодвинуть значения памяти в сторону увлечения адресов после того как body закрылся и вставить на это место div.

ну кучу же не просто так придумали

.

Цитата:

У Дэвида Флэнагана(точно имя не помню) в книге когда-то было написано, что браузер, если стиль явно не задан, задает его сам.

ну значения по умолчанию, все верно.

_PROGRAMM_ · 29.08.2012, 13:01

Цитата:

иерархичность идет не на уровне хранения, а на уровне доступа.

Ну ведь нужно правильно хранить ее, чтобы можно было получить доступ по иерархии.

Цитата:

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

Динамические массивы ведь на ее основе. Я вот тут подумал. Если бы я это делал на Delphi то использовал бы как минимум два динамических массива. Так вот. получается получив еще памяти из кучи он подвинет всю информацию и запишет то, что нужно ему?

Пепел Феникса · 29.08.2012, 13:10

массивы тут не эффективны, допустим у нас массив на 1000 элементов.
при добавлении 1001-го, нужно перераспределить память массива.
и в итоге выйдет:
1)выделяем память на 1001 элемент.(итого память занята под 2001 элемент)
2)копируем все эти 1000 элементов, а учитывая иерархичность правим все указатели(если не на индексах оная).(это время)
3)только теперь освобождаем старую память.

Цитата:

Ну ведь нужно правильно хранить ее, чтобы можно было получить доступ по иерархии.

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

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

eval · 29.08.2012, 13:13

Цитата:

иерархичность идет не на уровне хранения, а на уровне доступа.

Это как?

Цитата:

берем и добавляем поле с указателем на следующий элемент на том же уровне, на предыдущий, на родителя, на первый дочерний.

А это не на уровне хранения?

29.08.2012, 10:37	#22
Человек_Борща Старожил Регистрация: 30.12.2009 Сообщений: 11,426	Стилями CSS? Хм, нужно не просто знать CSS, нужно понимать как он взаимодействует с браузером. Парсинг HTML и создание DOM более менее понятно, но там не просто ветви и их атрибуты. Все делится на мелкие части: Поля ввода(input) События Действия Я сам не до конца понимаю как оно связывает стиль с html кодом, может все же посмотрите исходники Firefox? Допустим текст: <td><div class="imagebutton" id="vB_Editor_QR_cmd_underline"><im g src="images/1070/editor/underline.gif" width="21" height="20" alt="Подчёркнутый" /></div></td> Ссылается на секцию CSS в таблице стилей: Код: <!-- Editor CSS automatically added by functions_editor.php at line 680 --> <!-- Editor Styles --> <style type="text/css" id="vbulletin_editor_css_dynamic"> <!-- @import url("clientscript/vbulletin_editor.css?v=385"); .vBulletin_editor { background: #D4D2CC; padding: 8px; } .imagebutton { background: #D4D2CC; color: #000000; padding: 1px; border: none; } .ocolor, .ofont, .osize, .osmilie, .osyscoloar, .smilietitle { background: #FFFFFF; color: #000000; border: 1px solid #FFFFFF; } .popup_pickbutton { border: 1px solid #FFFFFF; } .popup_feedback { background: #FFFFFF; color: #000000; border-right: 1px solid #FFFFFF; } .popupwindow { background: #FFFFFF; } #fontOut, #sizeOut, .popup_feedback div { background: #FFFFFF; color: #000000; } .alt_pickbutton { border-left: 1px solid #D4D2CC; } .popup_feedback input, .popup_feedback div { border: 0px solid; padding: 0px 2px 0px 2px; cursor: default; font: 11px tahoma; overflow: hidden; } --> </style> Следовательно нельзя парсить HTML одновременно с CSS т.к. последний может быть где угодно. Следовательно HTML это последний элемент, с которым работает парсер, ему предшествуют, наверняка CSS и JS а может JS и CSS. Значит нужно иметь некий контейнер всех CSS таблиц стилей в виде списка, где кажый элемент это блок, например: Код: `.imagebutton { background: #D4D2CC; color: #000000; padding: 1px; border: none; }` Когда парсер проходит строку HTML обрабатывает атрибуты, и видит там указание на CSS, он находит нужный блок по имени в списке CSS стилей, указывает элементу на него(и корректирует согласно указаниям стиля в этот же момент?). Вообще мне больше интересен интерактивный процесс взаимодействия пользователя и модели DOM в реальном времени. И предшествующий этому процесс. Особенно взаимодействие каскадных стилей и корректировка HTML под него, во время формирования DOM, сразу применяется стиль в элементу, или на этапе отображения DOM пользователю? Последний раз редактировалось Человек_Борща; 29.08.2012 в 10:50.

29.08.2012, 11:04	#24
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `struc html_body { .name db 16 dup(0) ; для дальнейшей идентификации тега при поиске .bgcolor db 6 dup (0Fh) ; это для примера .parent dd 0 ; тут адрес на родителя } struc html_font { .name db 16 dup(0) .size db 2 dup(0) .parent dd 0 }` ИМХО, напрасно вы из иерархической структуры пытаетесь выстроить реляционную... хотя хз, что быстрее работает на ваших языках) Просто я привык на js работать с иерархической бд) п.с. Тут есть видео, как гекко рендерит страницу. Alar, верни репу!

29.08.2012, 11:37	#25
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	так давайте сначала, структура идет тем не менее примерно та же, что я писал, ну можно события вынести отдельно, а можно в атрибуты пихнуть. CSS по сути есть набор атрибутов, применяемых к элементу по селектору. CSS применяется после построения/изменения DOM-структуры. JS, по-моему выполняется по месту(чистые вставки, не события) при рендеринге браузер использует информацию из элементов для построения оных. на самом деле, все не так сложно, как кажется. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
принцип работы SaveDialog	Form_13	Общие вопросы Delphi	1	20.02.2012 00:24
принцип работы ссылки	sbcd	Свободное общение	0	03.06.2011 21:50
принцип работы программы	sasha14486	Общие вопросы C/C++	1	22.05.2011 12:36
Принцип работы WH_KEYBOARD_LL	wwe2012	Общие вопросы C/C++	5	01.04.2011 15:46
Принцип работы NS-серверов	Ivan_32	Свободное общение	1	31.10.2010 03:38