Сегодня мы расскажем вам историю об одном интересном баге в Яндекс.Браузере, исправление которого привело к значительному ускорению отрисовки во всем проекте Chromium. И помогут мне в этом Кирилл drBasic Плешивцев и Вадим Lof Петров, специалисты из нашей команды, которым и посчастливилось разбираться с проблемой. Передаю им слово.



Один не совсем обычный баг

Меня зовут Кирилл, я работаю в группе внутренних компонентов Яндекс.Браузера в Новосибирске. В один не совсем прекрасный день коллеги из тестирования Яндекс.Браузера воспроизвели проблему с проигрыванием видео через Flash Player. И поскольку именно наша группа отвечает за эту часть браузера (медиа, кодеки, вот это все), задача досталась мне. Баг, скажем так, не претендовал на оригинальность. Клик по кнопке Play приводил к черному прямоугольнику вместо корректного воспроизведения видео. Этот симптом я встречал и раньше, поэтому рассчитывал на достаточно быструю локализацию проблемы. Но я ошибался.

Зачем 2 GPU?

Ноутбуки с двумя GPU появились уже очень давно. Первый MacBook Pro с такой технологией вышел еще в 2008 году.

Преимущество двух GPU в гибкости. Когда вам не нужна вся мощь видео системы, вы используете встроенное в процессор видео, наслаждаясь долгой работой от батарейки. Однако если вы захотели развлечься, то к вашим услугам мощный дискретный GPU. Да, он ест батарейку и жужжит вентиляторами, но дает хороший FPS в играх. Как же одному приложению переключать GPU?

Предисловие от автора оригинала:

В марте 2011 я написал черновик статьи про то, как команда, отвечающая за Google Chrome, разрабатывает и выпускает свой продукт — после чего я благополучно о нем забыл. Лишь несколько дней назад я случайно наткнулся на него. Пусть местами он уже устарел (Chrome форкнул WebKit в Blink в 2013 году, да и я сам больше не работаю в Google), я склонен считать, что изложенные в нем идеи все еще в силе.

Сегодня я собираюсь рассказать вам о том, как работает Chromium. Нет, речь пойдет не совсем о браузере Chrome, а скорее о Chromium — группе людей, занимающихся созданием браузера.

Над проектом Chromium работают сотни инженеров. Вместе мы коммитим в кодовую базу примерно 800 изменений каждую неделю. Мы также зависим от многих других больших и активно развивающихся проектов вроде V8, Skia и WebKit.

Мы отправляем новый стабильный релиз сотням миллионов пользователей каждые шесть недель, четко по расписанию. И мы поддерживаем несколько других каналов раннего доступа, которые обновляются еще быстрее — самый быстрый канал, canary, «тихо» авто-обновляется почти каждый будний день.

Каким образом все это продолжает работать? Почему «колеса» у этого «автобуса» еще не «отвалились»? Почему еще не все разработчики сошли с ума?

Продолжая тему обзора расширений, рассмотрим следующее.
При входе на сайт Kinogo начал возникать баннер:



Мне стало интересно что это за расширение и решил просмотреть код.

Пролог

Сегодня в веб-интерфейсе одного из используемых мною продукта на месте джавовских апплетов я обнаружил уродливые заглушки с надписью «Плагин не поддерживается». Ну мало ли, может джава устарела, пойду-ка обновлю.

Зашёл на java.com, скачал апдейт, поставил, а там…

Появился новый вид adware, который встраивается в сам браузер.

Очередной компьютер с жалобой на рекламу в браузере — как обычно по словам пользователя ничего не запускалось, но факт налицо — реклама вылазит почти на каждом сайте из всех щелей и подменяются поисковые запросы. Обычно большинство подобных проблем решаются сразу же за пять минут с помощью AntiSMS, затем проверяется журнал работы программы и при необходимости подчищаются хвосты вроде сторонних расширений в браузерах, но не в этом случае. Сходу не помогло ничего из обычных средств, даже антивирусы не видели в системе никаких проблем, а потому стало интересно — откуда же берётся реклама?

Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.

Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

Важное место в работе занимают инструменты анализа и отладки приложения. Популярные JavaScript фреймворки как правило обладают собственным инструментарием, заточенным под конкретную идеологию. Наша ситуация осложняется тем, что под капотом Онлайна гудит фреймворк собственного производства — Slot — также находящийся в стадии активной доработки.

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

Простой трюк позволяет создать страницу, которую нельзя будет закрыть в Google Chrome.

Пруф: zhovner.com/tmp/chrome-trap.html

Зловредный код выглядит крайне просто:

     onbeforeunload=function(){
         location.reload();
            return "ВАШ КОМПЬЮТЕР ЗАБЛОКИРОВАН ...";
      };
      onload=function(){
         location.reload();
      }

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

хттп://stop.podzone.org/stop_ip.php?gorod=Moscow&ip=127.0.0.1&sid=1&br=1

Вчера Google анонсировал 64-битную версию своего браузера Chrome. Для того, чтобы получить эту версию, необходимо выбрать либо Dev Channel либо Canary channel, для пользователей Windows 7 и 8.

В последнее время наблюдается рост интереса к скорочтению на основе технологии RSVP. Однако большинство приложений и расширений на эту тему, при более близком знакомстве, увы, оказываются не очень удобны для ежедневного использования. А ведь в потенциале они могу помочь значительно экономить время и быстрее получать информацию. Мой друг OlegCherr решил доработать технологию, создав реализацию пригодную для постоянного использования, а я ему в этом помогаю. После двух месяцев постоянной практики чтения, тестирования, исследований и улучшений решил написать статью с разбором того, что получилось в результате, потому что результат, смею считать, будет интересен и другим. На текущий момент всё выполнено в виде расширения к браузеру Chrome и названо Reedy. Приложение под Android на подходе.

30 апреля вышла пробная сборка Google Chrome Canary, в которой отключено отображение URL в адресной строке. Она стала исключительно полем для ввода, в котором можно напечатать адрес или ввести запрос для поиска в Google; увидеть URL нельзя можно по клику:



Chrome 36 — версия, в которой обкатывается нововведение — выйдет в начале июля. Стоит отметить, что уверенности в успешном прохождении нововведением испытаний нет — сейчас в Google смотрят на реакцию пользователей, которая и определит, есть ли смысл в отключении адресной строки. Разумеется, есть и возможность настройки отображения через переключатель chrome://flags/#origin-chip-in-omnibox — выбор остаётся за пользователем. За продвинутым пользователем.

А простому пользователю, возможно, действительно не нужен URL — есть же кнопки +1 и Like.

Вступление

Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!

Некоторые пользователи после запуска Developer Tools в браузере Chrome на сайте Facebook получают предупреждение большими буквами: «Будьте осторожны! Эта функция браузера предназначена только для разработчиков».



С помощью такого сообщения Facebook хочет предотвратить выполнение кода в консоли неграмотными пользователями.

Главным критерием успеха СМИ является посещаемость страниц. Поэтому некоторые издания не стесняются использовать очень громкие и привлекающие внимание заголовки, лишь бы заставить пользователя перейти по ссылке. Они используют слова вроде «невероятно», «шок», «сенсация» и прочее.

Американского программиста из рекламного агентства Noise реально достал этот бред — и он написал Downworthy, это расширение для браузера Chrome, которое заменяет громкие слова в заголовках на более адекватные.

Вот некоторые примеры из списка автозамены.

• буквально → фигурально
• взорвёт мозг → наверное, может развлечь на секунду

16 января Amit Agarwal, разработчик расширения Add to Feedly опубликовал заметку в блоге, в которой признал, что его расширение было продано неизвестному за сумму в несколько тысяч долларов («предложение из четырёх цифр»).

Add to Feedly — это расширение, которое добавляло удобную кнопку подписки на RSS канал текущей страницы через сервис Feedly (популярная альтернатива почившему Google Reader). Расширение было сделано Амитом за час и набрало 30 000 пользователей в магазине Chrome. Расширение было продано, деньги получены через PayPal, и Амит передал права на расширение другому аккаунту Google.

Через месяц новые владельцы отправили обновление в магазин Chrome. Никаких новых фич, никаких исправлений багов. Только добавление рекламы на все страницы, которые просматривает пользователь. Все ссылки на каждом сайте превратились в реферальные, по которым выкидывалась реклама. Кроме того, новые хозяева получили возможность отслеживать все переходы пользователей. Проще говоря, автообновление Chrome загрузило вредоносный код напрямую в 30 000 аккаунтов, а синхронизация Chrome Sync распространила это по каждому подключённому компьютеру с установленными Google Chrome, Chromium или Chrome OS.

Проблема

Как обычно поздней ночью, садясь в автобус, я достал телефон, и пока набирал “habr…” он отрубился. Я вслух подумал: “А раньше не мог сказать?”, немного пожалел, что телефоны редко пищат, пока разряжаются. А потом…

Потом мы с приятелем решили подойти к вопросу по-мужски. Он написал программулину для андроида, а я расширил Хром. О последнем и пойдёт речь.

Задача

Итак, идея: андроид-приложение наблюдает за состоянием аккумулятора и периодически уведомляет сервер об уровне заряда. Причём делает это как-нибудь по-умному, чтобы заряд от этого не пострадал. Хром-расширение выставляет свою иконку в специально отведённом месте, иконка показывает заряд батарейки андроида и всячески привлекает внимание, если она совсем почти разряжена. А чтобы всё не казалось слишком простым, реализовать идею надо было за одни выходные. В противном случае баланс ценность/усилия вываливался за рамки бесплатного приложения.

Таким образом, выбор подхода к задаче оказался даже важнее скорости десятипальцевой печати.

Опишу простой способ переноса кеша, настроек и прочих локальных данных Google Chrome на RAM-диск в Linux. Это ускорит скорость работы браузера и исключит насилие над диском (что особенно критично, если у вас SSD).

Статья не содержит ничего интересного для более-менее продвинутых пользователей Unix-like систем. Совсем ничего.

Когда мы пишем статьи про проверки каких-либо проектов с помощью PVS-Studio, то, как правило, у нас прибавляется клиентов. Тут все честно. Программисты не любят рекламу, но охотно отзываются на интересные материалы, которые легко проверить. Поэтому мы не рекламируем свой инструмент, а просто показываем, что он умеет. Однако, хотя мы проверили код Chromium уже три раза и трижды находили в нем ошибки, ордера с почтой в google.com в моей почте до сих пор нет. Поскольку мне интересно, что я делаю не так, и почему Google пока не использует PVS-Studio, я решил написать очередную статью.

Эта статья состоит из двух частей. В первой рассказывается об инфраструктуре проекта Chromium и нюансах интеграции, во второй приведены очередные найденные ошибки.

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

Хотите узнать, почему разрабатывать Chromium сложно и далеко не каждый инструмент для программистов может быть использован в проекте Chromium? Тогда читаем…

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

1. Заходим в chrome://flags.
2. Находим пункт «Enable Instant Extended API» / «Включить расширенный API Живого поиска» и выбираем Disable/Отключено.
3. Нажимаем кнопку Restart/Перезапустить в полоске, появившейся внизу окна.
4. Profit!