FRONT-END SkillUP. Процес відображення сторінки

Август 21, 2022

Главная
Информатика
FRONT-END SkillUP. Процес відображення сторінки

Содержание

2. План заняття Процес відображення сторінки CSS Практика таблиці, блоки
3. Процес відображення сторінки Послідовність роботи браузера при відображенні документа: З отриманого HTML-документа формується DOM (Document Object
4. DOM DOM CSSOM
5. Repaint Repaint У разі зміни стилів елемента, які не впливають на його розміри і положення на
6. Reflow Якщо ж зміни зачіпають вміст, структуру документа, положення елементів — відбувається reflow (або relayout). Причинами
7. Оптимізація з боку браузера Браузери по можливості локалізують repaint і reflow в межах елементів, що піддали
8. CSS Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується
9. CSS переваги Інформація про стиль для усього сайту або його частин може міститися в одному .css-файлі,
10. CSS підключення Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у файл (це можна зробити
11. CSS підключення
12. CSS підключення
13. CSS синтаксис CSS має порівняно простий синтаксис і використовує небагато англійських слів для найменування різних складових
14. CSS селектори
15. Додаткова інформація CSS коментарі CSS одиниці виміру CSS кольори CSS box model
16. Практика
17. Домашнє завдання 1. https://codepen.io/tholman/pen/EwlKd - переглянути, і спробувати пояснити чому саме такий колір браузер відображає. 2.
19. Скачать презентацию

Слайд 2

План заняття
Процес відображення сторінки
CSS
Практика таблиці, блоки

Слайд 3

Процес відображення сторінки
Послідовність роботи браузера при відображенні документа:
З отриманого HTML-документа формується

DOM (Document Object Model).
Завантажуються і розпізнаються стилі, формується CSSOM (CSS Object Model).
На основі DOM і CSSOM формується дерево рендерингу, або render tree — набір об'єктів рендерингу (Webkit використовує термін «renderer», або «render object», а Gecko — «frame»). Render tree дублює структуру DOM, але сюди не потрапляють невидимі елементи (наприклад — або елементи зі стилем display:none;)
Також, кожен рядок тексту представлений в дереві рендерингу як окремий renderer. Кожен об'єкт рендерингу містить відповідний йому об'єкт DOM (або блок тексту), і розрахований для цього об'єкта стиль. Простіше кажучи, render tree описує візуальне уявлення DOM.
Для кожного елемента render tree розраховується положення на сторінці — відбувається layout. Браузери використовують потоковий метод (flow), при якому в більшості випадків достатньо одного проходу для розміщення всіх елементів (для таблиць проходів потрібно більше).
Нарешті, відбувається відображення в браузері — painting.

Слайд 4

DOM
DOM
CSSOM

Слайд 5

Repaint
Repaint
У разі зміни стилів елемента, які не впливають на його розміри

і положення на сторінці
(наприклад, background-color, border-color, visibility )
браузер просто промальовує його заново, з урахуванням нового стилю — відбувається repaint (або restyle).

Слайд 6

Reflow
Якщо ж зміни зачіпають вміст, структуру документа, положення елементів — відбувається

reflow (або relayout).
Причинами таких змін звичайно є:
Маніпуляції з DOM (додавання, видалення, зміна, перестановка елементів);
Зміна вмісту, в т.ч. тексту в полях форм;
Розрахунок або зміна CSS-властивостей;
Додавання, видалення таблиць стилів;
Маніпуляції з атрибутом class
Маніпуляції з вікном браузера — зміни розмірів, прокрутка;
Активація псевдо-класів (наприклад, :hover).

Слайд 7

Оптимізація з боку браузера
Браузери по можливості локалізують repaint і reflow в

межах елементів, що піддали зміні.
Наприклад, зміна розмірів абсолютно або фіксовано позиційованого елемента торкнеться тільки самого елементаі його нащадків.
Зміна статично позиційованого — спричинить reflow всіх елементів, наступних за ним.
How browsers work

Слайд 8

CSS
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) —

спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних.
Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.
Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі.
Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді і т.д..
Один і той самий HTML або XML документ може бути відображений по-різному залежно від використаного CSS.

Слайд 9

CSS переваги
Інформація про стиль для усього сайту або його частин може

міститися в одному .css-файлі, що дозволяє швидко робити зміни в дизайні та презентації сторінок;
Різна інформація про стилі для різних типів користувачів
Сторінки зменшуються в об'ємі та стають більш структурованими, оскільки інформація про стилі відділена від тексту;
Прискорення завантаження сторінок і зменшення обсягів інформації, що передається, навантаження на сервер та канал передачі. Досягається за рахунок того, що сучасні браузери здатні кешувати (запам'ятовувати) інформацію про стилі і використовувати для всіх сторінок, а не завантажувати для кожної.

Слайд 10

CSS підключення
Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у

файл (це можна зробити будь-яким текстовим редактором), наприклад example.css, і потім включити або імпортувати його в HTML сторінку.

Слайд 11

CSS підключення

Слайд 12

CSS підключення

Слайд 13

CSS синтаксис
CSS має порівняно простий синтаксис і використовує небагато англійських слів

для найменування різних складових стилю.
Стилі складаються зі списку правил. Кожне правило має один або більше селектор та блок визначення.
Блок визначення складається із оточеного фігурними дужками списку властивостей.
Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;).

Слайд 14

CSS селектори

Слайд 15

Додаткова інформація
CSS коментарі
CSS одиниці виміру
CSS кольори
CSS box model

Слайд 16

Практика

Слайд 17

Домашнє завдання
1. https://codepen.io/tholman/pen/EwlKd - переглянути, і спробувати пояснити чому саме такий

колір браузер відображає.
2. Використовуючи блочну і табличну верстку (результатом має бути два варіанти), реалізувати:

FRONT-END SkillUP. Процес відображення сторінки

Содержание

План заняття Процес відображення сторінкиCSSПрактика таблиці, блоки

Процес відображення сторінки Послідовність роботи браузера при відображенні документа:З отриманого HTML-документа формується

DOMDOMCSSOM

RepaintRepaintУ разі зміни стилів елемента, які не впливають на його розміри

ReflowЯкщо ж зміни зачіпають вміст, структуру документа, положення елементів — відбувається

Оптимізація з боку браузераБраузери по можливості локалізують repaint і reflow в

CSSКаскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) —

CSS перевагиІнформація про стиль для усього сайту або його частин може

CSS підключенняЩоб включити таблицю стилів CSS, потрібно зберегти код CSS у

CSS підключення

CSS підключення

CSS синтаксисCSS має порівняно простий синтаксис і використовує небагато англійських слів

CSS селектори

Додаткова інформаціяCSS коментаріCSS одиниці виміруCSS кольориCSS box model

Практика

Домашнє завдання1. https://codepen.io/tholman/pen/EwlKd - переглянути, і спробувати пояснити чому саме такий

Похожие презентации

План заняття
Процес відображення сторінки
CSS
Практика таблиці, блоки

Процес відображення сторінки
Послідовність роботи браузера при відображенні документа:
З отриманого HTML-документа формується

DOM
DOM
CSSOM

Repaint
Repaint
У разі зміни стилів елемента, які не впливають на його розміри

Reflow
Якщо ж зміни зачіпають вміст, структуру документа, положення елементів — відбувається

Оптимізація з боку браузера
Браузери по можливості локалізують repaint і reflow в

CSS
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) —

CSS переваги
Інформація про стиль для усього сайту або його частин може

CSS підключення
Щоб включити таблицю стилів CSS, потрібно зберегти код CSS у

CSS синтаксис
CSS має порівняно простий синтаксис і використовує небагато англійських слів

Додаткова інформація
CSS коментарі
CSS одиниці виміру
CSS кольори
CSS box model

Домашнє завдання
1. https://codepen.io/tholman/pen/EwlKd - переглянути, і спробувати пояснити чому саме такий