Превъртане в уеб буквара

От Нолан Лоусън, ръководител на проекта Microsoft Edge

За да отговорите на този въпрос и да разберете как да постигнете най-плавното изживяване при превъртане на вашия сайт, нека направим крачка назад и разберем как браузърите се справят с многонишковостта и въвеждането.

Многопоточна мрежа

По някакъв начин някои действия на превъртане могат да променят състоянието на страницата, докато всичко останало - бутони, полета за въвеждане, GIF файлове - е напълно замразено. Как можем да съгласуваме това с нашата еднонишкова уеб теория?

История на две нишки на изпълнение

Както се оказва, тезата „браузърите са еднопоточни“ като цяло е вярна, но има важни изключения. Превъртането, в цялото му разнообразие, е едно такова изключение.

През годините разработчиците на браузъри осъзнаха, че прехвърлянето на спомагателна работа към фонови нишки може да осигури значителни ползи по отношение на плавността и отзивчивостта. Превъртането е толкова важно за ключово изживяване на браузъра, че бързо беше избрано за тази оптимизация. Всички основни браузъри в наши дни (Blink, EdgeHTML, Gecko, WebKit) поддържат до известна степен превъртане извън основната нишка на изпълнение (Firefox беше последният, който се присъедини към клуба, след Firefox 46).

С превъртане във фонов режим дори една претрупана страница ще се превърта плавно, защото цялото превъртане се извършва в отделна нишка. Само ако се опитате да взаимодействате със страницата чрез някакъв външен механизъм без превъртане - натискане на клавиш, въвеждане в поле за въвеждане, щракване върху връзка - тогава фасадата пада и същността на салонния трик се разкрива напълно. (Имайки предвид колко добре работи, това е страхотен трик!)

Вярно е, че асинхронното превъртане има общ страничен ефект, който се нарича ефект на шахматна дъска. За първи път се появи в Safari за iOS като сиви и бели шахматни клетки. В повечето съвременни браузъри ефектът се появява като бяло пространство на екрана, ако превъртате по-бързо, отколкото браузърът може да изобрази страницата. Не е перфектно, но е приемлив компромис в сравнение с превъртане, което е заседнало, рязко или не реагира.

За съжаление, не винаги е лесно да преместите превъртането към фонова нишка на изпълнение. Браузърите могат да правят това само ако операционната система позволява едновременно въвеждане и това може да варира от устройство на устройство. По-специално въвеждането от клавиатурата не е толкова оптимизирано като въвеждането с мишката или докосването, което в крайна сметка води до по-значително забавяне на въвеждането от клавиатурата във всички браузъри.

Ето една поучителна история. Когато операционни системи като Windows и macOS се появиха за първи път, те позволиха само една нишка за изпълнение и малко хора предвидиха необходимостта от едновременно въвеждане. Едва с появата на многоядрени машини операционните системи започнаха да вграждат паралелизъм в своите архитектури.

Въпреки това, в екипа на Microsoft Edge, ние постигаме напредък, за да гарантираме, че превъртането е гладко и отзивчиво, независимо как се използва. В EdgeHTML 14 (който е част от Windows 10 Anniversary Update) поддържаме превъртане във фонов режим за следните методи:

Един пръст, сензорен екран
Два пръста, тъчпад
Колело на мишката
Плъзгач

Ако сравните Edge с други настолни браузъри, ще забележите само товаподдържа асинхронно превъртане с лентата за превъртане, т.е. задържане и преместване на лентата за превъртане с мишката, щракване върху лентата за превъртане или стрелките. (Всъщност ние не обявихме тази функция в актуализацията за годишнината!)

Въз основа на тестване на Windows 10 (14393, Surface Book) и macOS Sierra (10.12, MacBook Air), получихме следните резултати:

Тъчпад с два пръста Сензорно колело на мишката Лента за превъртане Клавиатура

Edge 14 (Windows)	Яжте	Яжте	Яжте	Яжте	Не
Chrome 56 (Windows)	Яжте	Яжте	Яжте	Не	Не
Firefox 51 (Windows)	Не	Не	Не	Не	Не
Chrome 56 (macOS)	Яжте	N/A	Яжте	Не	Не
Firefox 51 (macOS)	Яжте	N/A	Яжте	Не	Не
Safari 10.1 (macOS)	Яжте	N/A	Яжте	Не	Не

Както тази таблица* демонстрира, поведението при превъртане може драстично да се промени от браузър на браузър и дори от операционна система към операционна система. Ако тествате един метод за превъртане само в един браузър, ще получите много непълни резултати за ефективността на вашия сайт в сравнение с начина, по който потребителите действително го изживяват!

Като цяло трябва да е ясно, че превъртането има специално място в мрежата и браузърите работят много усилено, за да го направят бързо и отзивчиво. Има обаче фини начини, по които уеб програмистът може неволно да деактивира вградените оптимизации на браузъра. Нека да разгледаме как уеб разработчиците могатвлияят върху превъртането в браузъра по добър и по лош начин.

Как процесите на слушане пречат на превъртането

Когато добавимwheelслушател, който извиква event.preventDefault(), той 100% ще блокира превъртането както за колелцето на мишката, така и за тъчпада. И очевидно, ако превъртането е блокирано, тогава превъртането във фонов режим също е блокирано.

По-малко очевидно е въздействието на този пример:

Обърнете внимание, че това не се отнася само за колелото на мишката: на сензорни устройства превъртането може също да бъде блокирано отtouchstartилиtouchmoveслушатели.

Трябва да внимавате, когато добавяте слушатели на събития към страницата, защото те влияят на производителността!

Дори в случаите, когато наистина трябва да слушаме събитиятаwheelилиtouchstart, има някои трикове, които уеб разработчиците могат да използват, за да гарантират, че превъртането работи с максимално качество. Нека да разгледаме някои от тези трикове.

Глобални и местни слушатели

В предишния пример видяхме случая на глобален слушател (т.е. прикачен къмwindowилиdocument). Но какво ще кажете за слушателите за отделни елементи на превъртане?

С други думи, представете си страница, за която превъртането работи, но страницата има отделна област със собствено независимо превъртане. Браузърът блокира ли превъртането на цялата страница, ако добавите слушател само към тази област?

Ако проверите простата демонстрационна страница, ще забележите, че Microsoft Edge и Safari ще оставят плавно превъртане за целия документ, ако слушателят за превъртането е в div снезависимо превъртане.

Ето таблица с браузъри и тяхното поведение:

Тъчпад с два пръста Сензорно колело на мишката Клавиатура с плъзгане и щракване

Desktop Edge 14 (Windows)	Яжте	Яжте	Яжте	Яжте	Не
Настолен компютър Chrome 56 (Windows)	Не	Яжте	Не	Не	Не
Десктоп Firefox 51 (Windows)	Не	Не	Не	Не	Не
Настолен компютър Chrome 56 (MacOS)	Не	N/A	Не	Не	Не
Десктоп Firefox 51 (MacOS)	Яжте	N/A	Яжте	Не	Не
Safari 10.1 (macOS)	Яжте	N/A	Яжте	Не	Не

Резултатите показват*, че има налични оптимизации за уеб разработчиците, за да се възползват от тези функции на браузъра. Вместо да използвате слушатели с колело/докосване за целия документ, за предпочитане е да добавите слушатели къмконкретна подсекция на документа, така че превъртането да остане гладко за всички останали части на страницата. С други думи, вместо да делегирате слушатели колело/тъчстарт на най-високото възможно ниво, най-добре е да ги изолирате до елемента, където е необходимо.

Процес на пасивно слушане

Избягването на глобални слушатели колело/тъчстарт е добра практика, но понякога просто не е възможно, в зависимост от ефекта, който се опитвате да постигнете. И в някои отношения изглежда глупаво простото прослушване на събития кара браузъра да спира целия свят, просто защото имахипотетичната вероятност за извикване на PreventDefault() и го чака.

За щастие, нова функция започна да се появява в браузърите, където уеб разработчиците могат изрично да маркират процеса на слушане като "пасивен" и следователно да избегнат чакането:

С този подход браузърът ще третира превъртането така, сякаш изобщо нямаколелопроцес на слушане. Тази функция вече е налична в най-новите версии на Chrome, Firefox и Safari и трябва да се появи скоро в бъдеща версия на Microsoft Edge. (Имайте предвид, че трябва да използвате откриване на функции, за да поддържате браузъри, които не разпознават пасивни слушатели.)

За някои събития (включителноtouchstartиtouchmove), Chrome избра да се намеси от версия 56 и ги направи пасивни по подразбиране. Имайте предвид тази малка разлика между браузърите, когато добавяте слушатели!

Заключение

Както видяхме, превъртането в мрежата е фантастично сложен процес и всички браузъри са на различни етапи на подобряване на своята производителност. Но като цяло можем да формулираме някои ясни съвети за уеб разработчиците.

Първо, по-добре е да не добавяте слушателиwheelилиtouchкъм глобалните обектиdocumentилиwindow, а вместо това да ги добавяте към по-малки индивидуално превъртащи се елементи. Разработчиците също трябва да използват пасивни слушатели, когато е възможно, като използват откриване на функции, за да избегнат проблеми със съвместимостта. Използването на Pointer Events (има polyfill) иscrollслушатели на събития също е сигурен начин за избягване на неволно блокиране на превъртане.

Нашият екип на Microsoft Edge ще продължи да прави иновации в тази област,за осигуряване на плавно превъртане за повече сайтове и потребители. Да кажем това за скромната лента за превъртане - най-старото и най-противоречивото взаимодействие в мрежата!

Hardcore conf в C++. Каним само професионалисти.