ব্যবহারকারীরা লক্ষ্য করেন যে সাইট এবং অ্যাপগুলি ভালভাবে চলে না, তাই রেন্ডারিং কর্মক্ষমতা অপ্টিমাইজ করা অত্যন্ত গুরুত্বপূর্ণ!
আজকের ওয়েবের ব্যবহারকারীরা আশা করে যে তারা যে পৃষ্ঠাগুলি পরিদর্শন করবে সেগুলি ইন্টারেক্টিভ এবং মসৃণ হবে এবং সেখানেই আপনাকে আপনার সময় এবং প্রচেষ্টাকে ক্রমবর্ধমানভাবে ফোকাস করতে হবে৷ পৃষ্ঠাগুলি কেবল দ্রুত লোড হওয়া উচিত নয়, বরং তাদের সমগ্র জীবনচক্র জুড়ে ব্যবহারকারীর ইনপুটগুলিতে দ্রুত সাড়া দেওয়া উচিত। প্রকৃতপক্ষে, ব্যবহারকারীর অভিজ্ঞতার এই দিকটি সঠিকভাবে যা ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিক পরিমাপ করে। একটি ভাল INP মানে একটি পৃষ্ঠা ব্যবহারকারীর চাহিদার সাথে ধারাবাহিকভাবে এবং নির্ভরযোগ্যভাবে প্রতিক্রিয়াশীল।
যদিও একটি পৃষ্ঠাকে চটজলদি বোধ করার একটি প্রধান উপাদান হল ব্যবহারকারীর মিথস্ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে আপনি যে পরিমাণ জাভাস্ক্রিপ্ট চালান তা জড়িত, ব্যবহারকারীরা যা আশা করছেন তা হল ব্যবহারকারীর ইন্টারফেসে দৃশ্যমান পরিবর্তন৷ ব্যবহারকারীর ইন্টারফেসে ভিজ্যুয়াল পরিবর্তনগুলি বিভিন্ন ধরণের কাজের ফলাফল, প্রায়শই সমষ্টিগতভাবে রেন্ডারিং হিসাবে উল্লেখ করা হয় এবং এই কাজটি যত তাড়াতাড়ি সম্ভব হওয়া দরকার যাতে ব্যবহারকারীর অভিজ্ঞতা দ্রুত এবং নির্ভরযোগ্য মনে হয়।
ব্যবহারকারীর ইন্টারঅ্যাকশনে দ্রুত সাড়া দেয় এমন পৃষ্ঠাগুলি লিখতে, আপনাকে ব্রাউজার দ্বারা HTML, JavaScript এবং CSS কীভাবে পরিচালনা করা হয় তা বুঝতে হবে এবং নিশ্চিত করতে হবে যে আপনি যে কোডটি লেখেন- সেইসাথে আপনার অন্তর্ভুক্ত অন্য কোনো তৃতীয়-পক্ষের কোডও কার্যকরভাবে চলে। যতটুকু সম্ভব.
ডিভাইস রিফ্রেশ হার একটি নোট
বেশিরভাগ ডিভাইস আজ তাদের স্ক্রিন সেকেন্ডে 60 বার রিফ্রেশ করে। প্রতিটি রিফ্রেশ আপনার দেখা ভিজ্যুয়াল আউটপুট তৈরি করে এবং সাধারণত ফ্রেম হিসাবে পরিচিত। নিম্নলিখিত ভিডিওতে, ফ্রেমের ধারণাটি প্রদর্শিত হয়েছে:
একটি ডিভাইসের স্ক্রীন সবসময় একটি সামঞ্জস্যপূর্ণ হারে রিফ্রেশ করার সময়, একটি ডিভাইসে চলা অ্যাপ্লিকেশনগুলি সবসময় সেই রিফ্রেশ হারের সাথে মেলে পর্যাপ্ত ফ্রেম তৈরি করতে সক্ষম নাও হতে পারে৷ উদাহরণস্বরূপ, যদি একটি অ্যানিমেশন বা ট্রানজিশন চলমান থাকে, তাহলে প্রতিবার স্ক্রীন রিফ্রেশ করার জন্য একটি ফ্রেম তৈরি করতে ব্রাউজারটিকে ডিভাইসের রিফ্রেশ হারের সাথে মিলতে হবে।
প্রদত্ত যে একটি সাধারণ ডিসপ্লে প্রতি সেকেন্ডে 60 বার রিফ্রেশ করে, কিছু দ্রুত গণিত প্রকাশ করবে যে ব্রাউজারটির প্রতিটি ফ্রেম তৈরি করার জন্য 16.66 মিলিসেকেন্ড রয়েছে। বাস্তবে, যদিও, প্রতিটি ফ্রেমের জন্য ব্রাউজারের নিজস্ব ওভারহেড রয়েছে, তাই আপনার সমস্ত কাজ 10 মিলিসেকেন্ডের মধ্যে সম্পন্ন করতে হবে। আপনি যখন এই বাজেট পূরণ করতে ব্যর্থ হন, তখন ফ্রেমের হার কমে যায় এবং পৃষ্ঠার বিষয়বস্তু অন-স্ক্রীনে বিচার করে। এই ঘটনাটিকে প্রায়ই জ্যাঙ্ক বলা হয়।
যাইহোক, আপনি যে ধরণের কাজের চেষ্টা করছেন তার উপর ভিত্তি করে আপনার লক্ষ্যগুলি পরিবর্তিত হয়। 10 মিলিসেকেন্ড থ্রেশহোল্ড পূরণ করা অ্যানিমেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ, যেখানে পর্দার বস্তু দুটি বিন্দুর মধ্যে ফ্রেমের একটি সিরিজ জুড়ে প্রসারিত হয়। যখন ইউজার ইন্টারফেসে বিচ্ছিন্ন পরিবর্তনের কথা আসে—অর্থাৎ, এর মধ্যে কোনো গতি ছাড়াই এক অবস্থা থেকে অন্য অবস্থায় যাওয়া—এটি সুপারিশ করা হয় যে আপনি এমন একটি সময়সীমার মধ্যে এমন পরিবর্তনগুলি অর্জন করুন যা ব্যবহারকারীর কাছে তাৎক্ষণিকভাবে অনুভব করে । এই ধরনের ক্ষেত্রে, 100 মিলিসেকেন্ড একটি বারবার উদ্ধৃত চিত্র, কিন্তু INP মেট্রিকের "ভাল" থ্রেশহোল্ড হল 200 মিলিসেকেন্ড বা কম যাতে বিভিন্ন ক্ষমতার সাথে ডিভাইসগুলির একটি বিস্তৃত অ্যারেকে মিটমাট করা যায়।
আপনার লক্ষ্য যাই হোক না কেন—তারা জ্যাঙ্ক এড়াতে অ্যানিমেশনের প্রয়োজন এমন অনেকগুলি ফ্রেম তৈরি করা, অথবা যত তাড়াতাড়ি সম্ভব ইউজার ইন্টারফেসে একটি বিচ্ছিন্ন ভিজ্যুয়াল পরিবর্তন তৈরি করা - ব্রাউজারের পিক্সেল পাইপলাইন কীভাবে কাজ করে তা বোঝা আপনার কাজের জন্য অপরিহার্য।
পিক্সেল পাইপলাইন
ওয়েব ডেভেলপার হিসাবে আপনার কাজ করার সময় আপনাকে যে পাঁচটি প্রধান ক্ষেত্র সম্পর্কে জানতে হবে এবং মনে রাখতে হবে। এই পাঁচটি ক্ষেত্র হল সেইগুলি যেগুলির উপর আপনার সবচেয়ে বেশি নিয়ন্ত্রণ রয়েছে এবং প্রতিটিই পিক্সেল-টু-স্ক্রিন পাইপলাইনের একটি মূল পয়েন্ট উপস্থাপন করে:
- জাভাস্ক্রিপ্ট: জাভাস্ক্রিপ্ট সাধারণত এমন কাজ পরিচালনা করতে ব্যবহৃত হয় যা ব্যবহারকারীর ইন্টারফেসে দৃশ্যমান পরিবর্তন ঘটায়। উদাহরণস্বরূপ, এটি jQuery এর
animateফাংশন হতে পারে, একটি ডেটাসেট বাছাই করা বা পৃষ্ঠায় DOM উপাদান যোগ করা। ভিজ্যুয়াল পরিবর্তনগুলি ট্রিগার করার জন্য JavaScript কঠোরভাবে প্রয়োজনীয় নয়, যদিও: CSS অ্যানিমেশন , CSS ট্রানজিশন এবং ওয়েব অ্যানিমেশন API পৃষ্ঠার বিষয়বস্তু অ্যানিমেট করতে সক্ষম৷ - স্টাইল গণনা: এটি হল সিএসএস নিয়মগুলি নির্ধারণ করার প্রক্রিয়া যা মিলিত নির্বাচকদের উপর ভিত্তি করে কোন HTML উপাদানগুলিতে প্রযোজ্য। উদাহরণ স্বরূপ,
.headlineহল একটি CSS নির্বাচকের একটি উদাহরণ যা একটিclassঅ্যাট্রিবিউট মান সহ যেকোন HTML এলিমেন্টের ক্ষেত্রে প্রযোজ্য হয় যেখানেheadlineএকটি শ্রেণী রয়েছে। সেখান থেকে, নিয়মগুলি জানা হয়ে গেলে, সেগুলি প্রয়োগ করা হয় এবং প্রতিটি উপাদানের জন্য চূড়ান্ত শৈলীগুলি গণনা করা হয়। - লেআউট: ব্রাউজার একবার জানলে কোন উপাদানের জন্য কোন নিয়মগুলি প্রযোজ্য তা পৃষ্ঠার জ্যামিতি গণনা করা শুরু করতে পারে, যেমন কতটা স্থান উপাদানগুলি নেয় এবং সেগুলি স্ক্রিনে কোথায় উপস্থিত হয়৷ ওয়েবের লেআউট মডেলের অর্থ হল একটি উপাদান অন্যকে প্রভাবিত করতে পারে। উদাহরণ স্বরূপ,
<body>উপাদানটির প্রস্থ সাধারণত গাছের উপরে এবং নিচের দিকের শিশু উপাদানগুলির মাত্রাকে প্রভাবিত করে, তাই ব্রাউজারের জন্য প্রক্রিয়াটি বেশ জড়িত হতে পারে। - পেইন্ট: পেইন্টিং হল পিক্সেল পূরণ করার প্রক্রিয়া। এটিতে পাঠ্য, রঙ, চিত্র, সীমানা, ছায়া এবং উপাদানগুলির প্রতিটি চাক্ষুষ দিক অঙ্কন করা হয় পৃষ্ঠায় তাদের বিন্যাস গণনা করার পরে। অঙ্কনটি সাধারণত একাধিক পৃষ্ঠের উপর করা হয়, যাকে প্রায়ই স্তর বলা হয়।
- কম্পোজিট: যেহেতু পৃষ্ঠার অংশগুলি সম্ভাব্যভাবে একাধিক স্তরে আঁকা হয়েছিল, সেগুলিকে সঠিক ক্রমে স্ক্রিনে প্রয়োগ করতে হবে যাতে পৃষ্ঠাটি প্রত্যাশিতভাবে রেন্ডার হয়৷ এটি অন্য উপাদানগুলির জন্য বিশেষভাবে গুরুত্বপূর্ণ, কারণ একটি ভুলের ফলে একটি উপাদান অন্যটির উপরে ভুলভাবে প্রদর্শিত হতে পারে।
পিক্সেল পাইপলাইনের এই অংশগুলির প্রতিটি অ্যানিমেশনে জ্যাঙ্ক প্রবর্তনের একটি সুযোগ উপস্থাপন করে, অথবা ফ্রেমের পেইন্টিংকে বিলম্বিত করে এমনকি ইউজার ইন্টারফেসে বিচ্ছিন্ন ভিজ্যুয়াল পরিবর্তনের জন্যও। তাই আপনার কোড ট্রিগার করা পাইপলাইনের ঠিক কোন অংশগুলি বুঝতে হবে এবং আপনি আপনার পরিবর্তনগুলিকে শুধুমাত্র পিক্সেল পাইপলাইনের অংশগুলিতে সীমাবদ্ধ করতে পারেন কিনা তা তদন্ত করা গুরুত্বপূর্ণ যা সেগুলি রেন্ডার করার জন্য প্রয়োজনীয়৷
আপনি "পেইন্ট" এর সাথে একযোগে ব্যবহৃত "রাস্টারাইজ" শব্দটি শুনে থাকতে পারেন। কারণ পেইন্টিং আসলে দুটি কাজ:
- ড্র কলের একটি তালিকা তৈরি করা হচ্ছে।
- পিক্সেল ভর্তি.
পরেরটিকে "রাস্টারাইজেশন" বলা হয়, তাই যখনই আপনি DevTools-এ পেইন্ট রেকর্ডগুলি দেখতে পান, তখন আপনার এটিকে রাস্টারাইজেশন সহ ভাবতে হবে। কিছু আর্কিটেকচারে, ড্র কলের তালিকা তৈরি করা এবং রাস্টারাইজেশন বিভিন্ন থ্রেডে করা হয়, কিন্তু এটি একজন বিকাশকারী হিসাবে আপনার নিয়ন্ত্রণে নয়।
আপনি সর্বদা অগত্যা প্রতিটি ফ্রেমে পাইপলাইনের প্রতিটি অংশ স্পর্শ করবেন না। প্রকৃতপক্ষে, জাভাস্ক্রিপ্ট, CSS বা ওয়েব অ্যানিমেশন এপিআই-এর মাধ্যমে আপনি যখন ভিজ্যুয়াল পরিবর্তন করেন তখন একটি প্রদত্ত ফ্রেমের জন্য পাইপলাইনটি সাধারণত তিনটি উপায়ে চলে।
1. JS / CSS > স্টাইল > লেআউট > পেইন্ট > কম্পোজিট
আপনি যদি একটি "লেআউট" বৈশিষ্ট্য পরিবর্তন করেন, যেমন একটি উপাদানের জ্যামিতি যেমন প্রস্থ, উচ্চতা বা তার অবস্থান (যেমন left বা top CSS বৈশিষ্ট্যগুলি) পরিবর্তন করে, ব্রাউজারটিকে অন্যান্য সমস্ত উপাদান পরীক্ষা করতে হবে এবং পৃষ্ঠাটিকে "রিফ্লো" করতে হবে। . যেকোনও ক্ষতিগ্রস্ত এলাকায় পুনরায় রং করতে হবে, এবং চূড়ান্ত আঁকা উপাদানগুলোকে আবার একত্রিত করতে হবে।
2. JS / CSS > স্টাইল > পেইন্ট > কম্পোজিট
যদি আপনি CSS-এ একটি উপাদানের জন্য একটি "শুধুমাত্র পেইন্ট" বৈশিষ্ট্য পরিবর্তন করেন-উদাহরণস্বরূপ, background-image , color বা box-shadow মতো বৈশিষ্ট্যগুলি -লেআউট ধাপটি পৃষ্ঠায় একটি ভিজ্যুয়াল আপডেট করার জন্য প্রয়োজনীয় নয়। লেআউট ধাপটি বাদ দিয়ে—যেখানে সম্ভব—আপনি সম্ভাব্য ব্যয়বহুল লেআউট কাজ এড়িয়ে যান যা অন্যথায় পরবর্তী ফ্রেম তৈরিতে উল্লেখযোগ্য বিলম্বে অবদান রাখতে পারে।
3. JS / CSS > স্টাইল > কম্পোজিট
আপনি যদি এমন একটি সম্পত্তি পরিবর্তন করেন যার জন্য লেআউট বা পেইন্টের প্রয়োজন হয় না , তাহলে ব্রাউজার সরাসরি কম্পোজিটিং ধাপে যেতে পারে। এটি একটি পৃষ্ঠার জীবনচক্রে উচ্চ চাপের পয়েন্টগুলির জন্য পিক্সেল পাইপলাইনের মাধ্যমে সবচেয়ে সস্তা এবং সবচেয়ে পছন্দসই পথ, যেমন অ্যানিমেশন বা স্ক্রোলিং। মজার ঘটনা: ক্রোমিয়াম পৃষ্ঠার স্ক্রোলিংকে অপ্টিমাইজ করে যাতে এটি শুধুমাত্র কম্পোজিটর থ্রেডে ঘটে যেখানে সম্ভব হয়, যার অর্থ হল একটি পৃষ্ঠা প্রতিক্রিয়া না দিলেও, আপনি এখনও পৃষ্ঠাটি স্ক্রোল করতে এবং এর অংশগুলি দেখতে সক্ষম হন যা আগে আঁকা হয়েছিল পর্দাটি.
ওয়েব পারফরম্যান্স হল কাজকে এড়িয়ে চলার শিল্প, যেখানে যতটা সম্ভব প্রয়োজনীয় কাজের দক্ষতা বৃদ্ধি করা। অনেক ক্ষেত্রে, এটি ব্রাউজারের সাথে কাজ করার বিষয়ে, এটির বিরুদ্ধে নয়। এটা মনে রাখা মূল্যবান যে পাইপলাইনে পূর্বে দেখানো কাজ গণনামূলক খরচের ক্ষেত্রে ভিন্ন; কিছু কাজ অন্যদের তুলনায় সহজাতভাবে বেশি ব্যয়বহুল!
আসুন পাইপলাইনের বিভিন্ন অংশে একটি ডুব দেওয়া যাক। আমরা সাধারণ সমস্যাগুলির দিকে নজর দেব, সেইসাথে কীভাবে সেগুলি নির্ণয় এবং ঠিক করা যায়৷
ব্রাউজার রেন্ডারিং অপ্টিমাইজেশান
পারফরম্যান্স ব্যবহারকারীদের কাছে গুরুত্বপূর্ণ, এবং ভাল ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে, ওয়েব ডেভেলপারদের এমন ওয়েবসাইট তৈরি করতে হবে যা ব্যবহারকারীর মিথস্ক্রিয়ায় দ্রুত প্রতিক্রিয়া জানায় এবং মসৃণভাবে রেন্ডার করে। পারফরম্যান্স বিশেষজ্ঞ পল লুইস আপনাকে জ্যাঙ্ক ধ্বংস করতে এবং প্রতি সেকেন্ডে 60টি ফ্রেম বজায় রাখে এমন ওয়েব অ্যাপ তৈরি করতে সহায়তা করতে এখানে আছেন। অ্যাপগুলি প্রোফাইল করার জন্য আপনার প্রয়োজনীয় সরঞ্জামগুলির সাথে আপনি এই কোর্সটি ছেড়ে দেবেন এবং সাবঅপ্টিমাল রেন্ডারিং পারফরম্যান্সের কারণগুলি সনাক্ত করবেন৷ আপনি ব্রাউজারের রেন্ডারিং পাইপলাইনটিও অন্বেষণ করবেন এবং প্যাটার্নগুলি উন্মোচন করবেন যা দ্রুত ওয়েবসাইটগুলি তৈরি করা সহজ করে যা ব্যবহারকারীদের ব্যবহার করা আনন্দদায়ক হবে৷
এটি Udacity-এর মাধ্যমে অফার করা একটি বিনামূল্যের কোর্স, এবং আপনি যেকোনো সময় এটি নিতে পারেন।