Какие существуют кнопки навигации в браузере и для чего они предназначены
Над адресной строкой проживает кнопочная панель, на которой представлены все наиболее популярные инструменты для перемещения по страничкам.
Эта панель, наряду с адресной строкой – наш главный «пульт управления». Все кнопки здесь полезны, все – функциональны. Все в них хорошо, кроме одного: Microsoft явно не сумела впихнуть на одну панель все нужные кнопки. Например, кнопки Шрифты и Печать становятся видны и доступны пользователю только тогда, когда Internet Explorer работает в полноэкранном режиме.
Впрочем, как мы уже говорили, большая часть кнопок нам вообще не понадобится (а из Internet Explorer 7 они и вовсе исчезли). А освоить нам нужно только несколько – тех, с которыми мы будем работать всегда.
В Интернете есть разные странички. Совсем маленькие, загрузка которых займет буквально несколько секунд, и настоящие гиганты, перенасыщенные графикой. Ждать, когда ваш браузер «засосет» все содержание таких страниц, чаще всего не нужно. Вот тогда и пригодится эта кнопка.
Вы думаете, что после просмотра страницы исчезают с вашего компьютера? Как бы не так – они хранятся в особой папке на вашем жестком диске – дисковом кеше. Перед тем как скачать страничку, ленивец-браузер смотрит в свой дисковый кеш: нельзя ли достать ее оттуда? Часто это помогает. Например, нет необходимости каждый раз скачивать графическое оформление странички, но вот что касается содержания. В общем, если вы подозреваете, что ваш браузер водит вас за нос и подсовывает старое, взятое из кеша содержание, – намекните ему, что пора бы и честь знать, нажав на кнопку Обновить. Правда, иногда не помогает и это – ленивый браузер может взять страничку из кеша прокси-сервера, например. В этом случае помогает добавление к адресу URL псевдопараметра «?1». Впрочем, нужда в таких изощренных фокусах возникает крайне редко.
На этот раз в открывшемся слева окне появится папка с вашей коллекцией ссылок на интересные страницы. Пока что она пуста – ведь вы еще не начали свою коллекционерскую деятельность в Сети. Но – всему свое время.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Кнопки
Кнопки и индикаторы QIP
Кнопки и индикаторы QIP Ну а теперь займемся изучением главного окна программы. Большую его часть занимает контакт-лист, в котором чуть позже появятся имена ваших друзей и знакомых… Но об этом мы поговорим чуть позже.Нижнюю часть этого «небоскреба» оккупировали уже
Меню Кнопки «Office»
Меню Кнопки «Office» Мы уже упоминали в этой главе меню Кнопки «Office» (см. рис. 3.2), и я говорила, что мы оставим его на закуску. Пришло время к нему вернуться.Итак, какие у нас там есть команды.• Создать (Ctrl+N) – открывает новый файл программы PowerPoint.• Открыть (Ctrl+O) – открывает
Кнопки запуска программ
Кнопки запуска программ Какое приятное волнение испытываешь, щелкая на маленькой оригинальной кнопке на экране и получая при этом немедленный ответ своего компьютера! Несомненно, существуют и более приятные волнения, но и нажатие кнопки имеет свою прелесть. А если
12.2.3. Кнопки
12.2.3. Кнопки Для создания кнопки в Ruby/GTK2 предназначен класс Gtk::Button. В простейшем случае мы задаем обработчик события clicked, которое возникает, когда пользователь щелкает по кнопке.Программа в листинге 12.5 позволяет ввести одну строку в текстовое поле и после нажатия кнопки All
Навигационные возможности для связанных таблиц
Навигационные возможности для связанных таблиц Чтобы продемонстрировать возможности DataRelation при программной реализации доступа к данным связанных таблиц, добавьте в форму новый тип Button и соответствующий ему TextBox. В результате конечный пользователь должен получить
1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem
1.15. Добавление кнопок на навигационные панели с помощью UIBsrButtonItem Постановка задачи Необходимо добавить кнопки на навигационную
Кнопки навигации
Кнопки навигации У карманных компьютеров есть кнопки навигации, позволяющие управлять объектами на экране. Это кнопки со стрелками и кнопка ввода.Чтобы узнать, на какую кнопку нажал пользователь, нужно переопределить событие OnKeyDown. Для создания тестового приложения
Кнопки
Кнопки done: запомнить новые установки.reload file: перезагрузить текущий файл с новыми установками.cancel: отменить новые установки.default: назначить установки по
Кнопки и опции
Кнопки и опции browse: выбрать картинку.alignment: выбор расположения картинки по отношению к окружающему тексту.border: толщина (в пикселах) темной рамки вокруг картинки.hspace/vspace: горизонтальный/вертикальный сдвиг картинки (в пикселях).width/height:– левое серое окно показывает
Использование кнопки Автосумма
Использование кнопки Автосумма Для быстрого суммирования диапазона ячеек служит кнопка Автосумма, которая автоматически создает нужную формулу. Последовательность действий для суммирования нескольких чисел будет следующей.1. Сделайте активной ячейку, в которую
Полезные кнопки
Полезные кнопки Если вы оплачиваете Интернет по карте, есть несколько способов сэкономить.Например, отключившись от Интернета, вы можете вновь посетить пройденные страницы. Дело в том, что страницы, которые вы просматривали, браузер скачал на компьютер и составные части
Давайте немного отвлечемся от угроз компьютеру и познакомимся с одной из интересных функций клавиши «F11»: (эф одиннадцать).
Это, наверно, самая используемая мной клавиша из функционального ряда клавиш «F1″…«F12».
Рассказывать о каждой из этих клавиш, да еще, если использовать академический стиль изложения, бессмысленно. Это скучно и не интересно. В разных программах эти клавиши ведут себя по-разному.
Раньше, когда на компьютере еще не было графики и оконных интерфейсов, основным интерфейсом пользователя был не рабочий стол с кнопкой «Пуск», а, так называемые, «файловые менеджеры«.
«Файловые менеджеры» — это очень удобные программы для работы с файлами на Вашем компьютере. Они и сейчас широко используются, правда, в основном, специалистами. О семействе этих программ, об их достоинствах и недостатках, я расскажу Вам в отдельном уроке.
Вот в них, да. Функциональные клавиши являются чуть ли не основным инструментом для работы.
Но вернемся к привычным для нас картинкам на нашем мониторе.
Когда я написал, что функциональные клавиши в разных программах ведут себя по-разному, я немного покривил душой.
Есть некие соглашения среди разработчиков операционных систем и программ, которые определяют, какие функции или какое действие должна выполнять та или иная функциональная клавиша в различных программах или ситуациях. Но, насколько я знаю, это всего-навсего соглашения и рекомендации, но никак не правила.
Правда есть одна клавиша, которая практически всегда несет один определенный функционал. Это клавиша «F1»: .
Нажатие этой клавиши или комбинаций с этой клавишей приводит к вызову справки или помощи в любой программе.
Например, независимо от того, какие программы у Вас запущены, комбинация «Win+F1»: + (технику нажатий клавиш я описывал в уроке «Как без ошибок ввести свой пароль? (Часть 2. Клавиатура)») вызовет справку по операционной системе Windows. Если запущена программа «Paint», то нажатие клавиши «F1» вызовет справку по этой программе. Если запущена игрушка, то клавиша «F1» выведет справку, как играть в данную игрушку.
Если у Вас запущен браузер (как сейчас, когда Вы просматриваете этот урок), то нажатие клавиши «F1» вызовет справку по интернет обозревателю, который Вы в данный момент используете. И т.д. и т.п.
Кстати, интересный факт в подтверждение вышесказанному. Если Вы используете в качестве интернет обозревателя Mozilla Firefox, то клавиша «F1» у Вас не сработает. И вообще никакой горячей клавиши для вызова справки у Mozilla Firefox нет. Видимо, разработчики не посчитали нужным это сделать.
Насколько я знаю, клавишей «F1» пользуются очень редко, а напрасно. В справке иногда можно почерпнуть много интересного. Но, человеческая натура устроена так, что мы больше привыкли использовать «Метод тыка» или, как выразился один из блоггеров, «метод последовательных итераций» 🙂 .
Но так что там с клавишей «F11»: ?
Бесспорно, что сейчас самыми используемыми программами являются интернет обозреватели (Google Crome, Opera, Mozilla Firefox и т.п.).
Разработчики этих программ выворачиваются наизнанку, чтобы пользователи выбрали именно их браузер, а никакой другой.
Для этого в окно браузера навешивается различный функционал в виде панелей инструментов. Еще их называют тулбары (от английского toolbar).
Показательным браузером в этом отношении является браузер Mozilla Firefox. Вот на этом примере давайте и рассмотрим нашу клавишу.
Многим пользователям нравится использовать в полном объеме тот функционал, который предоставляет Firefox.
Но у такого богатого функционала есть один недостаток. Он заслоняет собой то, ради чего мы вышли в интернет. Окно браузера вместе с панелями инструментов заслоняет, чуть ли не половину экрана монитора.
Этот недостаток решается одним простым нажатием клавиши «F11»: . Окно браузера перейдет из оконного режима в полноэкранный режим.
Повторное нажатие клавиши «F11» вернет все на свои места, т.е. окно браузера перейдет из полноэкранного режима в оконный режим.
Кода я первый раз случайно нажал клавишу «F11», я растерялся. С экрана монитора пропали привычные панель задач и оконный интерфейс браузера. Моя рука невольно потянулась к кнопке «Reset» на системном блоке.
Не помню уже, нажал я эту кнопку или нет. Важно другое. Обычно, неизвестное пугает. Вот с того момента я стал обращать внимание (не изучать, нет) на контекстные менюшки в различных панелях различных программ, где указываются производимые действия. Для часто производимых действий практически всегда указывается, как эти действия выполнить горячими клавишами. Сначала нужные комбинации клавиш записывал в книжку, ну а со временем просто запомнил.
Так как же быть, если нет привычных меню, вкладок, окна поиска?
На самом деле, для уверенной навигации в окне браузера можно использовать всего несколько комбинаций клавиш, которые работают в любом браузере. Причем неважно, полноэкранный это режим или оконный.
Итак, о горячих клавишах.
Прокручивание экрана относительно страницы (скроллинг):
«Space»(пробел): или «Page Down»: — перемещает экран монитора на одну страницу вниз.
«Shift+Space»: + или «Page Up»: — перемещает экран монитора на одну страницу вверх.
«Home»: — перемещает экран монитора в начало страницы.
«End»: — перемещает экран монитора в конец страницы.
Навигация:
«Alt+Стрелка влево»: + или «Backspace»: — вернуться на предыдущую просматриваемую страницу.
«Alt+Стрелка вправо»: + или «Shift+Backspace»: + — пройти вперед на следующую просматриваемую страницу.
«Alt+Home»: + — открыть домашнюю станицу.
«Ctrl + +»: + (причем неважно какой «плюс», на основной или дополнительной клавиатуре), «Ctrl + -«: + , «Ctrl+колесико мыши» — увеличивает или уменьшает масштаб страницы.
«Ctrl+0»: + — Восстанавливает исходный масштаб страницы.
Работа с вкладками:
«Ctrl+T»: + — открыть новую вкладку, а заоодно и окно поиска.
«Ctrl+Tab»: + — переключится на нужную вкладку. Техника нажатия этой комбинации такая же, как я описывал в уроке «Работа с окнами» в разделе «Перелистывание окон».
Где мы были в интернете:
«Ctrl+H»: + — открыть просмотр истории.
Ну и если все это надоело, то:
«Win+D»: + — свернуть все окна в панель задач.
Конечно, горячих клавиш намного больше. И в разных браузерах есть свои специфические комбинации. Но это можно уже посмотреть в справке по тому браузеру, который Вы используете.
На этом на сегодня все. Всем удачи и творческих успехов.
Подписывайтесь на обновления блога Начинающим пользователям компьютера и первыми узнавайте о новых статьях и уроках.
Наверное, все при взгляде на этот экран мысленно переносят обе руки на клавиатуру. Да, тут можно было навигироваться без мышки и это было быстро и хорошо! Многие до сих пор используют подобные менеджеры (Total commander, Far etc).
С другой стороны, почти на всех современных сайтах, порталах и решениях, построенных для веба, пользователь вынужден постоянно отрывать руки от клавиатуры, целиться мышкой в кнопку/иконку/поле, а затем опять возвращать руки на клавиатуру для ввода текста.
Как же достичь удобства навигации без мышки в вебе?
Большая часть продуктов, которые разрабатывает и внедряет наша компания, выходит на конечного пользователя. Операторы колл-центров, инженеры, менеджеры – все они работают с пользовательским интерфейсом «для внутреннего использования» – B2B интерфейсами. Возможность работы с системой с клавиатуры без использования мыши – важное требование в B2B интерфейсах. Почему?
- В первую очередь – скорость работы. Пользователю не нужно изменять положение рук и переключаться на мышку, напротив, у него есть мгновенный доступ к функциям.
- Пользователю сложнее сделать ошибку (нужно целиться в кнопку, а не в пиксель).
- Поддержка людей с ограниченными возможностями.
- Снижение нагрузки на глаза (многие функции можно выполнять вообще не смотря на монитор).
Такая навигация может выглядеть не «секси» и требовать больше времени на обучение, но бонусы от использования значительно превышают эти минусы.
Итак, задача
- с минимумом усилий позволить использовать весь функционал наших решений без мыши
- иметь возможность быстро адаптировать любые новые страницы для использования без мыши
- иметь возможность тонкой настройки навигации по АРМам для увеличения эффективности работы всех пользователей
- все это с минимальным воздействием на существующий код
Анализируем
- табуляция (tab)
- хоткеи (hotkeys)
- пространственная навигация (spatial)
- каретка (caret)
Табуляция
Табуляция — переход между элементами интерфейса с помощью клавиши tab (shift+tab).
- + поддержка по умолчанию во всех популярных браузерах
- − всего два направления (+shift)
- − ограниченные возможности конфигурации (ring).
Горячие клавиши
Горячие клавиши (в просторечии хоткеи) — сочетание клавиш, которое вызывает определённую функцию. Это позволяет упростить доступ к основным функциям системы. Всё больше сайтов начинают использовать хоткеи на свои страницах для доступа к самым востребованным функциям, среди них: Habrahabr, яндекс, гугл почта и другие. Но что делать, если функций много, и на каждой странице разные? Просто невозможно будет запомнить все хоткеи, а значит, использование не будет эффективным. Так же есть проблема контекста: когда на странице несколько таблиц и несколько кнопок save, например.
- + мгновенный вызов любой функции
- − требует обучения (запоминания сочетаний клавиш)
- − при большом количестве функций сложно запомнить сочетания (особенно если несколько страниц как у нас)
- + не нужно менять существующий код
- − только браузер Firefox
- − несколько кнопок save
- − никакой семантики, такие хоткеи сложно запомнить
- − на разных страницах одни и те же действия могут иметь разные хоткеи
Пространственная навигация
Когда элементы на веб страницах стали позиционировать с помощью css, навигация табом перестала справляться со своей задачей: курсор перескакивал по элементам дизайна в порядке их объявления в html документе, а не в том, в каком их видит пользователь. Тогда некоторые браузеры (Firefox, Opera) реализовали пространственную навигацию. Они позволяли пользователям использовать сочетания shift+стрелки для перемещения между элементами дизайна, причём следующий элемент определялся исходя из его фактического расположения на экране.
- + позволяет навигироваться по незнакомому интерфейсу
- + поддержка OOB в некоторых браузерах
- − поддержка не во всех браузерах
- − там, где поддержка есть, она включается опционально
- − нет стандарта сочетаний клавиш для переходов
Перемещение каретки
Особенность этого подхода в том, что курсор пользователя перемещается не только по элементам форм и ссылкам, а по всему содержимому страницы (как в ворде). Перемещаться можно, как и в пространственном подходе, в четырёх направлениях.
- + позволяет выделять, копировать фрагменты текста
- − сфокусирован на контенте, а не элементах управления
- − медленнее, чем пространственная навигация
Вышеприведенные решения as is нам не подходят из-за отсутствия поддержки во всех браузерах, в них отсутствует возможность тонкой настройки для конкретных страниц, а также хотелось бы, чтобы и хоткеи и пространственная навигация настраивались единообразно в одном месте.
Представляем Mouseless
Ключевыми особенностями Mouseless являются:
- простая конфигурация для всех страниц приложения, используя CSS селекторы
- работа во всех браузерах
- возможность тонкой настройки
- не конфликтует с существующими решениями
- хоткеи и пространственная навигация в одном флаконе
Принцип работы Mouseless
На рисунке показано разделение на блоки и подблоки.
Конфигурация каждого блока представляет из себя json объект, json объекты для всех блоков образуют конфигурацию страницы.
Пространственная навигация в данном случае является частным случаем хоткеев. Сводим к минимуму кол-во обязательных параметров конфигурации, базовая поддержка должна быть доступна с минимумом действий. Простейшая конфигурация:
На реальных кейсах расширяем базовую библиотеку:
- кольца. Чтобы навигироваться по списку вновь и вновь по кругу, нужно в блок добавить параметр ring: true
- элементы блока, получающие фокус по умолчанию: возможность указать элемент, который первым получает фокус при попадании в блок defaultChildIndex:2
- поддержка пользовательских функций: можно установить свою собственную функцию, которая будет вызвана по нажатию клавиш. new MouselessAction()
- работа с диалоговыми окнами (попапами): модальные окна работают в отдельном контексте, их конфигурация осуществляется независимо от основной
- сохранение/восстановление фокуса применяется в основном совместно с модальными окнами для приведения фокуса в состояние до открытия окна
- наследование ncKeyAction'ов, поддержка глобальных хоткеев: например, на странице есть несколько таблиц, у каждой кнопка save. Хотим, чтобы в любой ячейке таблицы можно было выполнить сохранение по хоткею (частный случай — глобальные хоткеи). Т.е. ncKeyAction, назначенные в родительском блоке, будут работать во всех дочерних:
Конфигурация блока на примере NavigationTree (раскрывающее дерево):
Теперь можно ходить по дереву стрелками вверх-вниз, открывать-закрывать ветки влево-вправо. Функции openNavTreeNode/closeNavTreeNode были написаны до внедрения Mouseless (были опубликованы как api к дереву).
Таким образом, даже в этом случае не пришлось писать новый код, обходимся простой конфигурацией.
CSS легко заменяется под любую тему, достаточно описать правила для подсветки активируемых элементов и активного. Можно добавить свои, более сложные, для конкретных блоков или элементов.
Итого
Внедрив Mouseless в наши решения мы получили библиотеку, которая позволяет обеспечить быструю базовую поддержку навигации с клавиатуры, с одной стороны, и глубокую настройку для достижения максимальной эффективности и удобства использования, с другой.
Работа в этом направлении не закончена, будем продолжать, ждём реакцию сообщества.
Автор: Антон Реймер
Статья основана на вебинаре, который я проводил некоторое время назад. Рассчитана она, в первую очередь на тех, кто не знает, как работают браузеры, или тех, у кого есть пробелы в знаниях. Вероятно, здесь будет много очевидного для тех кто не первый день в веб-разработке. Статью я решил разделить на две части. В первой рассмотрим общие принципы работы браузера. Во второй части я акцентирую внимание на некоторых важных моментах: reflow и repaint, event loop.
Что такое браузер?
Браузер — программа, работающая в операционной системе. Большинство браузеров написано на языке C++. Основное предназначение браузера — воспроизводить контент с веб-ресурсов. В качестве веб-ресурса в большинстве случаев выступает html-страница. Это также может быть pdf-файл, png, jpeg, xml-файлы и другие типы. Среди огромного количества браузеров можно выделить самые популярные: Chrome, Safari, Firefox, Opera и Internet Explorer. Мы рассмотрим браузеры с открытым исходным кодом: Chrome, Firefox, Safari.
Из чего состоит и как работает браузер?
На схеме изображены модули браузера, каждый выполняет собственную функцию. Начнем с пользовательского интерфейса.
Пользовательский интерфейс — то, что видит перед собой пользователь, т. е. адресная строка, элементы навигации, собственное меню и т. д. Несмотря на то что пользовательские интерфейсы очень похожи друг на друга, никакого стандарта, который их описывал бы, не существует. Так исторически сложилось, что браузеры постепенно перенимали интерфейс друг у друга и становились все более похожими.
Механизм браузера отвечает за взаимодействие пользовательского интерфейса и модуля отображения, а также за сохранение данных в памяти.
Модуль отображения. Этот модуль — самый важный для разработчиков. Работа разработчика, в первую очередь, происходит именно с ним, а как можно понять по названию — отвечает он за отображение информации на экране.
Когда мы говорим о браузерных движках, таких как Webkit или Gecko (первый находится «под капотом» у Safari и до 2013 года был у Chrome, второй у Firefox), в первую очередь имеем в виду модуль отображения. Далее мы подробно рассмотрим модуль отображения и более детально разберем, как он работает.
Следующий модуль — сетевые компоненты. Он отвечает за запросы по сети, берет данные с внешних ресурсов и взаимодействует с модулем отображения.
Модуль JS Interpreter отвечает за интерпретацию скрипта, и его выполнение. Существует несколько JS-движков. Самые известные это V8 и JavaScriptCore. Важно не путать движок браузера и JS-движок, который работает в модуле JS Interpreter.
Следующий модуль — исполнительная часть пользовательского интерфейса (UI backend). Она отвечает за отрисовку всего на экране и работу пользовательского интерфейса.
Последний модуль — хранилище данных. Браузеру нужно где-то хранить данные, обычно для этого используется оперативная память. Какие данные нужно хранить? Например, кэш, собственные настройки. Также к хранилищу данных можно отнести indexedDB, который появился в стандарте html5 — собственные базы данных браузера.
Модуль отображения
Модуль отображения получает данные от сетевого модуля. Данные поступают пакетами по 8 Кб. Что важно — модуль отображения не ждет, пока придут все данные, он начинает обрабатывать и выводить их на экран по мере поступления. В случае с html-страницами, он начинает их анализировать, происходит парсинг html (это отдельная большая тема, я на ней останавливаться не буду). Главное, что нужно понимать: в результате парсинга у нас появляется DOM-дерево. Также по окончании парсинга срабатывает событие load, которое можно обрабатывать в скрипте. Это значит, что документ готов и скрипт может с ним работать.
DOM-дерево — document object model. По большому счету, «интерфейс», который предоставляет браузер JS-движку для работы с тем или иным html-документом. На основе DOM-дерева происходит конструирование дерева отображения (render tree). Дерево отображения — тоже важная часть модуля отображения. По большому счету, два этих дерева — DOM-дерево и дерево отображения — наиболее важные элементы для разработчика. Дерево отображения во многом повторяет структуру DOM-дерева (далее будет пример, где это будет представлено нагляднее), но имеет некоторые отличия:
- Дерево отображения не содержит скрытых элементов. Если у нас есть html-элемент, у которого прописан display:none , в дереве отображения он присутствовать не будет. При этом, если visibility:hidden , то в дереве отображения он будет. Некоторые DOM-узлы, которые в DOM-дереве представлены как единый узел, в дереве отображения могут быть представлены в виде нескольких. Яркий пример — составной тэг select. Если в DOM-дереве это один узел, в дереве отображение он преобразовывается в минимум три узла. Первый узел отвечает за отображение выбранного элемента. Второй — за выпадающий список с возможными пунктами. И, наконец, третий блок отвечает за стрелочку.
- Текст в DOM-дереве представлен как простая node. DOM-дереву нет никакого дела до того, что там написано, сколько строк этот текст занимает. В то время, как для дерева отображения — это важно, и текст трансформируется в несколько узлов, в зависимости от того сколько строк он занимает. Это нагляднее рассмотрим чуть позже.
Дерево отображения служит для того, чтобы браузер понимал, что выводить на экран. Оно содержит информацию о том, из каких блоков состоит страница. Дальше в тексте для простоты я буду называть составные части дерева отображения прямоугольниками, чтобы не путать с html блоками.
Дерево отображения — совокупность прямоугольников, которая должна быть выведена на экране. После того как дерево отображения сконструировано, следует этап компоновки. На этом этапе всем прямоугольникам присваиваются размеры и координаты. Каждый прямоугольник получает свои ширину и высоту, координаты в окне браузера. После компоновки происходит отрисовка дерева отображения. Пользователь видит уже конечный результат. Модуль отображения в каждом браузере устроен по-своему, но схема работы схожая.
Предлагаю рассмотреть два браузерных движка: Webkit и Gecko.
Webkit. Модуль отображения получает html и стили. В результате парсинга html возникает DOM-дерево. В результате парсинга CSS возникает дерево правил таблиц стилей (Style Rules). Далее идет важный этап, который называется Attachment, можно перевести, как «совмещение». На этом этапе CSS-стили накладываются на DOM-дерево, в результате чего появляется Render Tree. После чего происходит компоновка дерева. Называется она здесь Layout. И в завершении происходит отрисовка (Painting).
Если посмотреть на Gecko, можно заметить, что схемы очень похожи. Главные отличия — в терминологии. Здесь тоже парсятся HTML, CSS. В результате чего создается DOM-дерево, которое здесь называется Content Model. Парсятся стили, образуется дерево стилей. Этап Attachment здесь называется Frame Constructor, но, по сути, это тоже самое. В результате совмещения образуется дерево отображения, здесь оно называется Frame Tree. Компоновка здесь называется Reflow. А отрисовка называется Painting, так же, как и в Webkit.
- Attachment = Frame constructor = Совмещение
- Render Tree = Frame Tree = Дерево отображения
- Layout= Reflow = Компоновка
Пример
Здесь у нас есть теги:
Модуль отображения строит DOM-дерево. В данном случае оно будет выглядеть следующим образом. Есть корневой элемент (он всегда присутствует), называется он documentElement и соответствует тегу html . В этом дереве присутствуют все теги. И заметим, что текст представлен, как [text node] . И DOM-дереву больше ничего о тексте знать не нужно. На основе этого DOM-дерева строится Render Tree.
Пример
Дерево отображения. У него также есть корневой элемент (RenderView), но уже можно увидеть отличия между DOM-деревом и деревом отображения. Во-первых, нет тега head , т. к. он не отображается на экране. Нет , есть только
Текст в дереве отображения разделился на две строки и представляет собой два элемента: line 1 и line2. Как я писал выше, узлы дерева отображения мы будем называть прямоугольниками. Для наглядности я так и отобразил их на иллюстрации.
Пример
Каждый прямоугольник имеет своего «родителя», кроме корневого элемента root.
Модуль отображения также занимается обработкой скриптов.
Порядок обработки скриптов и таблиц стилей
Важно понимать порядок, в котором происходит обработка скриптов. Рассмотрим следующий пример, где я попытался продемонстрировать все возможные способы подключения скриптов и стилей.
Скрипт 1. Первое, что нужно знать про скрипты, — когда при парсинге html анализатор встречает скрипт, он останавливает дальнейший парсинг документа. Т. е., как только анализатор дошел до скрипта 1, браузеру ничего неизвестно о том, что будет дальше. И пока скрипт 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 может работать с теми или иными стилям, и может потребоваться доступ к ним. Т.е. если мы хотим поменять (или узнать) какие-то стили, но при выполнении скрипта 1 они ещё не подгружены — может случиться ошибка.
Браузеры стараются этот нюанс учесть. Firefox, например, если находит какие-то не подгруженные стили в процессе ориентировочного синтаксического анализа, блокирует выполнение скрипта, подгружает стили, после чего завершает выполнение скрипта. Chrome действует аналогичным образом, но чуть более оптимизировано. Он останавливает скрипт, только если понимает, что в этом скрипте происходит работа с не подгруженными стилями.
Компоновка окон
Окно = Прямоугольник = Узел дерева отображения
- Тип окна (свойство display).
- Схема позиционирования (свойства position и float).
- Размеры окна.
- Внешняя информация (размеры изображения, размер экрана).
Компоновка окон — это этап компоновки дерева отображения. Я думаю многим верстальщикам знакома эта схема, она называется “Box model”. Я не буду подробно на ней останавливаться.
При компоновке окон учитываются следующее факторы:
CSS-свойство display. Два основных типа — inline и block. Другие, такие как inline-block table и прочие, появились уже позже. Отличие в том, что display:block, указывает, что ширина прямоугольника будет вычисляться в зависимости от ширины «родителя». А display:inline указывает, что ширина прямоугольника будет вычисляться в зависимости от его содержимого. Если в элементе два слова, ширина прямоугольника будет равна ширине, необходимой для вывода этих слов. Inline-элементы выстраиваются друг за другом. А блочные элементы — друг под другом.
Следующее, что влияет на компоновку элемента, — свойства position и float. Position по умолчанию static, при этом прямоугольник идет в стандартном потоке компоновки. Также есть position:relative и position:absolute. Position:relative указывает, что прямоугольнику выделяется место в стандартном потоке компоновки. При этом позиция элемента может быть сдвинута относительно этого места: влево, вправо, вверх, вниз с помощью соответствующего свойства.
Абсолютное позиционирование, к которому относится position:absolute и position:fixed, указывает, что элемент выходит за пределы своего прямоугольника из общего потока компоновки. Остальные прямоугольники его не учитывают. Он также не учитывает соседние элементы. Координаты его вычисляются относительно корневого элемента страницы, либо относительно предка, у которого position не static. Размеры же вычисляются тоже относительно родителя. Также на позиционирование влияет свойство float. Оно указывает, что наш прямоугольник идет в стандартном потоке, но при этом занимает либо крайнюю левую, либо крайнюю правую позиции. При этом все остальные прямоугольники «обтекают» этот элемент.
В заключение этой части стоит сказать что, основной поток браузера представляет собой бесконечный цикл, поддерживающий рабочие процессы. Он ожидает отправки событий, таких как reflow и repaint. Эти события ему приходят от модуля отображения. Получив их, он выполняет соответствующие действия.
В Firefox модуль отображения работает в одном потоке. Он един на весь браузер. В Chrome все немного иначе: модуль отображения и поток выполнения у каждой вкладки свои.
Важно, что сетевой модуль работает в отдельных параллельных потоках, которые не связаны с модулем отображения. Следовательно, сетевой компонент может использовать ресурсы независимо от того, что происходит в модуле отображения. Обычно у такого компонента есть возможность работать одновременно с несколькими подключениями и подгружать сразу несколько файлов. В Firefox, например, может быть шесть параллельных потоков, с помощью которых можно подгружать контент, скрипты и т. д.
В следующей части мы детально рассмотрим события reflow и repaint и попытаемся понять как грамотная работа с ними может повысить скорость работы приложения.
Работа компьютерной мышью кажется удобной до тех пор, пока человек не узнает о горячих клавишах. Благодаря им можно работать гораздо продуктивнее и быстрее. Например, чтобы скопировать и вставить текст, необходимо сделать порядка 5 кликов мышью, а с помощью клавиатуры это делается за долю секунды.
Повышаем продуктивность: полезные горячие клавиши Яндекс.Браузера Mozilla Firefox, Google Chrome
Полезные горячие клавиши Firefox
Firefox является одним из наиболее популярных браузеров. Чтобы сэкономить время, работая в нем, желательно запомнить несколько горячих клавиш, предназначенных для работы с навигацией, текстом, вкладками, закладками и окнами.
Базовые горячие клавиши
- Свернуть или развернуть меню вверху – Ctrl + F10.
- Запустить управление расширениями – Ctrl + Shift + A.
- Перейти к списку загрузок – Ctrl + J.
- Как обновить страницу с помощью клавиатуры – F5.
- Прервать загрузку текущей веб-страницы – Esc.
Навигация
- Опуститься вниз страницы – End (находится чуть ниже кнопки Home).
- Чтобы перемещаться вперед-назад, используйте комбинацию клавиш Alt + → и Alt + ← соответственно. Это удобно, когда нужно листать картинки.
- Чтобы опуститься на один экран вниз, зажмите Pg Dn, а чтобы подняться вверх – Pg Up.
- Чтобы перейти к клавишной навигации, нажмите F
- поиск по сайту - клавиши Ctrl + F (данная клавиатурная комбинация действует на активной веб-странице).
Работа на веб-странице
- Выделить все – Ctrl + A.
- Скопировать выбранный элемент – Ctrl + C.
- Вставить скопированный элемент – Ctrl + V.
- Вставить скопированный элемент с применением конечного стиля – Ctrl + Shift + V.
- Отменить последнее действие – Ctrl + Z.
- Распечатать текущую страницу – Ctrl + P.
- Развернуть окно во весь экран или свернуть обратно – F11.
Приблизить или уменьшить элементы, представленные на веб-странице можно с помощью сочетания клавиши Ctrl вместе с клавишей + или -, либо Ctrl и прокрутка колеса компьютерной мышки.
Для установления стопроцентного масштаба воспользуйтесь комбинацией клавиш Ctrl + 0.
Вкладки
Для создания новой вкладки воспользуйтесь комбинацией клавиш Ctrl + T.
Не знаете как переключаться между вкладками с помощью клавиатуры? Используйте сочетания клавиш Ctrl + Pg Dn (вправо) и Ctrl + Pg Up (влево).
Чтобы переключиться на вкладку по порядковому номеру, используйте комбинацию клавиш Ctrl + 1-8.
Если вам нужно открыть последнюю закрытую вкладку, используйте комбинацию клавиш Ctrl + Shift + T.
Закладки
- Добавить в закладки открытую веб-страницу – Ctrl + D.
- Запустить управление закладками – Ctrl + Shift + B.
- Запустить панель закладок – Ctrl + B.
- Открыть новое окно – Ctrl + N.
- Открыть новое окно в режиме инкогнито – Ctrl + Shift + P.
- Закрыть текущее окно – Alt + F4.
- Вернуть последнее закрытое окно – Ctrl + Shift + N.
Средства разработки
- Открыть исходный код страницы – Ctrl + U.
- Открыть или закрыть инструменты разработчика – Shift + F2.
Полезные горячие клавиши Google Chrome
Так же, как и в рассмотренном выше браузере, в Google Chrome предусмотрено большое количество горячих клавиш, которые позволяют работать гораздо продуктивнее и быстрее.
Базовые горячие клавиши
- Перейти к настройкам – Alt + F.
- Перейти к списку загрузок – Ctrl + J.
- Обновить текущую веб-страницу – F5.
- Прервать загрузку текущей веб-страницы – Esc.
Навигация
- Открыть домашнюю страницу – Alt + Home.
- Опуститься вниз страницы – End, подняться обратно – Home.
- Опуститься на один экран вниз – Pg Dn, подняться вверх – Pg Up.
- Для поиска на активной веб-странице используйте сочетание клавиш Ctrl + F.
Работа на веб-странице
- Выделить всю информацию на странице – Ctrl + A.
- Скопировать элемент – Ctrl + C.
- Вставить скопированный элемент – Ctrl + V.
- Вернуть – Ctrl + Y.
- Отменить последнее действие – Ctrl + Z.
Вкладки
- Открыть новую вкладку – Ctrl + T.
- Переключение между вкладками – Ctrl + Pg Dn и Ctrl +Pg Up.
- Переключиться на вкладку по порядковому номеру – Ctrl + 1-8.
- Выбрать последнюю вкладку – Ctrl + Alt + 9.
- Открыть последнюю закрытую вкладку – Ctrl + Shift + T.
Закладки
- Добавить в закладки открытую веб-страницу – Ctrl + D.
- Добавить в закладки все открытые ссылки – Ctrl + Shift + D.
- Запустить управление закладками – Ctrl + Shift + O.
- Запустить панель закладок – Ctrl + Shift + B.
- Новое окно – Ctrl + N.
- Новое окно в режиме инкогнито – Ctrl + Shift + N.
- Закрыть текущее окно – Ctrl + Shift + W.
Средства разработки
- Открыть исходный код страницы – Ctrl + U.
- Открыть или закрыть инструменты разработчика – F12.
- Открыть консоль JavaScript – Ctrl + Shift + J.
Полезные горячие клавиши Яндекс.Браузера
Еще один популярный браузер со своими горячими клавишами. Большая часть похожа на горячие клавиши Chrome, поэтому можно запомнить их один раз и использовать сразу в двух браузерах.
Базовые горячие клавиши
- Перейти к настройкам - Alt + F.
- Перейти к списку загрузок – Ctrl + J.
- Обновить текущую веб-страницу – F5.
Вкладки
- Открыть новую вкладку – Ctrl + T.
- Переключение между вкладками – Ctrl + Tab (вправо), Ctrl + Shift + Tab (влево).
Закладки
- Добавить в закладки открытую страницу – Ctrl + D.
- Запустить управление закладками – Ctrl + Shift + O.
- Запустить панель закладок – Ctrl + Shift + B.
Средства разработки
- Открыть исходный код страницы – Ctrl + U.
- Открыть или закрыть инструментарий разработчика – F12.
- Открыть консоль JavaScript – Ctrl + Shift + J.
Некоторые сочетания «горячих клавиш» подходят для всех наиболее популярных браузеров. Например, при работе с текстом, представленным на веб-странице, горячие клавиши будут одинаковыми, а для операций с закладками – разными. Поэтому для комфортной работы рекомендуется освоить горячие клавиши для наиболее часто используемого браузера.
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, лайки, подписки!
Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!
Читайте также: