Dispositivo de navegador da web Chrome moderno (Parte 4/4)

Esta é a postagem final de uma série de 4 postagens sobre como olhar dentro do Chrome e explorar como ele analisa nosso código para renderizar um site. No post anterior, vimos * o processo do renderizador e aprendemos sobre * o thread do compositor. Neste post, vamos dar uma olhada em como * compose flow fornece uma experiência fluida para a entrada do usuário.





Parte 1

Parte 2

Parte 3

Parte 4 (atual)



  • , , .. () . — , - . : *-, *-. , , , , , .
  • , , , , . "" , .




" ", , , . — , .



, , , *- — , . *- , , *-. *- *- ( touchstart) . *- , , .



imagem



1: *- *-



*-



, *- , . , *- -, . , ? *- , ?



imagem

2: Viewport



*-



JavaScript , *- , "Non-Fast Scrollable Region" (*-). , *- , , . - , *- , .



imagem



3: *-



=



- . , . , , .



document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault();
    }
});


, . , , *-. , , *- , . , .



imagem



4: *-



, , passive:true . , , *- .



document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault()
    }
 }, {passive: true});


cancelable



, , .



passive: true , , , preventDefault . , event.cancelable.



imagem

5: -



document.body.addEventListener('pointermove', event => {
    if (event.cancelable) {
        event.preventDefault(); //   
        /*
        *     
        */
    }
}, {passive: true});


, CSS-, touch-action, .



#area {
  touch-action: pan-x;
}




*- , . *- (paint records), , , , .



imagem



6: *- x.y





, 60 . 60-120 , 100 . , .



, , 120 , JavaScript , .



imagem



7:



, Chrome (coalesces, *) ( wheel, mousewheel, mousemove, pointermove, touchmove) , requestAnimationFrame.



imagem



8: *



, keydown, keyup, mouseup, mousedown, touchstart touchchend .



getCoalescedEvents



-, * , . , , touchmove, . getCoalescedEvents , * .



imagem



9: , - *



window.addEventListener('pointermove', event => {
    const events = event.getCoalescedEvents();
    for (let event of events) {
        const x = event.pageX;
        const y = event.pageY;
        /*     x  y */
    }
});




-. , DevTools {passive: true} async , , , .



= Lighthouse



, , , , Lighthouse — , , . , , .



=



, , , . Chrome DevTools .



= Feature Policy



, Feature Policy — -, , . Feature Policy . , , , . sync-script: 'none', JavaScript- . , , .





, , . , , , . , -. , , , . , !



imagem



Muito obrigado a todos que revisaram os primeiros projetos desta série, incluindo (mas não se limitando a) Alex Russell , Paul Irish , Meggin Kearney , Eric Bidelman , Mathias Bynens , Addy Osmani , Kinuko Yasuda , Nasko Oskov e Charlie Reis.



Você gostou desse episódio? Se você tiver alguma dúvida ou sugestão para postagens futuras, adoraria ouvir de você na seção de comentários abaixo, ou de mim no twitter @kosamari .



Parte 1

Parte 2

Parte 3

Parte 4 (atual)




All Articles