Ini adalah posting terakhir dalam seri 4 posting tentang melihat ke dalam Chrome dan menjelajahi bagaimana itu mengurai kode kita untuk merender situs web. Di posting sebelumnya, kita melihat * proses renderer dan mempelajari tentang * thread pengarang. Dalam postingan ini, kita akan melihat bagaimana * alur penulisan memberikan pengalaman yang lancar untuk masukan pengguna.

Bagian 1

Bagian 2

Bagian 3

Bagian 4 (saat ini)

" ", , , . — , .

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

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

Terima kasih banyak kepada semua orang yang telah meninjau proyek awal dalam seri ini, termasuk (tetapi tidak terbatas pada) Alex Russell , Paul Irish , Meggin Kearney , Eric Bidelman , Mathias Bynens , Addy Osmani , Kinuko Yasuda , Nasko Oskov , dan Charlie Reis.

Apakah Anda menyukai episode ini? Jika Anda memiliki pertanyaan atau saran untuk posting selanjutnya, saya ingin mendengar dari Anda di bagian komentar di bawah, atau dari saya di twitter @kosamari .

Bagian 1

Bagian 2

Bagian 3

Bagian 4 (saat ini)