জাভাস্ক্রিপ্ট এক্সিকিউশন অপ্টিমাইজ করুন

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

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

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

যাইহোক, সমস্ত কিছুর সাথে, আপনার অ্যাপগুলিকে জাভাস্ক্রিপ্ট ভালভাবে কার্যকর করতে সহায়তা করার জন্য আপনি অবশ্যই কিছু করতে পারেন।

সারাংশ

• ভিজ্যুয়াল আপডেটের জন্য 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 ব্যবহার করতে পারে, কিন্তু এর সাথে সমস্যা হল যে কলব্যাক ফ্রেমের কিছু সময়ে চলবে, সম্ভবত শেষের দিকে, এবং এটি প্রায়শই আমাদের একটি ফ্রেম মিস করার প্রভাব ফেলতে পারে, যার ফলে জ্যাঙ্ক হতে পারে৷