জাভাস্ক্রিপ্ট প্রায়ই চাক্ষুষ পরিবর্তন ট্রিগার. কখনও কখনও এটি সরাসরি স্টাইল ম্যানিপুলেশনের মাধ্যমে হয়, এবং কখনও কখনও এটি এমন গণনা যা ভিজ্যুয়াল পরিবর্তনের ফলে হয়, যেমন ডেটা অনুসন্ধান বা বাছাই করা। খারাপ সময় বা দীর্ঘমেয়াদী জাভাস্ক্রিপ্ট কর্মক্ষমতা সমস্যার একটি সাধারণ কারণ। আপনি যেখানে পারেন তার প্রভাব কমাতে দেখা উচিত।
জাভাস্ক্রিপ্ট প্রায়ই চাক্ষুষ পরিবর্তন ট্রিগার. কখনও কখনও এটি সরাসরি স্টাইল ম্যানিপুলেশনের মাধ্যমে হয়, এবং কখনও কখনও এটি এমন গণনা যা ভিজ্যুয়াল পরিবর্তনের ফলে হয়, যেমন ডেটা অনুসন্ধান বা বাছাই করা। খারাপ সময় বা দীর্ঘমেয়াদী জাভাস্ক্রিপ্ট কর্মক্ষমতা সমস্যার একটি সাধারণ কারণ। আপনি যেখানে পারেন তার প্রভাব কমাতে দেখা উচিত।
জাভাস্ক্রিপ্ট পারফরম্যান্স প্রোফাইলিং একটি শিল্পের কিছু হতে পারে, কারণ আপনি যে জাভাস্ক্রিপ্ট লিখছেন তা আসলে কার্যকর করা কোডের মতো কিছুই নয়। আধুনিক ব্রাউজারগুলি জেআইটি কম্পাইলার এবং সমস্ত ধরণের অপ্টিমাইজেশান এবং কৌশলগুলি ব্যবহার করে এবং আপনাকে দ্রুততম কার্যকর কার্যকর করার চেষ্টা করে এবং এটি কোডের গতিশীলতাকে উল্লেখযোগ্যভাবে পরিবর্তন করে।
যাইহোক, সমস্ত কিছুর সাথে, আপনার অ্যাপগুলিকে জাভাস্ক্রিপ্ট ভালভাবে কার্যকর করতে সহায়তা করার জন্য আপনি অবশ্যই কিছু করতে পারেন।
সারসংক্ষেপ
- ভিজ্যুয়াল আপডেটের জন্য setTimeout বা setInterval এড়িয়ে চলুন; পরিবর্তে সবসময় requestAnimationFrame ব্যবহার করুন।
- ওয়েব ওয়ার্কার্সে প্রধান থ্রেড থেকে দীর্ঘ-চলমান জাভাস্ক্রিপ্ট সরান।
- বিভিন্ন ফ্রেমে DOM পরিবর্তন করতে মাইক্রো-টাস্ক ব্যবহার করুন।
- JavaScript এর প্রভাব মূল্যায়ন করতে Chrome DevTools এর টাইমলাইন এবং JavaScript প্রোফাইলার ব্যবহার করুন।
ভিজ্যুয়াল পরিবর্তনের জন্য requestAnimationFrame ব্যবহার করুন
যখন স্ক্রিনে চাক্ষুষ পরিবর্তন ঘটছে তখন আপনি ব্রাউজারের জন্য সঠিক সময়ে আপনার কাজটি করতে চান, যা ফ্রেমের শুরুতে থাকে। একটি ফ্রেমের শুরুতে আপনার জাভাস্ক্রিপ্ট চালানোর নিশ্চয়তা দেওয়ার একমাত্র উপায় হল requestAnimationFrame ব্যবহার করা।
/**
* If run as a requestAnimationFrame callback, this
* will be run at the start of the frame.
*/
function updateScreen(time) {
// Make visual updates here.
}
requestAnimationFrame(updateScreen);
ফ্রেমওয়ার্ক বা নমুনাগুলি অ্যানিমেশনের মতো ভিজ্যুয়াল পরিবর্তনগুলি করতে setTimeout বা setInterval ব্যবহার করতে পারে, কিন্তু এর সাথে সমস্যা হল যে কলব্যাক ফ্রেমের কিছু সময়ে চলবে, সম্ভবত ঠিক শেষের দিকে, এবং এটি প্রায়শই আমাদের কারণ হতে পারে একটি ফ্রেম মিস, জ্যাংক ফলে.
আসলে, jQuery তার animate আচরণের জন্য setTimeout ব্যবহার করত। এটি 3 সংস্করণে requestAnimationFrame ব্যবহার করার জন্য পরিবর্তন করা হয়েছে। আপনি যদি jQuery-এর পুরোনো সংস্করণ ব্যবহার করেন, তাহলে আপনি requestAnimationFrame ব্যবহার করার জন্য এটি প্যাচ করতে পারেন, যা দৃঢ়ভাবে পরামর্শ দেওয়া হয়।
জটিলতা হ্রাস করুন বা ওয়েব ওয়ার্কার ব্যবহার করুন
জাভাস্ক্রিপ্ট ব্রাউজারের মূল থ্রেডে চলে, ঠিক শৈলী গণনা, লেআউট এবং অনেক ক্ষেত্রে পেইন্টের পাশাপাশি। যদি আপনার জাভাস্ক্রিপ্ট দীর্ঘ সময়ের জন্য চলে, তবে এটি এই অন্যান্য কাজগুলিকে ব্লক করবে, যার ফলে ফ্রেমগুলি মিস হওয়ার সম্ভাবনা রয়েছে৷
জাভাস্ক্রিপ্ট কখন এবং কতক্ষণ চলবে সে সম্পর্কে আপনার কৌশলী হওয়া উচিত। উদাহরণস্বরূপ, আপনি যদি স্ক্রোলিং-এর মতো অ্যানিমেশনে থাকেন, তাহলে আপনার জাভাস্ক্রিপ্টকে 3-4ms এর অঞ্চলে রাখতে আদর্শভাবে চেষ্টা করা উচিত। এর চেয়ে বেশি সময় এবং আপনি খুব বেশি সময় নেওয়ার ঝুঁকি নিয়ে থাকেন। আপনি যদি একটি অলস সময়ের মধ্যে থাকেন, তাহলে আপনি সময় নিয়ে আরও স্বস্তি পেতে পারেন।
অনেক ক্ষেত্রে আপনি বিশুদ্ধ গণনামূলক কাজকে ওয়েব ওয়ার্কার- এ স্থানান্তর করতে পারেন, যদি, উদাহরণস্বরূপ, এটির জন্য DOM অ্যাক্সেসের প্রয়োজন না হয়। ডেটা ম্যানিপুলেশন বা ট্রাভার্সাল, যেমন বাছাই বা অনুসন্ধান, প্রায়শই এই মডেলের জন্য ভাল ফিট হয়, যেমন লোডিং এবং মডেল জেনারেশন।
var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);
// The main thread is now free to continue working on other things...
dataSortWorker.addEventListener('message', function(evt) {
var sortedData = evt.data;
// Update data on screen...
});
সমস্ত কাজ এই মডেলের সাথে মানানসই হতে পারে না: ওয়েব ওয়ার্কারদের DOM অ্যাক্সেস নেই৷ যেখানে আপনার কাজটি অবশ্যই মূল থ্রেডে থাকতে হবে, সেখানে একটি ব্যাচিং পদ্ধতি বিবেচনা করুন, যেখানে আপনি বৃহত্তর টাস্কটিকে মাইক্রো-টাস্কে ভাগ করুন, প্রতিটিটি কয়েক মিলিসেকেন্ডের বেশি সময় নেয় না এবং প্রতিটি ফ্রেমে requestAnimationFrame হ্যান্ডলারের ভিতরে চলে।
এই পদ্ধতির UX এবং UI ফলাফল রয়েছে, এবং আপনাকে নিশ্চিত করতে হবে যে ব্যবহারকারী জানেন যে একটি কাজ প্রক্রিয়া করা হচ্ছে, হয় অগ্রগতি বা কার্যকলাপ নির্দেশক ব্যবহার করে । যাই হোক না কেন এই পদ্ধতিটি আপনার অ্যাপের মূল থ্রেডকে মুক্ত রাখবে, এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতি প্রতিক্রিয়াশীল থাকতে সাহায্য করবে।
আপনার জাভাস্ক্রিপ্টের "ফ্রেম ট্যাক্স" জানুন
একটি ফ্রেমওয়ার্ক, লাইব্রেরি বা আপনার নিজের কোডের মূল্যায়ন করার সময়, ফ্রেম-বাই-ফ্রেমের ভিত্তিতে জাভাস্ক্রিপ্ট কোড চালানোর জন্য কত খরচ হয় তা মূল্যায়ন করা গুরুত্বপূর্ণ। ট্রানজিশন বা স্ক্রোলিং এর মত কর্মক্ষমতা-সমালোচনামূলক অ্যানিমেশন কাজ করার সময় এটি বিশেষভাবে গুরুত্বপূর্ণ।
Chrome DevTools-এর পারফরম্যান্স প্যানেল হল আপনার JavaScript-এর খরচ পরিমাপ করার সর্বোত্তম উপায়৷ সাধারণত আপনি নিম্ন-স্তরের রেকর্ড পান:
প্রধান বিভাগটি জাভাস্ক্রিপ্ট কলগুলির একটি ফ্লেম চার্ট সরবরাহ করে যাতে আপনি ঠিক কোন ফাংশনগুলিকে কল করা হয়েছিল এবং প্রতিটি কতক্ষণ সময় নিয়েছিল তা বিশ্লেষণ করতে পারেন৷
এই তথ্য দিয়ে সজ্জিত আপনি আপনার অ্যাপ্লিকেশনে জাভাস্ক্রিপ্টের কার্যক্ষমতার প্রভাব মূল্যায়ন করতে পারেন এবং যেকোন হটস্পটগুলি খুঁজে বের করতে এবং ঠিক করতে শুরু করতে পারেন যেখানে ফাংশনগুলি কার্যকর করতে খুব বেশি সময় নিচ্ছে৷ পূর্বে উল্লিখিত হিসাবে আপনার হয় দীর্ঘ-চলমান জাভাস্ক্রিপ্ট অপসারণ করা উচিত, অথবা, যদি এটি সম্ভব না হয়, অন্য কাজগুলি চালিয়ে যাওয়ার জন্য মূল থ্রেডটি মুক্ত করে একটি ওয়েব ওয়ার্কারের কাছে নিয়ে যান।
পারফরম্যান্স প্যানেল কীভাবে ব্যবহার করবেন তা শিখতে রানটাইম পারফরম্যান্স বিশ্লেষণের সাথে শুরু করুন দেখুন।
আপনার জাভাস্ক্রিপ্ট মাইক্রো-অপ্টিমাইজ করা এড়িয়ে চলুন
এটা জেনে ভালো লাগতে পারে যে ব্রাউজার একটি জিনিসের একটি সংস্করণ অন্য জিনিসের চেয়ে 100 গুণ দ্রুত চালাতে পারে, যেমন একটি উপাদানের offsetTop অনুরোধ করা getBoundingClientRect() কম্পিউটিংয়ের চেয়ে দ্রুত, কিন্তু এটি প্রায় সবসময়ই সত্য যে আপনি শুধুমাত্র ফাংশন কল করবেন প্রতি ফ্রেমে অল্প সংখ্যক বার এর মতো, তাই জাভাস্ক্রিপ্টের কর্মক্ষমতার এই দিকটির উপর ফোকাস করার প্রচেষ্টা সাধারণত নষ্ট হয়। আপনি সাধারণত শুধুমাত্র মিলিসেকেন্ডের ভগ্নাংশ সংরক্ষণ করবেন।
আপনি যদি একটি গেম বা একটি গণনামূলকভাবে ব্যয়বহুল অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি সম্ভবত এই নির্দেশিকাটির ব্যতিক্রম হতে পারেন, কারণ আপনি সাধারণত একটি একক ফ্রেমে প্রচুর গণনা ফিট করবেন এবং সেক্ষেত্রে সবকিছুই সাহায্য করে৷
সংক্ষেপে, আপনি মাইক্রো-অপ্টিমাইজেশন সম্পর্কে খুব সতর্ক হওয়া উচিত কারণ তারা সাধারণত আপনি যে ধরনের অ্যাপ্লিকেশন তৈরি করছেন তার সাথে মানচিত্র তৈরি করবে না।