(আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনকে দ্রুততর, মসৃণ এবং আরও কার্যকর করে তোলা)
জাভাস্ক্রিপ্ট ব্রাউজারে চলে। খারাপ পারফরম্যান্সের কারণে হতে পারে:
আপনার কোড অপ্টিমাইজ করলে নিশ্চিত হয়:
for (let i = 0; i < 1000; i++) {
const div = document.createElement("div");
document.body.appendChild(div);
}const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement("div");
fragment.appendChild(div);
}
document.body.appendChild(fragment);DocumentFragment ব্যবহার করলে লেআউট রিক্যালকুলেশন এবং রিপেইন্টিং কমে।
function debounce(fn, delay) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(fn, delay);
};
}
window.addEventListener("resize", debounce(() => {
console.log("Resized!");
}, 300));function throttle(fn, limit) {
let lastCall = 0;
return function () {
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
fn();
}
};
}for (let i = 0; i < array.length; i++) {
if (array.length > 0) { /* অপ্রয়োজনীয় চেক */ }
}const len = array.length;
for (let i = 0; i < len; i++) {
// ...
}এছাড়াও, সম্ভব হলে নেস্টেড লুপ এড়িয়ে চলুন বা map(), filter(), বা reduce() কার্যকরভাবে ব্যবহার করুন।
Set ব্যবহার করুন।Map ব্যবহার করুন।শুধু যা দরকার তাই লোড করুন।
button.addEventListener("click", async () => {
const { heavyFunction } = await import("./heavy.js");
heavyFunction();
});প্রাথমিক লোড কমাতে বড় জাভাস্ক্রিপ্ট বান্ডেলকে ছোট ছোট চাঙ্কে ভাগ করুন।
মিনিফিকেশন হোয়াইটস্পেস, কমেন্ট সরায় এবং ভেরিয়েবলের নাম ছোট করে।
এই ধরনের টুল ব্যবহার করুন:
mode: 'production'-সহ Webpackআপনার সার্ভারে Gzip বা Brotli কম্প্রেশনও চালু করুন।
element.removeEventListener("click", handler);
element = null;| কৌশল | সুবিধা |
|---|---|
DocumentFragment | কম DOM আপডেট |
debounce() / throttle() | আরও মসৃণ ইভেন্ট হ্যান্ডলিং |
Map / Set | বড় ডেটাতে ভালো পারফরম্যান্স |
| Lazy loading | দ্রুত প্রাথমিক পেজ লোড |
| JS মিনিফাই ও কমপ্রেস করা | ছোট ডাউনলোড সাইজ |
দক্ষ জাভাস্ক্রিপ্ট শুধু দ্রুতই নয় — এটি স্মার্ট এবং স্কেলেবলও বটে।
DocumentFragment ব্যবহার করতে রূপান্তর করুন।scroll বা resize ইভেন্টে debounce প্রয়োগ করুন।Set ব্যবহার করুন।import() ফাংশন তৈরি করুন।