Улучшение способности к быстрому реагированию Microsoft Edge
Мировая паутина становится все более интерактивной, выполнение основных функций веб-страниц все чаще реализуется на JavaScript: это и ввод, и рендеринг, и разметка, и структура. Все чаще и чаще выполнение основных функций переносится на сторону клиента, это становится обязательным для браузеров, использующих механизм разумного планирования для надежной и эффективной обработки кода JavaScript.
С использованием EdgeHTML 15 под Windows 10 Creators Update браузер Microsoft Edge стал существенно лучше в обработке JavaScript: отмечены заметные улучшения в удобстве использования, способность к быстрому реагированию и эффективной работе с современными веб-страницами. В этой статье мы расскажем о некоторых закулисных моментах работы EdgeHTML, а также о том, как сильно влияют эти усовершенствования на скорость браузера и его ответную реакцию.
Таймеры: смерть тысячам обрывов
Веб становится неожиданно сложным, когда приходится решать задачу управления. Вместо выполнения одной длинной JavaScript-операции большинство сайтов выполняют серии малых операций и/или операций средних размеров, которые, соответственно, увеличивают время обработки. К ним относятся получатели событий, таймеры, обещания (Promises) и другие асинхронные задачи.
Даже несложные на первый взгляд страницы могут требовать значительной «закулисной» работы. Хорошие примеры — это новостные и объемные сайты с рекламой, динамической аналитикой и прокручивающимися списками. Возьмем, например, простой сайт, иллюстрирующий некоторые реальные проблемы, которые часто можно встретить на недостаточно оптимизированных сайтах.
Пока такая страница загружается, и даже после того, как она «успокоится», скрытая работа все еще выполняется. Такая веб-страница может создавать сетевые запросы относительно ресурсов или вызвать setTimeout, ставящий задачу в очередь до следующего такта цикла событий. Каждый такой возврат способен инициировать планирование следующих пауз и сетевых запросов, запускающих процесс по новой. Работа браузера — координировать эти задачи, удостовериться, что они выполняются корректно наряду с получателями событий, обещаниями и другой работой в соответствии со спецификацией HTML5 цикла ожидания событий.
Причем все усложняется при выполнении задач ввода. Как уже отмечалось в статье Scrolling on the web, Microsoft Edge предлагает наилучшую функцию прокрутки списка (scrolling), потому что огромное количество элементов, реализующих прокрутку можно организовать как фоновый поток. Это означает, что методы ввода не эффективны на тех страницах, на которых запланировано большое количество JavaScript-работы, такой как прокрутка с помощью колесика мыши, сенсорного экрана или площадки, то есть именно тогда, когда прокрутка должна проходить гладко.
В связи с ограничениями аппаратного обеспечения, некоторые методы прокрутки (такие как использование клавиатуры) все-таки выполняются в потоке пользовательского интерфейса. Это также справедливо для множества интерактивных операций на веб-страницах, таких как щелчок ссылки и ввод в поля форм. Поскольку эти события ввода должны быть выполнены в том же потоке, что и цикл событий JavaScript, это может быстро привести к ухудшению работы.
Блокировка ввода: эффект появления сообщения «Эта страница неисправна»
Вам наверняка знакома такая ситуация: вы грузите страницу, контент уже появляется на экране и вы надеетесь начать работу на ней. Однако, когда вы кликаете ссылку, проходит несколько секунд, прежде чем что-либо происходит. Или вы пытаетесь прокрутить список с помощью клавиш-стрелок вверх и вниз, но процесс идет черепашьим шагом или же прокрутка вообще не происходит.
Это частенько случалось в предыдущих релизах Microsoft Edge на тех страницах, на которых были очереди setTimeout или других обратных вызовов. Причина в том, что наша система планировщика задач не определяет приоритет ввода перед JavaScript-задачами, то есть что все запланированные таймеры должны быть выполнены перед тем, как будут получены любые сигналы ввода.
После того как Microsoft Edge стал поддерживать EdgeHTML 15, события ввода «проходят без очереди», то есть впереди JavaScript-работы, используя метод, называемый приоритизацией ввода (input prioritization). С тех пор как новый планировщик занял свое место, события ввода могут быть обработаны почти мгновенно, даже если на странице большая очередь setTimeout-операций.
Влияние этого на работу некоторых страниц может быть поразительно. Мы уже получаем отзывы от участников программы предварительной оценки Windows (Windows Insiders) о том, что улучшения производительности Microsoft Edge вызывают непрерывный поток благодарности за новую способность мгновенной прокрутки и немедленного выполнения перехода по гиперссылке. Уже нет этой «многосекундной агонии» при ожидании выполнения объемных JavaScript-задач по загрузке.
Например, на «новостном сайте», показанном ниже, выполняется большой объем значимой работы в потоке пользовательского интерфейса во время загрузки. Если вы попытаетесь кликнуть первую ссылку во время загрузки, переход по ней может быть заблокирован, так как сигналы ввода от мыши не в приоритете.
Но при наличии EdgeHTML 15 браузер Microsoft Edge считает приоритетными клики по ссылкам по отношению к другим работам. Это значит, что вызванная страница будет загружена практически мгновенно:
Вот еще один пример влияния на прокрутку. На такой странице, как упомянутый «новостной сайт», выполняется несколько setTimeout-ов, выполняемых в фоне, влияющих на прокрутку с клавиатуры:
Но при наличии EdgeHTML 15 на странице возможна быстрая прокрутка с клавиатуры, даже при выполняемых setTimeout-ов. Это уменьшает количество источников блокировки или запаздываний прокрутки даже на очень активных страницах.
Приоритет — пользователям!
Понять то, как EdgeHTML 15 выполняет «закулисную», фоновую работу, достигая ускорения производительности, нам поможет следующий пример. Заметьте, что зачастую фактическая реализация может быть сложной, но немного упрощается при заинтересованности в ясности.
Нам поможет иллюстрация, любезно предоставленная Рэчел Нэйборз: путь выполнения задач на веб-странице аналогичен растянувшейся на квартал очереди посетителей, страстно желающих попасть в модный клуб, и сурового вышибалу, запускающего только по одному за раз.
До выхода версии Creators Update каждый должен был следовать одним и тем же путем: JavaScript-таймеры, обновления разметки и стиля, как и события ввода. Еще хуже то, что JavaScript-таймеры могут вызывать очередь своих собственных таймеров, что может привести к срыву других событий, если начальный таймер занимает много времени на выполнение, а следующий уже запланирован.
В нашей клубной метафоре это выглядит так, будто чрезвычайно наглый посетитель звонит своим приятелям и говорит: «Все в порядке, я занял вам очередь. Я только скажу вышибале, что вы уже на подходе!» А затем — вот уж обида так обида! — вышибала действительно удерживает остальных, ожидая, когда заявятся опаздывающие. Тем временем бедные события ввода все еще ожидают возвращения в строй.
С появлением Creators Update это построение полностью переделано. Вместо обработки одной очереди выполнения всех событий отныне в приоритете очередь событий ввода. Как будто наш клуб добавил VIP-очередь, позволяя «высоким» гостям пройти вперед, ведомые наглым посетителем, позвонившим своим приятелям.
Это намного лучшая система, так как события ввода весьма заслуживают приоритета по сравнению с другими операциями на веб-странице. В конце концов, пользователь — король или королева своего браузера, и какая бы работа не выполнялась на сайте, она менее важна по сравнению с тем, чего хочет пользователь. Даже если веб-страница чрезвычайно занята обработкой JavaScript-таймеров, любые сигналы ввода клавиатуры или мыши должны рассматриваться как события с большим приоритетом.
Приоритет пользовательского интерфейса браузера перед веб-контентом
В дополнение к созданию «полосы обгона» для пользовательского ввода на веб-страницах мы создали и другие улучшения в Creators Update — это другая, особая, очередь для событий ввода, приоритетная по отношению к пользовательскому интерфейсу браузера.
Представьте, что события ввода выполняются совместно с веб-страницей и элементами структуры браузера: адресной строкой, вкладками, кнопкой Избранное и т. д., — это может вызвать плохую работу веб-страницы и даже полное невосприятие браузера. Такое могло случиться перед выходом Creators Update, но сейчас Microsoft Edge «умнее»: события ввода пользовательского интерфейса обрабатываются отдельно от событий ввода веб-страницы.
В этом примере мы используем crashmybrowser.com — замечательный сайт, выполняющий именно то, что вы задумали. В одном из тестов, выполнявшихся на этом сайте, мы использовали «развилочную бомбу» — один таймер порождает еще два, которые в свою очередь порождают еще по два тайм-аута и т. д., что в конечном итоге может вызвать полное зависание. До выхода Creators Update такой вид жестокой JavaScript-атаки мешал пользователю закрыть или открыть новую вкладку, так как события ввода пользовательского интерфейса никак не отличались от другого типа событий ввода.
С появлением Creators Update события ввода пользовательского интерфейса стали обладать особым приоритетом, что дает пользователю возможность закрыть ошибочную вкладку, не ожидая от нее ответа. Заметьте, что эти события ввода обрабатываются даже быстрее, чем события ввода со страницы. Короче, в случае бесконечного цикла (еще одна интересная функция с crashmybrowser.com) ввод на веб-странице никогда не будет обработан, но события ввода в браузере должны иметь возможность сработать, несмотря на то, что происходит на странице.
Вернемся к примеру модного клуба: эта особая обработка событий ввода пользовательского интерфейса браузера соответствует потайному входу в клуб только для членов банды и их окружения. В то время как VIP-посетители могут иметь право первоочередного входа в клуб, члены банды намного важнее! Поэтому у них должна быть возможность ускоренного входа в гримерку.
Пользователи видят реальные улучшения способности к быстрому реагированию
Чтобы увидеть влияние этой работы на способность к быстрому реагированию в зависимости от веб-контента, мы можем обратиться к общим измерениям EdgeHTML 15, выполненным на устройствах участников программы предварительной оценки Windows. Сравним ноябрьскую сборку (в ней еще не было приоритизации событий ввода) и мартовскую (после введения приоритизации). Для обеспечения представительной интерактивности мы широко исследовали способность к быстрому реагированию в «больших» (<300 мс), «бедных» (300—1000 мс) и «ужасных» (>1000 мс) сессиях.
На представленной выше диаграмме видно, что Microsoft Edge увеличил число «больших» сессий от 88,71% до 95,53%, но в то же время уменьшилось число «бедных» сессий от 5,68% до 3%, а количество «ужасных» сократилось от 5,61% до 1,46%.
Это подтверждает, что пользователи Microsoft Edge увидят выгоды этой приоритизации событий ввода первыми. Для большинства сайтов пользователи будут получать большие сессии. Однако, если сайт плох, это будет ужасно. Обобщенные измерения Windows ясно показывают, что улучшения путем приоритизации событий ввода в Creators Update значительно уменьшают число сессий отличных от «больших» даже на тяжелых сайтах.
Заключение
Все эти изменения, связанные с событиями ввода, служат одной-единственной цели — обеспечить пользователям управляемость их браузеров. Даже не принимая во внимание, что веб-страницы постоянно совершенствуются, у пользователей должна быть возможность взаимодействовать со своим браузером, управлять его вкладками, прокручивать контент и переходить на другие страницы так же быстро, как быстро двигаются их пальцы. С этими улучшениями в Creators Update пользователи Microsoft Edge смогут насладиться быстрым, плавным и более способным к оперативному реагированию браузером.
Брет Виктор хорошо сказал: «Творцы должны иметь мгновенную связь со своим творением». Это правдиво не только по отношению к творцам, но и к веб-серферам: когда вы печатаете или кликаете, веб страница должна откликаться немедленно. Такая способность к быстрому реагированию помогает реализовать наиболее иммерсивные моменты веб и создает глубинную взаимосвязь пользователя и браузера. Немедленный отклик — критическая характеристика не только для творческого потока сознания, но и для плавного и стремительного веб-серфинга. С Creators Update браузер Microsoft Edge сделал большой шаг к достижению такого идеала.
Авторы:
- Нолан Лоусон (Nolan Lawson), Program Manager, Microsoft Edge
- Тод Рейфштик (Todd Reifsteck), Senior Program Manager, Microsoft Edge
- Рэчел Нейборз (Rachel Nabors), Program Manager, Microsoft Edge