আধুনিক ওয়েব ব্রাউজারের ভিতরে দেখুন (পার্ট 4)

Mariko Kosaka

কম্পোজিটরে ইনপুট আসছে

এটি ক্রোমের ভিতরের 4 অংশের ব্লগ সিরিজের শেষ; একটি ওয়েবসাইট প্রদর্শন করার জন্য এটি আমাদের কোড কীভাবে পরিচালনা করে তা তদন্ত করা হচ্ছে। আগের পোস্টে, আমরা রেন্ডারিং প্রক্রিয়া দেখেছি এবং কম্পোজিটর সম্পর্কে শিখেছি । এই পোস্টে, আমরা দেখব কিভাবে কম্পোজিটর মসৃণ মিথস্ক্রিয়া সক্রিয় করছে যখন ব্যবহারকারীর ইনপুট আসে।

ব্রাউজারের দৃষ্টিকোণ থেকে ইভেন্ট ইনপুট করুন

আপনি যখন "ইনপুট ইভেন্টগুলি" শোনেন তখন আপনি শুধুমাত্র টেক্সটবক্সে টাইপিং বা মাউস ক্লিকের কথা ভাবতে পারেন, কিন্তু ব্রাউজারের দৃষ্টিকোণ থেকে, ইনপুট মানে ব্যবহারকারীর কোনো অঙ্গভঙ্গি। মাউস হুইল স্ক্রোল একটি ইনপুট ইভেন্ট এবং টাচ বা মাউস ওভারও একটি ইনপুট ইভেন্ট।

যখন স্ক্রিনে স্পর্শের মতো ব্যবহারকারীর অঙ্গভঙ্গি ঘটে, তখন ব্রাউজার প্রক্রিয়াটি এমন একটি যা প্রথমে অঙ্গভঙ্গি গ্রহণ করে। যাইহোক, ব্রাউজার প্রক্রিয়াটি কেবলমাত্র সেই অঙ্গভঙ্গিটি কোথায় ঘটেছে সে সম্পর্কে সচেতন কারণ একটি ট্যাবের ভিতরের বিষয়বস্তু রেন্ডারার প্রক্রিয়া দ্বারা পরিচালিত হয়। তাই ব্রাউজার প্রক্রিয়া ইভেন্টের ধরন (যেমন touchstart ) এবং এর স্থানাঙ্কগুলি রেন্ডারার প্রক্রিয়াতে পাঠায়। রেন্ডারার প্রক্রিয়া ইভেন্ট টার্গেট খুঁজে এবং সংযুক্ত ইভেন্ট শ্রোতাদের চালানোর মাধ্যমে যথাযথভাবে ইভেন্ট পরিচালনা করে।

চিত্র 1: ইনপুট ইভেন্ট ব্রাউজার প্রক্রিয়ার মাধ্যমে রেন্ডারার প্রক্রিয়াতে রুট করা হয়েছে

কম্পোজিটর ইনপুট ইভেন্ট গ্রহণ করে

চিত্র 2: ভিউপোর্ট পৃষ্ঠা স্তরের উপর ঘোরাফেরা করছে

পূর্ববর্তী পোস্টে, আমরা দেখেছিলাম কিভাবে কম্পোজিটর রাস্টারাইজড লেয়ার কম্পোজিট করে স্ক্রোল সহজভাবে পরিচালনা করতে পারে। পৃষ্ঠার সাথে কোনো ইনপুট ইভেন্ট শ্রোতা সংযুক্ত না থাকলে, কম্পোজিটর থ্রেড মূল থ্রেড থেকে সম্পূর্ণ স্বাধীন একটি নতুন যৌগিক ফ্রেম তৈরি করতে পারে। কিন্তু যদি কিছু ঘটনা শ্রোতা পেজ সংযুক্ত করা হয়? কম্পোজিটর থ্রেড কীভাবে ইভেন্টটি পরিচালনা করতে হবে তা খুঁজে বের করবে?

অ-দ্রুত স্ক্রোলযোগ্য অঞ্চল বোঝা

যেহেতু জাভাস্ক্রিপ্ট চালানো হল প্রধান থ্রেডের কাজ, যখন একটি পৃষ্ঠা সংমিশ্রিত হয়, কম্পোজিটর থ্রেড পৃষ্ঠার একটি অঞ্চলকে চিহ্নিত করে যেখানে ইভেন্ট হ্যান্ডলারগুলি "নন-ফাস্ট স্ক্রোলযোগ্য অঞ্চল" হিসাবে সংযুক্ত থাকে। এই তথ্য থাকার মাধ্যমে, কম্পোজিটর থ্রেড নিশ্চিত করতে পারে যে ইভেন্টটি সেই অঞ্চলে ঘটলে মূল থ্রেডে ইনপুট ইভেন্ট পাঠানো হবে। যদি ইনপুট ইভেন্ট এই অঞ্চলের বাইরে থেকে আসে, তাহলে কম্পোজিটর থ্রেড মূল থ্রেডের জন্য অপেক্ষা না করেই নতুন ফ্রেম কম্পোজিটিং করে।

চিত্র 3: অ-দ্রুত স্ক্রোলযোগ্য অঞ্চলে বর্ণিত ইনপুটের চিত্র

আপনি যখন ইভেন্ট হ্যান্ডলার লিখবেন তখন সচেতন হোন

ওয়েব ডেভেলপমেন্টে একটি সাধারণ ইভেন্ট হ্যান্ডলিং প্যাটার্ন হল ইভেন্ট ডেলিগেশন। যেহেতু ইভেন্ট বাবল, আপনি শীর্ষস্থানীয় উপাদানে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন এবং ইভেন্ট টার্গেটের উপর ভিত্তি করে কাজগুলি অর্পণ করতে পারেন। আপনি নীচের মত কোড দেখেছেন বা লিখতে পারেন.

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

যেহেতু সমস্ত উপাদানের জন্য আপনাকে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার লিখতে হবে, তাই এই ইভেন্ট ডেলিগেশন প্যাটার্নের ergonomics আকর্ষণীয়। যাইহোক, আপনি যদি ব্রাউজারের দৃষ্টিকোণ থেকে এই কোডটি দেখেন, এখন পুরো পৃষ্ঠাটি একটি অ-দ্রুত স্ক্রোলযোগ্য অঞ্চল হিসাবে চিহ্নিত করা হয়েছে। এর অর্থ হল আপনার অ্যাপ্লিকেশনটি পৃষ্ঠার নির্দিষ্ট অংশ থেকে ইনপুট নিয়ে চিন্তা না করলেও, কম্পোজিটর থ্রেডটিকে মূল থ্রেডের সাথে যোগাযোগ করতে হবে এবং প্রতিবার একটি ইনপুট ইভেন্ট আসার জন্য অপেক্ষা করতে হবে। এইভাবে, কম্পোজিটরের মসৃণ স্ক্রোলিং ক্ষমতা পরাজিত হয়

চিত্র 4: একটি সম্পূর্ণ পৃষ্ঠা কভার করে অ-দ্রুত স্ক্রোলযোগ্য অঞ্চলে বর্ণিত ইনপুটের ডায়াগ্রাম

এটি ঘটতে থেকে প্রশমিত করার জন্য, আপনি passive: true বিকল্পগুলি৷ এটি ব্রাউজারকে ইঙ্গিত দেয় যে আপনি এখনও মূল থ্রেডে ইভেন্টটি শুনতে চান, তবে কম্পোজিটর এগিয়ে যেতে পারে এবং নতুন ফ্রেমটিও কম্পোজিট করতে পারে।

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

ইভেন্টটি বাতিলযোগ্য কিনা তা পরীক্ষা করুন

চিত্র 5: অনুভূমিক স্ক্রলে স্থির পৃষ্ঠার অংশ সহ একটি ওয়েব পৃষ্ঠা

কল্পনা করুন আপনার একটি পৃষ্ঠায় একটি বাক্স রয়েছে যা আপনি শুধুমাত্র অনুভূমিক স্ক্রোলের দিকে স্ক্রোলের দিক সীমাবদ্ধ করতে চান।

আপনার পয়েন্টার ইভেন্টে passive: true বিকল্প ব্যবহার করার অর্থ হল পৃষ্ঠা স্ক্রোলটি মসৃণ হতে পারে, তবে স্ক্রোলের দিক সীমাবদ্ধ করার জন্য আপনি ডিফল্ট preventDefault করতে চাইলে উল্লম্ব স্ক্রোল শুরু হতে পারে। আপনি event.cancelable পদ্ধতি ব্যবহার করে এর বিরুদ্ধে পরীক্ষা করতে পারেন।

document.body.addEventListener('pointermove', event => {
    if (event.cancelable) {
        event.preventDefault(); // block the native scroll
        /*
        *  do what you want the application to do here
        */
    }
}, {passive: true});

বিকল্পভাবে, আপনি ইভেন্ট হ্যান্ডলারকে সম্পূর্ণরূপে নির্মূল করতে touch-action মতো CSS নিয়ম ব্যবহার করতে পারেন।

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

ইভেন্ট টার্গেট খোঁজা

চিত্র 6: প্রধান থ্রেড পেইন্ট রেকর্ডের দিকে তাকিয়ে জিজ্ঞাসা করছে xy পয়েন্টে কী আঁকা হয়েছে

যখন কম্পোজিটর থ্রেড মূল থ্রেডে একটি ইনপুট ইভেন্ট পাঠায়, তখন প্রথম কাজটি চালানো হয় ইভেন্ট টার্গেট খুঁজে বের করার জন্য একটি হিট পরীক্ষা। হিট টেস্ট পেইন্ট রেকর্ড ডেটা ব্যবহার করে যা রেন্ডারিং প্রক্রিয়ায় তৈরি করা হয়েছিল বিন্দু স্থানাঙ্কের নীচে কী রয়েছে তা খুঁজে বের করতে যেখানে ঘটনাটি ঘটেছে৷

প্রধান থ্রেডে ইভেন্ট প্রেরণ কম করা হচ্ছে

আগের পোস্টে, আমরা আলোচনা করেছি যে কীভাবে আমাদের সাধারণ ডিসপ্লে সেকেন্ডে 60 বার স্ক্রীন রিফ্রেশ করে এবং কীভাবে আমাদের মসৃণ অ্যানিমেশনের জন্য ক্যাডেন্সের সাথে তাল মিলিয়ে চলতে হবে। ইনপুটের জন্য, একটি সাধারণ টাচ-স্ক্রিন ডিভাইস সেকেন্ডে 60-120 বার টাচ ইভেন্ট সরবরাহ করে এবং একটি সাধারণ মাউস সেকেন্ডে 100 বার ইভেন্ট সরবরাহ করে। ইনপুট ইভেন্ট আমাদের স্ক্রীন রিফ্রেশ করতে পারে তার চেয়ে বেশি বিশ্বস্ততা আছে।

যদি touchmove মতো একটানা ইভেন্ট মূল থ্রেডে সেকেন্ডে 120 বার পাঠানো হয়, তাহলে স্ক্রীন কতটা ধীর গতিতে রিফ্রেশ করতে পারে তার তুলনায় এটি অত্যধিক হিট টেস্ট এবং জাভাস্ক্রিপ্ট এক্সিকিউশনকে ট্রিগার করতে পারে।

চিত্র 7: ইভেন্টগুলি ফ্রেমের টাইমলাইনে প্লাবিত হওয়ার ফলে পৃষ্ঠা জ্যাঙ্ক হয়ে যায়

মূল থ্রেডে অত্যধিক কল কমাতে, ক্রোম ক্রমাগত ইভেন্টগুলিকে একত্রিত করে (যেমন wheel , mousewheel , mousemove , pointermove , touchmove ) এবং পরবর্তী requestAnimationFrame ঠিক আগে পর্যন্ত প্রেরণে বিলম্ব করে৷

চিত্র 8: আগের মতো একই টাইমলাইন কিন্তু ইভেন্ট একত্রিত এবং বিলম্বিত হচ্ছে

keydown , keyup , mouseup , mousedown , touchstart এবং touchend মতো যেকোন বিচ্ছিন্ন ঘটনা অবিলম্বে পাঠানো হয়।

ইন্ট্রা-ফ্রেম ইভেন্ট পেতে 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;
        // draw a line using x and y coordinates.
    }
});

পরবর্তী পদক্ষেপ

এই সিরিজে, আমরা একটি ওয়েব ব্রাউজারের ভিতরের কাজগুলি কভার করেছি৷ আপনি যদি কখনও ভাবেন না কেন DevTools আপনার ইভেন্ট হ্যান্ডলারে {passive: true} যোগ করার পরামর্শ দেয় বা কেন আপনি আপনার স্ক্রিপ্ট ট্যাগে async বৈশিষ্ট্য লিখতে পারেন, আমি আশা করি এই সিরিজটি কেন একটি ব্রাউজারকে দ্রুত এবং মসৃণভাবে সরবরাহ করার জন্য এই তথ্যগুলির প্রয়োজন সে সম্পর্কে কিছু আলোকপাত করবে। ওয়েব অভিজ্ঞতা।

বাতিঘর ব্যবহার করুন

আপনি যদি আপনার কোড ব্রাউজারে সুন্দর করে তুলতে চান কিন্তু কোথা থেকে শুরু করবেন তার কোনো ধারণা না থাকলে, Lighthouse হল একটি টুল যা যেকোনো ওয়েবসাইটের নিরীক্ষা চালায় এবং আপনাকে কী করা হচ্ছে এবং কী উন্নতি করতে হবে সে সম্পর্কে একটি প্রতিবেদন দেয়৷ অডিট তালিকার মাধ্যমে পড়া আপনাকে একটি ধারণা দেয় যে একটি ব্রাউজার কী ধরনের জিনিসগুলি সম্পর্কে যত্নশীল।

কর্মক্ষমতা পরিমাপ কিভাবে শিখুন

পারফরম্যান্সের পরিবর্তন বিভিন্ন সাইটের জন্য পরিবর্তিত হতে পারে, তাই এটি অত্যন্ত গুরুত্বপূর্ণ যে আপনি আপনার সাইটের কর্মক্ষমতা পরিমাপ করুন এবং সিদ্ধান্ত নিন যে আপনার সাইটের জন্য কোনটি সবচেয়ে উপযুক্ত। Chrome DevTools টিমের কিছু টিউটোরিয়াল আছে কিভাবে আপনার সাইটের পারফরম্যান্স পরিমাপ করা যায় ।

আপনার সাইটে বৈশিষ্ট্য নীতি যোগ করুন

আপনি যদি একটি অতিরিক্ত পদক্ষেপ নিতে চান, ফিচার পলিসি হল একটি নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য যা আপনি যখন আপনার প্রকল্প তৈরি করছেন তখন আপনার জন্য একটি রেলপথ হতে পারে৷ বৈশিষ্ট্য নীতি চালু করা আপনার অ্যাপের নির্দিষ্ট আচরণের নিশ্চয়তা দেয় এবং আপনাকে ভুল করা থেকে বিরত রাখে। উদাহরণস্বরূপ, আপনি যদি নিশ্চিত করতে চান যে আপনার অ্যাপটি কখনই পার্সিং ব্লক করবে না, আপনি আপনার অ্যাপটি সিঙ্ক্রোনাস স্ক্রিপ্ট নীতিতে চালাতে পারেন। যখন sync-script: 'none' সক্রিয় থাকে, তখন পার্সার-ব্লকিং জাভাস্ক্রিপ্ট কার্যকর করা থেকে বাধা দেওয়া হবে। এটি আপনার যেকোন কোডকে পার্সারকে ব্লক করা থেকে বাধা দেয় এবং ব্রাউজারকে পার্সারকে পজ করার বিষয়ে চিন্তা করতে হবে না।

শেষ করি

যখন আমি ওয়েবসাইট তৈরি করা শুরু করি, তখন আমি প্রায় শুধুমাত্র চিন্তা করতাম কিভাবে আমি আমার কোড লিখব এবং কী আমাকে আরও উৎপাদনশীল হতে সাহায্য করবে। এই জিনিসগুলি গুরুত্বপূর্ণ, কিন্তু আমাদেরও চিন্তা করা উচিত যে ব্রাউজার আমরা যে কোড লিখি তা কীভাবে নেয়। আধুনিক ব্রাউজারগুলি ব্যবহারকারীদের জন্য একটি ভাল ওয়েব অভিজ্ঞতা প্রদানের উপায়ে বিনিয়োগ করছে এবং চালিয়ে যাচ্ছে। আমাদের কোড সংগঠিত করে ব্রাউজারে সুন্দর হওয়া, ফলস্বরূপ, আপনার ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। আমি আশা করি আপনি ব্রাউজারগুলিতে সুন্দর হওয়ার সন্ধানে আমার সাথে যোগ দেবেন!

অ্যালেক্স রাসেল , পল আইরিশ , মেগিন কার্নি , এরিক বিডেলম্যান , ম্যাথিয়াস বাইনেন্স , অ্যাডি ওসমানি , কিনুকো ইয়াসুদা , নাস্কো ওসকভ , এবং চার্লি রেইস সহ যারা এই সিরিজের প্রথম দিকের খসড়াগুলি পর্যালোচনা করেছেন তাদের প্রত্যেককে অসংখ্য ধন্যবাদ।

আপনি কি এই সিরিজটি উপভোগ করেছেন? আপনার যদি ভবিষ্যতের পোস্টের জন্য কোন প্রশ্ন বা পরামর্শ থাকে, আমি নীচের মন্তব্য বিভাগে বা টুইটারে @kosamari আপনার কাছ থেকে শুনতে চাই।