জাভাস্ক্রিপ্ট দিয়ে পারফরম্যান্ট "ভিউপোর্ট ডাইমেনশন" মিনি-অ্যাপ তৈরি করুন

এই বिगিনার-ফ্রেন্ডলি টিউটোরিয়ালে আপনি শিখবেন উচ্চ-পারফরম্যান্স উইন্ডো ইভেন্ট লিখার কৌশল যা ইউজারের হার্ডওয়্যারকে ধ্বংস করবে না।

প্রজেক্ট ওভারভিউ: ভিউপোর্ট ডাইমেনশন

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

শিখবেন কি কি:

• createElement() মেথড দিয়ে এলিমেন্ট তৈরি
• Style object দিয়ে স্টাইলিং
• Window Object-এর resize ইভেন্ট সেটআপ
• innerWidth ও innerHeight প্রপার্টি থেকে ডাইমেনশন পেতে
• কলব্যাক ফাংশন, কন্ডিশনাল স্টেটমেন্ট, setTimeout(), clearTimeout()
• ইভেন্ট থ্রটলিং দিয়ে পারফরম্যান্স বাড়ানো
• MS এবং FPS (মিলিসেকেন্ড ও ফ্রেম পার সেকেন্ড) এর সম্পর্ক
• Perceived Performance (বোঝাপড়া পারফরম্যান্স) এবং Hardware Performance (হার্ডওয়্যার পারফরম্যান্স) এর পার্থক্য

অ্যাপের দুই সংস্করণ

• ভার্সন ১: বেসিক ফাংশনালিটি — কাজ করে কিন্তু অপ্টিমাইজড নয়।
• ভার্সন ২: পারফরম্যান্স, এনার্জি ইফিশিয়েন্সি এবং কোড রিডেবিলিটির ওপর ফোকাস।

সব কোড জাভাস্ক্রিপ্টে লিখব যাতে কোনো প্রজেক্টে সহজে যোগ করা যায়। বिगিনাররা CodePen ফলো করতে পারেন।

ভার্সন ১.০: বেসিক বিল্ড

প্রয়োজনীয়তা

• উইন্ডো প্রস্থ ও উচ্চতা দেখানোর কন্টেইনার
• উপরের ডানে ফিক্সড পজিশন
• ডিফল্টলুক লুকানো থাকবে
• রিসাইজ শুরু হলে দেখাবে
• রিসাইজ বন্ধ হওয়ার ৩ সেকেন্ড পর লুকাবে

ডিসপ্লে কন্টেইনার তৈরি ও স্টাইলিং

var viewportDimensions = document.createElement("div");

Style object দিয়ে ইনলাইন স্টাইল দিন:

viewportDimensions.style.position = "fixed";
viewportDimensions.style.right = "0";
viewportDimensions.style.top = "0";
viewportDimensions.style.padding = "16px";
viewportDimensions.style.zIndex = "3";
viewportDimensions.style.fontSize = "22px";

body এলিমেন্টে অ্যাপেন্ড করুন:

var body = document.querySelector("body");
body.appendChild(viewportDimensions);

উইন্ডো রিসাইজ ইভেন্ট সেটআপ

window.addEventListener("resize", function() {
  // রিসাইজ হলে এক্সিকিউট होने वाला কোড
});

ভিউপোর্ট প্রস্থ ও উচ্চতা পেতে

window.addEventListener("resize", function() {
  var width = window.innerWidth;
  var height = window.innerHeight;
});

মানগুলো ডিভে দেখান

viewportDimensions.textContent = width + "px x " + height + "px";

৩ সেকেন্ড পর লুকানোর টাইমার

function removeViewportDimensions() {
  viewportDimensions.style.display = "none";
}

setTimeout(removeViewportDimensions, 3000);

সমস্যা: ফ্লিকারিং (Flickering)

রিসাইজ চলাকালিন বারবার setTimeout কল হওয়ায় ডিভটি চমকে। সমাধান: clearTimeout() দিয়ে টাইমার রিসেট করুন।

টাইমার রিসেট করার উপায়

var resizeTimeout;

clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(removeViewportDimensions, 3000);

এখন ফ্লিকারিং বন্ধ। ভার্সন ১ সম্পন্ন।

ভার্সন ২: পারফরম্যান্স অপ্টিমাইজেশন

দুই ধরণের পারফরম্যান্স

• Perceived Performance: ইউজার অভিজ্ঞতা (UX) — কতটা স্মুথ লাগে।
• Hardware Performance: CPU/GPU ব্যবহার — কতটা রিসোর্স খায়।

ভার্সন ১ UX-তে ভালো কিন্তু হার্ডওয়্যারের জন্য খুব খারাপ। রিসাইজ ইভেন্ট সেকেন্ডে সैकরা এক্সিকিউট হয়।

ইভেন্ট থ্রটলিং (Event Throttling)

এক ফাংশন কতবার এক্সিকিউট হবে সেটি কন্ট্রোল করার কৌশল। উদাহরণ: "প্রতি ১০০ মিলিসেকেন্ডে একবার"।

বেসিক থ্রটলার ফাংশন

var throttled;
var delay = 100;

function functionToExecute() {
  console.log("Executed!");
}

function throttler() {
  if (!throttled) {
    functionToExecute();
    throttled = true;
    setTimeout(function() {
      throttled = false;
    }, delay);
  }
}

window.addEventListener("resize", throttler);

কীভাবে কাজ করে:

• throttled ভেরিয়েবল ডিফল্ট undefined (falsy) থাকে।
• প্রথম কলেও if (!throttled) সত্য হলে ফাংশন চলে।
• তারপর throttled = true করে ব্লক করে দেয়।
• delay মিলিসেকেন্ড পর setTimeout দিয়ে আবার false করে দেয়।

আমাদের প্রজেক্টে থ্রটলার যুক্ত করুন

রিফ্যাক্টরিং করে getViewportDimensions() নামক ফাংশন বানান:

function getViewportDimensions() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  viewportDimensions.textContent = width + "px x " + height + "px";
  viewportDimensions.style.display = "block";
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(removeViewportDimensions, 3000);
}

থ্রটলারে কলব্যাক হিসেবে এটি ব্যবহার করুন:

function throttler() {
  if (!throttled) {
    getViewportDimensions();
    throttled = true;
    setTimeout(function() {
      throttled = false;
    }, delay);
  }
}

window.addEventListener("resize", throttler);

হার্ডওয়্যার vs পারসিভড পারফরম্যান্স

থ্রটলিং যোগ করার পর রেন্ডারিং একটু ল্যাগি লাগতে পারে (১০ FPS)। ১৫ FPS (৬৬ ms) এ নেওয়া উচিত।

FPS এবং মিলিসেকেন্ডের সম্পর্ক

1000 / 15 = 66ms (15 FPS)
1000 / 30 = 33ms (30 FPS)
1000 / 60 = 16ms (60 FPS)

১৫ FPS повечеतर ডিভাইসে স্মুথ লাগে এবং CPU ব্যবহার ৭৫% কমায়। এটি Minimum Effective Dose (MED) — প্রয়োজনীয়তানুসারে সর্বনিম্ন রিসোর্স ব্যবহার।

ফাইনাল টাচ: IIFE ও Strict Mode

(function() {
  "use strict";
  // সব কোড এখানে
})();

IIFE (Immediately-Invoked Function Expression) গ্লোবাল নেমস্পেস দূষণ রোধ করে। use strict স্ট্রিক্ট মোড চালু করে।

সম্পূর্ণ কোড (ভার্সন ২)

(function() {
  "use strict";
  var throttled;
  var delay = 66; // 15 FPS
  var resizeTimeout;
  var body = document.querySelector("body");
  var viewportDimensions = document.createElement("div");

  viewportDimensions.style.position = "fixed";
  viewportDimensions.style.right = 0;
  viewportDimensions.style.top = 0;
  viewportDimensions.style.padding = "16px";
  viewportDimensions.style.zIndex = 3;
  viewportDimensions.style.fontSize = "22px";

  body.appendChild(viewportDimensions);

  function getViewportDimensions() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    viewportDimensions.textContent = width + "px x " + height + "px";
    viewportDimensions.style.display = "block";
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(removeViewportDimensions, 3000);
  }

  function removeViewportDimensions() {
    viewportDimensions.style.display = "none";
  }

  function throttler() {
    if (!throttled) {
      getViewportDimensions();
      throttled = true;
      setTimeout(function() {
        throttled = false;
      }, delay);
    }
  }

  window.addEventListener("resize", throttler);
})();

ব্যবহার কীভাবে করবেন

HTML-এ <script src="/js/get-viewport-dimensions.js"></script> যোগ করুন।

ব্রাউজার কম্প্যাটিবিলিটি

সকল মডার্ন ব্রাউজার এবং IE ৯+ सपোর্ট করে।

অ্যাডভান্সড থ্রটলিং

জটিল প্রজেক্টের জন্য Lodash লাইব্রেরির _.throttle বা _.debounce ব্যবহার করুন।