Dies ist der letzte Beitrag in einer Serie mit 4 Beiträgen, in der es darum geht, in Chrome zu schauen und zu untersuchen, wie unser Code zum Rendern einer Website analysiert wird. Im vorherigen Beitrag haben wir uns * den Renderer-Prozess angesehen und * den Compositor-Thread kennengelernt. In diesem Beitrag werden wir uns ansehen, wie * compose flow eine flüssige Erfahrung für Benutzereingaben bietet.

Teil 1

Teil 2

Teil 3

Teil 4 (aktuell)

" ", , , . — , .

, , , *- — , . *- , , *-. *- *- ( 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 — , , . , , .

=

, , , . Chrome DevTools .

= Feature Policy

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

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

Vielen Dank an alle, die frühe Projekte in dieser Reihe besprochen haben , einschließlich (aber nicht beschränkt auf) Alex Russell , Paul Irish , Meggin Kearney , Eric Bidelman , Mathias Bynens , Addy Osmani , Kinuko Yasuda , Nasko Oskov und Charlie Reis.

Hat dir diese Folge gefallen? Wenn Sie Fragen oder Anregungen für zukünftige Beiträge haben, würde ich gerne von Ihnen im Kommentarbereich unten oder von mir auf Twitter @kosamari hören .

Teil 1

Teil 2

Teil 3

Teil 4 (aktuell)