MousePlayer қалай жұмыс істейді
Бақылау архитектурамыз, әртүрлі құрылғылардағы экран ажыратымдылығын өңдеу және жүйе шекаралары туралы қарапайым нұсқаулық.
1. Неге бейнежазба қолданбаймыз
Көрнекі талдау құралдары келушінің экранын стандартты бейнефайлдар (MP4 немесе WebM сияқты) түрінде жазады деген түсінік жиі кездеседі. Бұл өте көп өткізу жолағын жұмсап, веб-сайтыңызды қатты баяулатар еді және мәтінді бұлыңғыр, оқылмайтын етер еді.
Оның орнына MousePlayer жеңіл технологияны қолданады, оның атауы — DOM суретінің телеметриясы. Негізгі жұмыс тәртібі мынадай:
Құрылым суреті
Келуші бетіңізді ашқанда, скриптіміз HTML мен стиль құрылымының мәтіндік сызбасын алады. Бетіңіздің сурет не бейнефайлдарын көшірмей, элементтердің орналасуын жазады; қайта ойнату кезінде ойнатқыш суреттерді бастапқы мекенжайынан жүктейді. Ерекшелік — canvas элементтері, олардың мазмұны сурет түрінде жіберіледі (төменде қараңыз).
Координаттар телеметриясы
Пайдаланушы әрекет еткенде оқиғалар ағынын жазамыз: тінтуір орны, айналдыру тереңдігі, басу нысаналары және браузер өлшемінің өзгеруі, сондай-ақ беттің өз өзгерістері. Баптауларға қарай консоль хабарлары, сәтсіз немесе баяу сұраулар және жүктелу уақытының өлшемдері (Web Vitals) де кіреді. Қозғалыстар мен басулар шағын; беттің суреттері мен өзгерістері бетке қарай едәуір үлкен болуы мүмкін және сығылып жіберіледі.
Театрдағы қайта ойнату
Басқару тақтасында сеансты көргенде, ойнатқышымыз жазылған сызба арқылы бетті қайта құрып, виртуалды меңзерді нақты уақытта жылжытады. Мәтін анық болып қалады.
Жеңіл болу үшін жасалған: скрипт асинхронды жүктеліп, бейненің орнына шағын сандық деректер нүктелерін жібереді, сондықтан оның өз жүктемесі аз. Core Web Vitals көрсеткіштеріңізге әсері беттеріңізге, хостингіңізге және келуші желісіне байланысты. Сондықтан біздің санға сүйенбей, өз сайтыңызда өлшеңіз. Нақты жүктелу жылдамдығына кепілдік берілмейді – 20-бөлімді қараңыз: Қызмет көрсету шарттары.
2. Экран ажыратымдылықтары & мобильді құрылғылар
Қазіргі пайдаланушылар шағын смартфоннан бастап аса кең 4K үстелдік мониторларға дейінгі құрылғыларда қарайды. Веб-сайттар әртүрлі экран еніне сай орналасуын автоматты жылжытып, жинақтап, қайта реттейді. Бұл бейімделгіш веб-дизайн деп аталады.
Келушінің нақты көрінетін аймағын қалай сәйкестендіреміз
Қайта ойнату бұрмаланбауы үшін MousePlayer келушінің көрінетін аймағының дәл өлшемдерін жазады (мысалы, 390x844 смартфон үшін немесе 1920x1080 үстелдік монитор үшін). Театр ойнатқышын ашқанда, қозғалтқышымыз келушінің бастапқы экран пропорциясын дәл қайталайтын масштабталған оқшау орта жасайды.
Үстелдік компьютерлер & ноутбуктар
Кәдімгі компьютерлерде бір браузер сеансы ішінде үздіксіз тінтуір қозғалысын және бірнеше қойынды арасындағы шарлауды жазамыз. Меңзерді апарғанда ашылатын мәзірлер сол кезде бет құжаты өзгерсе ғана қайта ойнатуда көрінеді; тек CSS hover әсері құжатта көрінбейді және қайта ойнатылмайды.
Смартфондар & планшеттер
Сенсорлық экранда қалқып жүретін тінтуір меңзері жоқ. MousePlayer түрту қимылдарын, сырғытып айналдыруды және бағдар өзгерістерін (тік не көлденең) жазуға автоматты бейімделеді.
Сеанс кезіндегі өлшем өзгерісінің қиындығы
Келуші сеанс ортасында планшетін бұрса немесе үстелдік браузер терезесінің өлшемін өзгертсе, сайт орналасуы динамикалық өзгереді. MousePlayer терезе өлшемінің осы өзгерістерін тіркеп, әрекеттесу контексі сақталуы үшін ойнату аймағын сол сәтте бірқалыпты бейімдейді.
3. Жүйе шектері & техникалық шекаралар
Пайдаланушы құпиялығын құрметтеу, браузер қауіпсіздігін сақтау және деректерді жылдам өңдеу үшін MousePlayer анықталған техникалық шекараларда жұмыс істейді:
| Жүйе шекарасы | MousePlayer оны қалай өңдейді |
|---|---|
| iFrames | Бетіңізбен бір шығу тегіндегі iframe элементтері мазмұнымен және ішіндегі әрекеттесумен бірге жазылады. Басқа шығу тегінен ендірілген мазмұнның (мысалы, YouTube ойнатқыштары, Stripe төлем пішіндері) ішін браузер қауіпсіздік саясаты (Same-Origin Policy) бойынша жазу мүмкін емес. Қайта ойнатуда оның орнына толтырғыш көрсетіліп, мазмұн жүктелмейді. |
| Сезімтал енгізу өрістері (PII) | Құпиясөз және төлем өрістері барлық жасыру деңгейінде келуші құрылғысында жасырылады. Барлық пішін енгізуін толық жасыру — әр ресурстың әдепкі баптауы. Сіз мәтін терілгенін көресіз, бірақ не терілгенін көрмейсіз. Екі шектеу бар: әлсіздеу екі жасыру деңгейі тек біздің жазбаша мақұлдауымызбен қосылады және жасыру өз бетіңіз құжатқа шығарған мазмұнға жетпейді – мекенжай көрсетілген растау беті суреттің бір бөлігі. Екеуі де мына құжатта жазылған: DPA. |
| Canvas & WebGL элементтері | Canvas мазмұны сурет ретінде жазылады: бір рет бет суретімен бірге, кейін әр өзгергенде, шамамен секундына ең көбі бір рет және өлшем шегімен. Сондықтан бірқалыпты анимациялар кадрлар тізбегі ретінде көрінеді. Жасырылған аймақтарда және басқа шығу тегіндегі суреттері бар canvas элементтерінде сурет жіберілмейді; WebGL мазмұны бос қалуы мүмкін. |
| Веб-компоненттер (Shadow DOM) | Ашық shadow root элементтері мазмұнымен бірге жазылады. Жабық shadow root элементтеріне скрипттер кіре алмайды, олардың мазмұны қайта ойнатуда болмайды. |
| Тасымалдау & браузер қоймасы | Деректер шифрланған WebSocket қосылымымен (HTTPS/WSS) жіберіледі. Мысалы, прокси салдарынан қосылым орнамаса, скрипт шифрланған HTTP жолына ауысады; өте үлкен бет суреттері HTTPS арқылы бөлек жүктеледі. MousePlayer cookie орнатпайды, ол сайтыңыздағы браузердің local storage және session storage қоймаларын қолданады. |
| AFK әрекетсіз кезеңдері | Келуші қойындысын ашық қалдырып, 20 минутқа кетсе, қозғалтқышымыз әрекетсіздікті автоматты анықтап, қайта ойнатудағы бос аралықты қысқартады. Қозғалмайтын экранды көруге уақыт жоғалтпайсыз. |