Как рисовать в браузере яндекс

Обновлено: 17.07.2024

Некоторые сайты по своим возможностям не уступают полноценным компьютерным программам. Добавьте любимые сервисы на боковую панель, чтобы использовать их как веб-приложения — открывать одним нажатием и работать в отдельном окне, а не искать нужную вкладку. Например, можно проверить письма в Яндекс.Почте или организовать встречу в Телемосте, не открывая основное окно Браузера со множеством вкладок.

Для популярных мессенджеров, социальных сетей и онлайн-игр тоже созданы веб-приложения.

Добавить в качестве веб-приложений можно сайты, использующие технологию Progressive Web Application, и некоторые популярные ресурсы, которые мы поддерживаем собственными силами.

Примечание. Не все сайты в MacOS адаптированы под веб-приложения, но каталог регулярно пополняется.

Установить

В разделе Приложения Яндекса , Мессенджеры , Социальные сети или Производительность нажмите правой кнопкой мыши нужное приложение. Примечание. Если вы хотите скрыть кнопку    Установить приложение в Умной строке, нажмите   → Настройки  → Интерфейс и отключите опцию Показывать кнопку установки приложения . Нажмите на боковой панели   → Добавить сайт как приложение . Начните вводить адрес сайта и выберите его в открывшемся меню.

Не все сайты работают в виде приложений корректно. Если вы столкнулись с этой проблемой или не можете добавить сайт — напишите нам в службу поддержки.

Быстрый доступ

Есть несколько способов быстро открыть веб-приложение:

Нажмите на панели значок приложения или значок .

Примечание. Чтобы скрыть приложение из боковой панели, нажмите на нее правой кнопкой мыши и снимите отметку с приложения.

Приложение можно будет запускать через ярлык на рабочем столе, через меню «Пуск» или из панели задач компьютера. Для этого:

Нажмите правой кнопкой значок веб-приложения на панели задач и выберите Закрепить на панели задач .

Приложение будет запускаться каждый раз при включении компьютера. Для этого:

Нажмите правой кнопкой мыши значок веб-приложения на боковой панели.

Окна веб-приложений

Примечание. В окне веб-приложения доступны некоторые функции браузера. Например, здесь можно открывать ссылки в отдельных вкладках, запускать расширения, использовать режим чтения и другие инструменты. В Windows можно переключаться между окнами с помощью клавиш Alt  +  Tab .

Окно веб-приложений можно использовать в трех режимах. Чтобы выбрать режим:

В этом режиме вы можете закрепить сайт на панели задач Windows и работать как с отдельной программой.

Приложение открывается в отдельном окне. Чтобы оно всегда отображалось поверх других окон и программ, нажмите  → Показывать поверх других окон .

Размер окна можно изменить перетаскиванием границ. Также можно перемещать окно, зажав левой кнопкой мыши верхнюю панель приложения.

Чтобы закрыть окно, в правом верхнем углу нажмите .

Режим удобен, когда вам нужно быстро получить информацию из приложения и сразу закрыть его. Например, для работы с онлайн-словарем.

Приложение открывается в небольшом окне поверх основного окна браузера. Размеры и положение этого окна не меняются.

Чтобы закрыть окно, нажмите левой кнопкой мыши в любом месте за его пределами.

Во всплывающем окне иногда удобнее работать с мобильной версией сайта. Чтобы ее открыть, нажмите  → Открыть мобильную версию .

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

Окно браузера разделяется на две половины по вертикали, приложение открывается в левой половине меньшего размера. Чтобы увеличить размер окна приложения, перетаскивайте границу справа.

Чтобы закрыть окно, в правом верхнем углу нажмите или нажмите значок приложения на боковой панели.

В закрепленном окне иногда удобнее работать с мобильной версией сайта. Чтобы ее открыть, нажмите  → Открыть мобильную версию .

Меню веб-приложений

Чтобы открыть меню, нажмите . В меню доступны опции:

Показывать поверх других окон — окно приложения будет показываться поверх окон всех программ, пока вы не отключите опцию или не закроете приложение. Доступно только в режиме Отдельное окно. На стартовую страницу — перейти на стартовую страницу приложения. Может пригодиться, если на сайте приложения нет кнопки Домой . Скопировать адрес — скопировать адрес открытой страницы сайта приложения. Перезагрузить приложение — обновить страницу сайта приложения. Открыть в браузере — окно приложения будет закрыто, а приложение откроется в новой вкладке браузера. Открыть мобильную версию — открыть мобильную версию приложения. Некоторые сайты в закрепленном или всплывающем окне будут выглядеть лучше в мобильной версии. Удалить приложение — удалить приложение с компьютера.

Горячие клавиши

Ctrl + Shift + Tab

","prev_next":<"prevItem":<"disabled":false,"title":"Расширения и приложения","link":"/support/browser/personalization/extensions-plugins.html">,"nextItem":>,"breadcrumbs":[,],"useful_links":null,"meta":,"voter":","extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Веб-приложения в браузере - Яндекс.Браузер. Справка","productName":"Яндекс.Браузер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Для популярных мессенджеров, социальных сетей и онлайн-игр тоже созданы веб-приложения.

Примечание. Не все сайты в MacOS адаптированы под веб-приложения, но каталог регулярно пополняется.

Установить

Нажмите на боковой панели . В разделе Приложения Яндекса , Мессенджеры , Социальные сети или Производительность нажмите правой кнопкой мыши нужное приложение.

В Умной строке нажмите Установить приложение . Примечание. Если вы хотите скрыть кнопку Установить приложение в Умной строке, нажмите → Настройки → Интерфейс и отключите опцию Показывать кнопку установки приложения .

Нажмите на боковой панели → Добавить сайт как приложение . Начните вводить адрес сайта и выберите его в открывшемся меню.

Быстрый доступ

Есть несколько способов быстро открыть веб-приложение:

Нажмите на панели значок приложения или значок .

Нажмите правой кнопкой значок веб-приложения на панели задач и выберите Закрепить на панели задач .

Приложение будет запускаться каждый раз при включении компьютера. Для этого:

Нажмите правой кнопкой мыши значок веб-приложения на боковой панели.

Окна веб-приложений

Окно веб-приложений можно использовать в трех режимах. Чтобы выбрать режим:

В правом верхнем углу открывшегося окна нажмите .

В этом режиме вы можете закрепить сайт на панели задач Windows и работать как с отдельной программой.

Приложение открывается в отдельном окне. Чтобы оно всегда отображалось поверх других окон и программ, нажмите → Показывать поверх других окон .

Чтобы закрыть окно, в правом верхнем углу нажмите .

Чтобы закрыть окно, нажмите левой кнопкой мыши в любом месте за его пределами.

Чтобы закрыть окно, в правом верхнем углу нажмите или нажмите значок приложения на боковой панели.

Меню веб-приложений

Чтобы открыть меню, нажмите . В меню доступны опции:

Я всё сделал, подключил там Smart Lock(Google), но всё равно не появился.

Всем привет,столкнулся с проблемой Гугл пей на своем pixel xl,выдает ошибку при регистрации карты,не подскажите что делать ,?

Шагомер считает шаги некорректно!! Калибровку делала. Постоянно общаюсь со службой поддержки. результат пока 0.
В чем проблема не понятно. кто-то имеет такую же проблему ? Посоветуйте что делать?

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

1. Чтобы мгновенно выплеснуть накопившиеся художественные таланты и запечатлеть их в новом PNG или JPG файле-картинке.

2. Чтобы быстро набросать смешную или забавную карикатуру без скачивания картинки и запуска Фотошопа.

3. Чтобы в режиме онлайн дополнить изображение на экране монитора какой-либо фразой или надписью, а также многие-многие другие «ЧТОБЫ…».

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

В общем, мало ли кому и зачем потребовалось или захотелось рисовать на экране своего браузера. В любом случае мешать мы не станем, а только поможем реализовать это прямо ЗДЕСЬ и прямо СЕЙЧАС.

Рисование на экране: начальные требования

1. У вас установлен и открыт браузер Мозилла Фаерфокс (Mozilla Firefox).
2. У вас есть клавиатура и мышка.
3. У вас есть непреклонное желание порисовать прямо в окне браузера.

Если все эти пункты соответствуют действительности, то можем приступать к пошаговой инструкции!

Рисуем на экране в браузере Firefox: пошаговая инструкция

1. Проходим по ссылке к Дополнениям Мозиллы и кликаем «+Добавить в Firefox»

2. После того, как пройдет загрузка дополнения (через пару секунд), его придется установить. В открывшемся диалоговом окне жмем «Установить сейчас».

3. После непродолжительной молниеносной установки нам предложат перезапустить браузер, с чем стоит согласиться. Перезапускаем браузер путем нажатия на специальную всплывающую кнопку или делаем это вручную (закрываем Мозиллу и открываем снова), но ФаерФокс должен быть перезапущен. А уже после этого наши изменения вступят в силу.

4. Для того, чтобы запустить «Экранную кисть, экранный карандаш, экранный текстовый редактор … (называйте это как вам угодно)», необходимо открыть панель дополнений, которая находится по адресу:

«ВИД» — «ПАНЕЛИ ИНСТРУМЕНТОВ» — «ПАНЕЛЬ ДОПОЛНЕНИЙ»

Для быстрого запуска можно использовать комбинацию клавиш «Ctrl+»

5. В открывшейся панели дополнений видим наш экранный карандаш — логотип программы Screen Draw — рисование на экране в браузере. Кликаем по нему и разбираемся с функционалом.

6. Как видно, здесь можно:

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

Вот такой вот полезный инструмент теперь появился в вашей коллекции. И, думаем, теперь вас вряд ли удержишь от того, чтобы прямо сейчас порисовать на экране в открытом окне браузера, поверх нашего сайта. Ну, а особенно любознательных читателей, по традиции, ожидает полезное обучающее видео по основам рисунка. Ведь рисование — целое искусство!

Представляем вашему вниманию краткий обзор интересных дополнений для Firefox, Chrome и Opera, которые привлекли наше внимание на прошедшей неделе.

В этом выпуске вы узнаете о полезном расширении для любителей почитать в Firefox и послушать музыку в Google Chrome. А еще у нас есть удобнейшее поисковое дополнение для браузера Opera.

Firefox

Это еще одно расширение, позволяющее представить просматриваемые страницы в удобном для чтения виде. После нажатия на кнопку расширения вам будет представлен только текст статьи, очищенный от рекламы, элементов навигации и оформления. Размер шрифта и ширина текста задается в настройках.

С помощью этого расширения можно будет рисовать и делать текстовые заметки на любой веб-странице. При нажатии на кнопку расширения появляется небольшая дополнительная панель с инструментами рисования. Сделанные наброски и записи можно сохранить в виде скриншота.

Chrome

Это отличное расширение для всех любителей онлайнового радио. С его помощью вы можете слушать свои избранные станции с помощью удобного плеера, появляющегося во всплывающем окне при нажатии кнопки расширения. Добавление станций возможно как из встроенного каталога, так и из таких популярных сервисов, как Shoutcast или Digitally Imported, а также вручную.

В браузере Firefox имеется отличная функция — «живые закладки», которые представляют собой простейший способ следить за RSS обновлениями нужных сайтов. Расширение Foxish Live RSS добавляет эту возможность в браузер Chrome. После его установки на вашей панели избранного появляется специальная папка, в которую вы можете добавлять RSS подписки. Щелчок по этой папке позволяет просмотреть заголовки последних новостей, которые обновляются через заданный вами промежуток времени.

Opera

Это расширение служит для оперативного поиска нужного вам контента с помощью самых популярных поисковых систем. Вы сможете буквально в два клика искать торренты, музыку, видео, электронные книги, картинки, программы и многое другое. Существует также и версия для браузера Chrome.

На сегодня это всё. Продолжим через неделю.

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

Компьютерная грамотность с Надеждой

Заполняем пробелы – расширяем горизонты!

Яндекс краски: рисуем, играя

С октября 2013г. сервис Яндекс.Краски не работает. Вот официальный ответ службы поддержки Яндекса:

Здравствуйте, Надежда!
Вынуждена Вас огорчить, но сервис Яндекс.Краски более не поддерживается нами, он был закрыт.

Поэтому все, что написано ниже, теперь уже история…

Сервис Яндекс Краски бесплатно позволяет самостоятельно нарисовать открытку, картинку с помощью кисточки, а также используя готовые симпатичные картинки. Сервис подойдет и взрослым, и детям в качестве игры-рисовалки.

Рис.1 Яндекс Краски: установить на свой ПК, либо рисуем онлайн

Как видно на рис. 1, после перехода по указанной выше ссылке нам предоставляется 2 возможности:

установить яндекс краски бесплатно на свой компьютер (цифра 1 на рис. 1).
попробовать порисовать (цифра 2 на рис. 1) – яндекс краски онлайн, при этом устанавливать на свой компьютер ничего не нужно

Рассмотрим оба варианта по порядку.

Устанавливаем Яндекс Краски

1-ый вариант подойдет тем, кто планирует часто пользоваться этой программой, либо использует медленный или лимитный интернет. Требования, которые при этом предъявляются к компьютеру:

Операционная система Windows XP/Vista/7,
программа Adobe Flash Player, желательно последней версии,
наличие свободного места 10 Мегабайт на жестком диске.

Если Вы пользуетесь браузером Google Chrome, то это значит, что программа Adobe Flash Player уже встроена и обновление браузера Google Chrome автоматически связано с обновлением Adobe Flash Player.

Желательно сначала удалить старую версию Adobe Flash Player через встроенный в операционную систему Windows сервис «Удаление программ», и только потом устанавливать новую версию с официального сайта. Этим придется заняться в случае, если после установки на свой компьютер программы Яндекс Краски бесплатно не корректно будет работать анимация.

Если все требования к установке программы яндекс краски удовлетворены, тогда кликаем на кнопку «Установить краски» (цифра 1 рис.1). После этого скачивается файл YandexKraskiSetup.exe, как правило, в папку «Загрузки» вашего браузера. Кликнув по скачанному файлу YandexKraskiSetup.exe, получаем предупреждение системы безопасности:

Рис.2 Переходим к установке сервиса Яндекс Краски на свой компьютер

Далее определяемся с тем, куда будем устанавливать яндекс краски бесплатно. Если предложенный вариант для установки программы Вас не устраивает, тогда находим другую папку с помощью кнопки «Обзор» (рис. 3):

Рис.3 Установка Яндекс Красок на компьютер

Щелкнув по кнопке «Установить», переходим к «Завершению установки Яндекс.Красок» (рис. 4):

Рис.4 Завершение установки Яндекс Красок

На рис. 4 обратите внимание на наличие или отсутствие галочек напротив надписей:

Сделайте Яндекс домашней страницей,
Ищите с помощью Яндекса из вашего браузера,
Установите Яндекс.Бар для Internet Explorer и Firefox.

Если галочки проставлены, то помимо Яндекс Красок все, что перечислено в этих пунктах, будет также установлено на Ваш компьютер, причем, с Вашего молчаливого согласия.

Если на рис. 3 Вы не убирали галочку напротив «Установить ярлык программы на рабочий стол», тогда вызвать Яндекс Краски можно, щелкнув по ярлыку на Рабочем столе (рис. 5):

Рис.5 Ярлык для Яндекс Краски

В любом случае (при наличии ярлыка программы на Рабочем столе или при его отсутствии) найти Яндекс Краски всегда можно через кнопку «Пуск» – «Программы».

Рисуем онлайн с помощью Яндекс красок

Рис.6 Рисуем с помошью Яндекс Красок

Коротко рассмотрим инструменты Яндекс Красок:

1 (цифра 1 на рис. 6) – Указатель, который предназначен для выделения объектов, кроме линий, нарисованных как на рис. 6, и фона.

2 – Кисть. Прежде чем рисовать кистью, можно выбрать цвет, интенсивность цвета, толщину кисти.

3 – Фон. Можно выбрать из имеющихся вариантов какой-либо фон, варианты будут представлены там, где находится цифра 10 на рис. 6. После выбора фона можно изменить его цвет.

4 – Клипарт. Кликнув по этому инструменту (цифра 4 на рис. 6), увидим выбор готовых картинок (цифра 10 на рис. 6). Если кликать по маленьким треугольникам наверху окна с готовыми картинками, то увидим, что картинки меняются по темам «С днем рождения», «Фигуры», «Предметы», «Персонажи», «Эмоции», «Люблю, скучаю», «Новый год». Картинку можно схватить мышкой и перетащить на открытку. Дальше эти картинки можно перемещать по открытке, удалять, уменьшать, увеличивать, поворачивать по часовой стрелке, изменять цвет и т.п.

5 – Текст. Щелкаем по инструменту «Текст», затем кликаем в месте вставки текста и печатаем текст. Затем продолжаем рисовать. Если введенный текст не понравился, можно по нему 2 раза кликнуть мышкой, появится окно (рис. 7), в котором кликаем по «Редактировать»:

Рис.7 Текст в Яндекс Красках

Можно выбрать цвет для текста, шрифт (справа в окне «шрифты» – цифра 10 на рис. 6, всего 2 шрифта). Чтобы поворачивать текст в разные стороны, растягивать вверх-вниз, достаточно «ухватиться» мышкой за одну из стрелок, обведенных на рис. красной рамкой, и при этом, не отпуская мышку, поворачивать текст или тянуть его для уменьшения/ увеличения.

6 – Фото (цифра 6 на рис.6). Можно загрузить фото со своего компьютера, а также сделать коллаж из нескольких фото. Свои фото можно передвигать в пределах листа, сделать отражение, поворачивать под разным углом, увеличивать или уменьшать. Делается все так же, как с текстом (рис. 7), с помощью стрелок по углам фото.

7 – Фоторамка (цифра 7 на рис. 6). С помощью этого инструмента можно взять готовый шаблон, вставить в этот шаблон свою картинку и таким образом получить персональный рисунок.

Для этого выбираем шаблон, затем кликаем по надписи «Нажмите для загрузки фото» (рис.8 ). Выбираем со своего компьютера фотографию и подгоняем лицо с фото под рамку имеющегося шаблона, при этом фото можно уменьшать/ увеличивать, поворачивать, передвигать.

Когда фото вставлено, кликаем по пустой области и можно еще что-то дорисовать. Если вставленное фото не устраивает, то всю процедуру вставки фото в шаблон придется пройти заново.

Рис.8 Фоторамки на Яндекс Красках

8 (цифра 8 на рис. 6)– выбор цвета.

9 (цифра 9 на рис. 6) – выбор линии.

10 (цифра 10 на рис. 6) – окно для выбора различных вариантов, соответствующих тому или иному инструменту.

11 (цифра 11 на рис. 6) – кнопка «Сохранить» позволяет сохранить Ваш рисунок на своем компьютере.

Подробнее о том, как пользоваться инструментами сервиса Яндекс Краски, Вы можете узнать из видео:

Firefox

Chrome

Opera

На сегодня это всё. Продолжим через неделю.

До недавнего времени я работал в команде Яндекс.Браузера и по следам этого опыта сделал доклад на конференции YaTalks. Доклад был о том, что у браузера под капотом и как ваши странички превращаются в пиксели на экране. Минимум фронтенда, только внутренности браузера, только хардкор.

— Всем привет, меня зовут Костя. Удивительно — сейчас я работаю в команде виртуальной сети Яндекс.Облака. До этого я пять с лишним лет проработал в команде Браузера, так что сегодня буду говорить о вещах, общих для нас с вами.

Как можно догадаться, я не очень хорошо понимаю во фронтенде. Если вы будете говорить со мной о React или еще о чем-нибудь в этом духе, я, скорее всего, вас не пойму. Но я делал очень много вещей в браузере: декодирование видео, бизнес-логику. В том числе я провел много времени, делая разные вещи в отрисовке браузера. Сегодня у нас будет такой, скажем, ликбез о внутреннем устройстве браузера. Я постараюсь пройтись по наиболее интересным вещам, которые мы делали в Яндекс.Браузере или Google в Chromium.

Если говорить про отрисовку в браузере, то это очень сложная штука, которая состоит из большого количества компонентов. В первую очередь вы должны загрузить ресурсы, чтобы показать их. Потом вы должны их распарсить, построить DOM-дерево, стили, лейауты и т. д. Первые три пункта вам, скорее всего, знакомы. Мой доклад будет больше посвящен другим трем частям: Painting, Rasterization и Compositing — тому, что происходит под капотом, когда верстку вы уже написали. Только по словам может показаться, что это примерно об одном и том же — на самом деле это совершенно разные компоненты.

Начнем с Painting и Compositing. Что это вообще такое? Давайте вернемся на много-много лет назад, когда веб был не таким сложным, как сейчас, когда не было всяких 3D, CSS-анимации и прочих штук. Как тогда рисовал браузер? Представьте, что у вас есть ваша страница, на ней какие-то чудесные элементы, картиночки и т. д. Браузер все это рисовал на одну здоровенную текстуру, в большой блок памяти. Он знал, как нарисовать каждый элемент, и если у нас случались какие-то изменения, тут они выделены желтым, то происходило примерно следующее.

Браузер агрегировал их в области, которые здесь обозначены синим цветом. В этой области произошло какое-то изменение, давайте ее перерисуем. Все, что в этой области находилось, просто перерисовывалось и копировалось на текстуру.

Это вполне себе работало. Потом умные люди придумали 3D CSS-анимацию, другие вещи. У нас могло происходить очень много отрисовок в разных местах. Если мы крутим один спиннер, перерисовывать весь пирог элементов, которые под ним расположены, не очень эффективно.

Тогда другие умные люди решили это все немного переделать. У нас есть какое-то DOM-дерево, мы построили его в памяти. Это плюсовые объекты, они сравниваются с тем, какую верстку вы написали.

А потом начинает происходить магия. Браузер преобразует все DOM-дерево в дерево Render Object. Эта штука знает, как нарисовать каждый конкретный DOM-элемент. То есть она знает, что нужно сделать, чтобы на экране появилось что-то вместо вашего дерева или P-элемента.

Следующее дерево — дерево слоев. Что это? Каждый наш элемент может быть ассоциирован с каким-то одним слоем, причем один Render Layer может содержать сразу несколько объектов. Для чего так сделано? Здесь это очень хорошо показано. Мы генерируем набор слоев, на каждом из них есть определенные элементы. Теперь, предположим, на одном из слоев что-то меняется — происходит анимация, пролетает марки-элемент. Тогда мы перерисовываем только один слой, а остальные, например бэкграунд, остаются неизменными. Мы их потом просто склеиваем в композиты и на выходе получаем итоговую картинку — текущий кадр анимации.

Для создания новых слоев есть фиксированный набор причин. Например, слой создается, чтобы вынести на него 3D CSS-анимацию, canvas, видео-элемент — в общем, нечто связанное с тяжелой анимацией, пригодное для перерисов отдельно от всего остального содержимого.

Но такой подход имеет несколько проблем. Сейчас нужно включить мыслетопливо. Подумайте, что здесь будет изображено? Тут всего два элемента.

Вот. Хотя, казалось бы, элементы расположены один за одним. Почему canvas вылетает наверх? У нас же они последовательно расположены, я не задавал никакой порядок.

Давайте усложним. Тут у нас появляется еще один div, вот такой.

В общем, ожидаемое поведение. У нас div поверх div, но canvas почему-то сверху. Магия! Хорошо, давайте снова усложним этот пример.

Изменилась ровно одна строка, я добавил transform.

И теперь у нас все расположено правильно — по крайней мере, в терминах canvas и div. Но вот этот div все еще располагается внизу, хотя он был следующим элементом в нашей верстке.

Это так называемый фундаментальный баг композитинга. Если вы поищете по трекеру Chromium, то увидите кучу багов, которые слинкованы с одним древнющим. Он так и называется.

Так что произошло? Как я уже говорил, некоторые элементы выносятся на Render Layer, некоторые не выносятся. Какие-то рисуются совместно с другими. Здесь произошло следующее: div-элементы остаются в том же слое, что и бэкграунд. Canvas вылетает на отдельный слой. А z-ordering осуществляется только между слоями. Из-за того, что у нас бэкграунд и div в одном слое, а canvas в другом, получается баг: canvas перекрывает div.

Но как только мы выносим этот div-элемент на отдельный слой и он начинает нормально использовать z-order, он также начинает понимать, кто за кем расположен. И тут уже все отрисовывается «нормально».

И одна из последних инициатив, развивающихся уже несколько лет, — так называемая Slimming Paint, которая должна это починить. Ее смысл в том, что нам нужно отделить Painting от вынесения на слои, то есть понимание, что нужно сделать для отрисовки этих элементов, от того, как их потом композитить друг с другом. Если у нас вот такая простая верстка, она превращается во что-то подобное. Есть простой список команд, которые нужно сделать, чтобы получить контент страницы. И если мы вернемся к этому примеру, она будет выглядеть примерно так.

То есть мы сказали: вот тебе Paint, вот тебе контент — пожалуйста, дай мне что-нибудь. Он дает список для отрисовки, который уходит в Compositor, и Compositor понимает, как нужно разбить весь контент на слои, чтобы они были нормально расположены друг относительно друга.

И если вы не заметили, это скриншот из Chrome. Я сделал его где-то недели две назад, то есть баг все еще живой. Проект еще не закончен, он сейчас в процессе разработки.

То есть Compositor по этому списку и по каким-то тайным знаниям, которые передает plink, может понять, как правильно разбить это все на слои.

Помимо того, что такой подход в принципе починит этот баг, мы также получаем довольно дешевые изменения в отрисовке. Предположим, у нас был список команд отрисовки и происходят изменения — скажем, элемент B уходит, элемент E добавляется. Тогда мы можем просто смержить два списка, не парясь с деревьями и т. д. На выходе мы получим новый список элементов для отрисовки, и, возможно, новый список слоев, которые в дальнейшем будут композититься.

Это был короткий рассказ о том, что происходит, когда браузер осуществляет Paint, и что происходит потом, когда он пытается скомпозитить слои.

Давайте перейдем к другой теме: Rasterization. Как раз в Rasterization в Яндекс.Браузере было сделано много всего, и я этим тоже занимался. В чем смысл растеризации? На выходе предыдущего этапа, когда мы сделали Paint, есть список команд, которые мы должны осуществить, чтобы получилась какая-то картинка. Растеризация — это превращение списка команд в реальные пиксели.

Если вы откроете в инспекторе браузера вкладку More tools → Rendering, то там есть галочка Layer borders. И вы видите вот такую сетку. Что здесь происходит? Когда браузер рисует страницу, он на самом деле теперь не делает ее целиком. Каждый слой браузер берет и разбивает на какое-то количество вот таких квадратиков. Исторически сложилось, что они размером 256 на 256 пикселей. То есть каждый слой разбивается на вот такое количество отдельных текстур. На каждую текстуру потом рисуется контент текущего тайла, и потом они все склеиваются в одну большую текстуру.

Это помогает во многом. Прежде всего, мы можем перерисовывать только те тайлы, которые изменились. Но еще это позволяет нам приоритизировать отрисовку. То есть в первую очередь должны быть нарисованы те тайлы, которые видит пользователь, так называемые viewport. Затем мы должны нарисовать soon border, это то, что вокруг viewport. Дальше — направление скролла: если ее скроллят вниз, мы прорисовываем как можно больше вниз. Если вверх — прорисовываем как можно больше вверх. Если у нас осталась квота памяти, мы нарисуем что-нибудь еще, но не факт, что она останется к этому моменту.

Так мы получаем довольно дешевое обновление контента на странице. Предположим, мы взяли текущий кадр и пользователь что-то проинвалидировал — например, выделил текст. Тогда мы пририсуем только те тайлики, которые изменились.

То есть зеленые тайлы — это которые остаются от предыдущей отрисовки, красные — это которые мы перерисовали. Но у такого подхода есть и другие преимущества.

Мы можем сделать — и в Chrome это сделали — так называемую оптимизацию маленьких перерисовок. Предположим, у вас есть какой-то throbber, курсор или еще что-то в этом духе, выполняющее небольшую перерисовочку в маленьком прямоугольнике. Тогда нам нет необходимости перерисовывать весь квадрат. Это логично. Например, если у нас моргает курсор, то перерисовывается только он. Это существенно экономит CPU.

Следующая оптимизация, которую они сделали. Где тут может быть неэффективность? Тайлы сдвинуты? Хорошая идея, но я клоню к другому. Вот просто белый прямоугольник. Это белый тайл, на котором не нарисовано ни единого пикселя. Но это текстура. Она занимает память 256 на 256 на четыре байта.

Еще одна оптимизация, которую придумали в Chrome: а давайте мы возьмем еще эти тайлы, одноцветные, и закодируем их не кучей пикселей, а, по сути, координаторами, размером и цветом. Интернет сейчас полон страницами с большим количеством одноцветных областей для больших мониторов. И такие страницы, соответственно, оптимизируются, мы получаем большую экономию памяти.

Мы в Яндексе пошли немножко дальше и решили сделать более специфичный эксперимент. Как вы думаете, где тут еще можно сэкономить?

У нас есть тайл. Контент на нем расположен в какой-то крохотной области — полоска, слово «Яндекс». Зачем нам рисовать целиком, если контента очень мало, а все остальное одноцветное?

Что мы сделали? Этим занимался конкретно я. Мы разбили каждый тайл на пять тайлов. Если контент в нем только в серединке, то мы выделяем текстуру для этого контента только под то, что сделано в серединке. Вот красная область. Все остальное мы кодируем так же — размер, координаты и цвет.

То есть конкретно на данной странице все эти области теперь стали не текстурой. Используются не байты в памяти, а просто команды о том, что нам нужно тут нарисовать, залить одним цветом. Это дало нам экономию примерно в 40% по памяти GPU в среднем на пользователя.

На более сложных страницах это выглядит так. Учитывая то, что более сложные страницы используют больше слоев, а каждый слой — отдельный тайлинг, то на любом слое можно немножко поэкономить.

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

Что это такое, почему тайлы здесь такие широкие, и почему их мало? Смысл здесь в следующем. В Chrome подумали: почему бы нам не сделать не только хардварный композитинг, но и хардварную отрисовку. Что они делают? У нас есть список команд о том, что нужно сделать: нарисовать прямоугольник, залить цветом и т. д. Все это уходит на GPU, и GPU рисует такую текстуру. Перерисовка происходит очень быстро, поэтому тайлы тоже можно сделать большими. Вот немножко шакалистое видео, но оно очень хорошо показывает преимущество, которое случилось на телефонах как раз за счет того, что отрисовка стала хардварно ускоренной. Я думаю, разница тут очень-очень заметная.

Общение разработчиков браузера с фронтендерами мне кажется очень полезным. Оно случается не очень часто, но дает много пользы. Поэтому когда к нам приходят наши коллеги из других отделов и спрашивают, как нам сделать верстку побыстрее и получше, то мы стараемся им помочь и рассказать о местах, где что-то не оптимально и можно ускориться.

И я не устану повторять свои советы. (Не буду приводить здесь конспект, на эту тему был отдельный большой доклад. — прим. автора.)

Здесь я собрал набор полезных ссылок, про отрисовку и не только, а также немножко про Яндекс.Браузер. Спасибо.

Читайте также: