هذا هو المنشور الأخير في سلسلة من 4 مشاركات حول البحث داخل Chrome واستكشاف كيفية تحليل الكود الخاص بنا لتقديم موقع ويب. في المنشور السابق ، نظرنا في * عملية العارض وتعرفنا على * مؤشر ترابط المكون. في هذا المنشور ، سنلقي نظرة على كيفية توفير * تدفق الإنشاء تجربة مستخدم سلسة لإدخال المستخدم.

الجزء 1

الجزء 2

الجزء 3

الجزء 4 (الحالي)

" ", , , . — , .

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

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

شكراً جزيلاً لكل من استعرض المشاريع الأولى في هذه السلسلة ، بما في ذلك (على سبيل المثال لا الحصر) أليكس راسل ، وبول أيرش ، وميجين كيرني ، وإريك بيدلمان ، وماتياس بينينز ، وآدي عثماني ، وكينوكو ياسودا ، وناسكو أوسكوف ، وتشارلي ريس.

هل أعجبتك هذه الحلقة؟ إذا كان لديك أي أسئلة أو اقتراحات لمنشورات مستقبلية ، أود أن أسمع منك في قسم التعليقات أدناه ، أو مني على تويتر kosamari .

الجزء 1

الجزء 2

الجزء 3

الجزء 4 (الحالي)