Esta es la publicación final de una serie de 4 publicaciones sobre cómo mirar dentro de Chrome y explorar cómo analiza nuestro código para representar un sitio web. En la publicación anterior, vimos * el proceso del renderizador y aprendimos sobre * el hilo del compositor. En esta publicación, veremos cómo * redactar flujo proporciona una experiencia de usuario fluida para la entrada del usuario.
Parte 1
Parte 2
Parte 3
Parte 4 (actual)
- , , .. () . — , - . : *-, *-. , , , , , .
- , , , , . "" , .
" ", , , . — , .
, , , *- — , . *- , , *-. *- *- ( touchstart) . *- , , .
1: *- *-
*-
, *- , . , *- -, . , ? *- , ?
2: Viewport
*-
JavaScript , *- , "Non-Fast Scrollable Region" (*-). , *- , , . - , *- , .
3: *-
=
- . , . , , .
document.body.addEventListener('touchstart', event => {
if (event.target === area) {
event.preventDefault();
}
});
, . , , *-. , , *- , . , .
4: *-
, , passive:true
. , , *- .
document.body.addEventListener('touchstart', event => {
if (event.target === area) {
event.preventDefault()
}
}, {passive: true});
cancelable
, , .
passive: true
, , , preventDefault
. , event.cancelable
.
5: -
document.body.addEventListener('pointermove', event => {
if (event.cancelable) {
event.preventDefault(); //
/*
*
*/
}
}, {passive: true});
, CSS-, touch-action
, .
#area {
touch-action: pan-x;
}
*- , . *- (paint records), , , , .
6: *- x.y
, 60 . 60-120 , 100 . , .
, , 120 , JavaScript , .
7:
, Chrome (coalesces, *) ( wheel, mousewheel, mousemove, pointermove, touchmove) , requestAnimationFrame.
8: *
, keydown, keyup, mouseup, mousedown, touchstart touchchend .
getCoalescedEvents
-, * , . , , touchmove
, . getCoalescedEvents
, * .
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 — , , . , , .
=
= Feature Policy
, Feature Policy — -, , . Feature Policy . , , , . sync-script: 'none'
, JavaScript- . , , .
, , . , , , . , -. , , , . , !
Muchas gracias a todos los que revisaron los primeros proyectos de esta serie, incluidos (entre otros) Alex Russell , Paul Irish , Meggin Kearney , Eric Bidelman , Mathias Bynens , Addy Osmani , Kinuko Yasuda , Nasko Oskov y Charlie Reis.
¿Te gustó este episodio? Si tiene alguna pregunta o sugerencia para publicaciones futuras, me encantaría saber de usted en la sección de comentarios a continuación, o de mí en twitter @kosamari .