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

একটি শিক্ষানবিস-বান্ধব এবং ব্যবহারিক ভ্যানিলা জাভাস্ক্রিপ্ট টিউটোরিয়াল। বড় টেকঅওয়ে:কিভাবে উচ্চ-পারফরম্যান্স উইন্ডো ইভেন্ট লিখতে হয় যা আমাদের ব্যবহারকারীদের হার্ডওয়্যারকে হত্যা করবে না৷

এর জন্য:সম্পূর্ণ বিগিনার থেকে ইন্টারমিডিয়েট

আজ আমরা "ভিউপোর্ট ডাইমেনশন" নামে একটি গৌরবময় ছোট অ্যাপ তৈরি করছি এই বৈশিষ্ট্যটি একটি জিনিস সত্যিই ভাল করে:আপনি যখন আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করেন তখন এটি আপনার ব্রাউজার ভিউপোর্টের প্রস্থ এবং উচ্চতার মানগুলি প্রদর্শন করে৷

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

ভিউপোর্টের মাত্রা

আমি আপনার বিদ্যমান জ্ঞান সম্পর্কে অনুমান করতে চাই না। ফলস্বরূপ, এটি একটি অত্যন্ত বিস্তারিত৷ টিউটোরিয়াল।

প্রযুক্তিগত বিষয়:

• কিভাবে createElement() দিয়ে উপাদান তৈরি করবেন পদ্ধতি।
• কিভাবে Style object দিয়ে এলিমেন্ট স্টাইল করবেন
• কিভাবে উইন্ডো অবজেক্টের resize সেটআপ এবং ব্যবহার করবেন ঘটনা।
• কিভাবে আপনার ব্রাউজার ভিউপোর্ট থেকে innerWidth দিয়ে প্রস্থ এবং উচ্চতা পাবেন এবং innerHeight বৈশিষ্ট্য।
• কিভাবে ফাংশনের বাইরে ফাংশন কল করবেন (কলব্যাক)।
• কত শর্তযুক্ত (সত্য/মিথ্যা)if বিবৃতি কাজ করে।
• কীভাবে setTimeout() ব্যবহার করে টাইমার দিয়ে কোড এক্সিকিউশন বিলম্বিত করবেন
• কিভাবে clearTimeout() দিয়ে টাইমার রিসেট করবেন .
• কিভাবে একটি ইভেন্ট থ্রটলার ফাংশন ব্যবহার করবেন উইন্ডো ইভেন্টের কর্মক্ষমতা নাটকীয়ভাবে উন্নত করতে।
• MS এবং FPS-এর মধ্যে সম্পর্ক (মিলিসেকেন্ড এবং ফ্রেম প্রতি সেকেন্ড)।
• অনুভূত কর্মক্ষমতা এর মধ্যে গুরুত্বপূর্ণ পার্থক্য এবং হার্ডওয়্যার কর্মক্ষমতা।

পন্থা

আমরা আমাদের ভিউপোর্ট ডাইমেনশন অ্যাপের দুটি সংস্করণ তৈরি করছি।

• সংস্করণ 1 অ্যাপটি কাজ করার বিষয়ে। এটি খসড়া, কিন্তু চূড়ান্ত পণ্য নয়।
• সংস্করণ 2 সংস্করণ 1 উন্নত করার বিষয়ে। আমরা শিখব কীভাবে আমাদের কোডকে আরও কর্মক্ষম, শক্তি সাশ্রয়ী এবং সহজে পড়া যায়।

জিনিসগুলি জাভাস্ক্রিপ্ট-কেন্দ্রিক রাখতে, আমরা সবকিছু করব জাভাস্ক্রিপ্ট কোডে। একটি জাভাস্ক্রিপ্ট ফাইলে সবকিছু রাখার মাধ্যমে, আমাদের অ্যাপটি আপনার বিদ্যমান যেকোনো প্রকল্পে যোগ করাও সহজ হবে।

আপনি কি সম্পূর্ণ শিক্ষানবিস? তারপর আমি আপনাকে কোডপেন ব্যবহার করে অনুসরণ করার পরামর্শ দিই। এমনকি এটি ব্যবহার করার জন্য আপনাকে সাইন আপ করতে হবে না। আমি একটি বেশ জনপ্রিয় কোডপেন ভিডিও টিউটোরিয়াল প্রকাশ করেছি যা আপনি এখানে দেখতে পারেন।

কিভাবে শিখবেন

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

যদি আপনি হারিয়ে যান আপনি সর্বদা সমাপ্ত কোড উল্লেখ করতে পারেন:

• সংস্করণ 1
• সংস্করণ 2

চলুন শুরু করা যাক!

ভিউপোর্টের মাত্রা [সংস্করণ 1.0]

আমরা কোডিং শুরু করার আগে, প্রকল্পের প্রয়োজনীয়তাগুলি একবার দেখে নেওয়া যাক৷

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

• এতে জানালার প্রস্থ এবং উচ্চতা প্রদর্শনের জন্য একটি ধারক থাকা উচিত।
• এটি আমাদের উইন্ডোর উপরের ডানদিকে অবস্থিত হওয়া উচিত।
• এটি ডিফল্টরূপে লুকানো উচিত।
• উইন্ডোটির আকার পরিবর্তন করার সাথে সাথে এটি প্রদর্শিত হওয়া উচিত।
• এটি সর্বশেষ উইন্ডোর আকার পরিবর্তনের 3 সেকেন্ড পরে লুকিয়ে রাখা উচিত।

এটি সংস্করণ 1 এর জন্য বৈশিষ্ট্য প্রয়োজনীয়তার সারমর্ম।

আসুন কোডিং শুরু করি!

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

প্রথমে, createElement ব্যবহার করে আমাদের ভিউপোর্ট ডাইমেনশন অ্যাপের জন্য একটি ডাইভ এলিমেন্ট তৈরি করা যাক পদ্ধতি এবং এটি একটি ভেরিয়েবলে বরাদ্দ করুন:

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

আমাদের কাছে এখন একটি খালি <div></div> আছে একটি ভেরিয়েবলের ভিতরে সংরক্ষিত উপাদান।

ব্রাউজারে, সমস্ত HTML উপাদান এলিমেন্ট অবজেক্ট দ্বারা উপস্থাপিত হয় এই উপাদান বস্তুর বৈশিষ্ট্য আছে এবং পদ্ধতি যা আমরা জাভাস্ক্রিপ্ট দিয়ে অ্যাক্সেস করতে পারি।

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

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

উপরের সিনট্যাক্সটি হল ডট নোটেশন৷৷ সহজ ভাষায়, এর মানে হল আমরা . ব্যবহার করি একটি বস্তুর বৈশিষ্ট্য বা পদ্ধতি অ্যাক্সেস করতে। সুতরাং উপরের উদাহরণে, আমরা বলছি:

• আরে viewportDimensions
• আমাকে Style object অ্যাক্সেস দিন
• তাই আমি এর স্টাইলিং বৈশিষ্ট্য অ্যাক্সেস করতে পারি

স্টাইল অবজেক্টের সাথে স্টাইল করা হল সিএসএস দিয়ে স্টাইলিং করার মতো। কিন্তু স্টাইল অবজেক্ট ইনলাইন স্টাইল ব্যবহার করে স্টাইলিং বৈশিষ্ট্যগুলি সরাসরি HTML উপাদানে যোগ করা হয়, বহিরাগত CSS স্টাইলশীটে নয়৷

আমাদের ভিউপোর্টের মাত্রা <div> যোগ করে আমাদের কোড কাজ করে তা নিশ্চিত করি <body> এ উপাদান আমাদের HTML নথির উপাদান।

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

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

এখন বডি এলিমেন্টের ভিতরে আমাদের ভিউপোর্ট ডাইমেনশনের ডিভ এলিমেন্ট যোগ করা যাক। নিম্নলিখিত কোডটি আপনার জাভাস্ক্রিপ্ট ফাইলের নীচে রাখুন (শেষ শৈলীর নীচে:

body.appendChild(viewportDimensions);

appendChild() একটি পদ্ধতি যেটি অন্য নোডের ভিতরে একটি নোড যুক্ত করে (যোগ করে)। সবকিছু DOM-এ একটি নোড এবং বিভিন্ন ধরনের নোড রয়েছে। এই ক্ষেত্রে, আমরা বডি এলিমেন্ট নোডের ভিতরে একটি ডিভ এলিমেন্ট নোড যোগ করছি।

যেহেতু আমাদের ডিভ এলিমেন্টে এখনও কোন বিষয়বস্তু নেই, তাই আমরা দেখতে পাচ্ছি না আমাদের বর্তমান কোড কাজ করে কিনা। আমরা উপাদানটিতে একটি অস্থায়ী সীমানা যুক্ত করে দ্রুত খুঁজে বের করতে পারি:

viewportDimensions.style.border = "10px solid";

যদি এটি কাজ করে তবে আপনার উইন্ডোর উপরের ডানদিকে একটি ঘন কালো সীমানা সহ একটি ছোট বাক্স দেখতে হবে:

আপনি আপনার ব্রাউজার উইন্ডোতে ডান-ক্লিক করেও চেক করতে পারেন। তারপর পরিদর্শন এ ক্লিক করুন আপনার ব্রাউজার DevTools অ্যাক্সেস করতে।

এখন উপাদান ট্যাবের অধীনে, আপনার body সনাক্ত করুন উপাদান, এবং আপনার কিছু ইনলাইন শৈলী বৈশিষ্ট্য সহ একটি খালি div উপাদান দেখতে হবে।

এখানে এখন পর্যন্ত আমাদের সমস্ত কোডের একটি ওভারভিউ রয়েছে:

// Select body element
var body = document.querySelector("body");

// Create div element
var viewportDimensions = document.createElement("div");

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

// Add div element inside body element
body.appendChild(viewportDimensions);

দুর্দান্ত, আমাদের ডিভ উপাদানটি তৈরি করা হয়েছে, স্টাইল করা হয়েছে এবং আমাদের দেহের উপাদানের ভিতরে যুক্ত করা হয়েছে। পরবর্তীতে উইন্ডো রিসাইজ ইভেন্ট।

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

উইন্ডো অবজেক্ট আপনার ব্রাউজার উইন্ডোর প্রতিনিধিত্ব করে। এটিতে addEventListener সহ বিভিন্ন পদ্ধতি রয়েছে . এই পদ্ধতিটি অনেকগুলি প্রকার শুনতে পারে৷ উইন্ডো ইভেন্টের, যেমন স্ক্রলিং, ক্লিক করা, টাইপ করা এবং আকার পরিবর্তন করা।

আমরা 'resize' ব্যবহার করতে যাচ্ছি ঘটনা নিচে body.appendChild নিম্নলিখিত যোগ করুন:

window.addEventListener("resize", function() {
  // Code to execute when window resizes
});

দ্রষ্টব্য:মন্তব্য // ব্রাউজার দ্বারা ব্যাখ্যা করা হয় না, তারা শুধুমাত্র আমাদের মানুষের জন্য আছে

এর আগে আমরা div এলিমেন্টের বৈশিষ্ট্য ধরতে ডট নোটেশন ব্যবহার করতাম। এখন আমরা একটি পদ্ধতি অ্যাক্সেস করতে এটি ব্যবহার করি উইন্ডো অবজেক্টে:addEventListener .

আমরা দুটি আর্গুমেন্ট পাস করছি ইভেন্ট শ্রোতার কাছে:'resize' এবং function() . আমরা ইতিমধ্যেই রিসাইজ ইভেন্ট নিয়ে আলোচনা করেছি, কিন্তু কাজটি কিসের জন্য?

function() কোড ব্লক সেট আপ করে যা আমরা প্রতিবার উইন্ডো রিসাইজ ইভেন্ট সক্রিয় করার সময় কার্যকর করতে চাই (যত তাড়াতাড়ি আপনি আপনার উইন্ডোর আকার পরিবর্তন করুন)। কোড ব্লক হল কোঁকড়া ধনুর্বন্ধনীর ভিতরে যা থাকে { } (ফাংশন বডি হিসেবেও উল্লেখ করা হয়) যেটিতে এখন পর্যন্ত শুধুমাত্র একটি // comment আছে .

যতবার আমরা উইন্ডো ইভেন্টে কল করি, এটি function() বলে কোঁকড়া ধনুর্বন্ধনীর ভিতরে কোড চালাতে { } .

এটি কাজ করছে তা নিশ্চিত করতে, আসুন এটি console.log() ব্যবহার করে পরীক্ষা করি :

window.addEventListener("resize", function() {
  // Code to execute when window resizes
  console.log("Working!");
});

এখন আপনার উইন্ডোর আকার পরিবর্তন করুন। যদি আপনার কনসোল প্রিন্ট করে 'ওয়ার্কিং!' একগুচ্ছ বার, এর মানে হল আপনার উইন্ডো রিসাইজ ইভেন্ট কাজ করছে।

কনসোলে অ্যাক্সেস করা

কোডপেনে কনসোল অ্যাক্সেস করতে, আপনার উইন্ডোর নীচে বাম কোণে কনসোল বোতামে ক্লিক করুন। Chrome-এ কনসোল অ্যাক্সেস করতে, এখানে কীবোর্ড শর্টকাটগুলি রয়েছে:

• Cmd + Opt + J (Mac)।
• Ctrl + Shift + J (উইন্ডোজ / লিনাক্স)

ঠিক আছে, চলুন আমাদের উইন্ডো ইভেন্টকে কাজে লাগাই!

পিক্সেলে ব্রাউজারের প্রস্থ এবং উচ্চতা ফেরত দেওয়া হচ্ছে

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

অনুমান করুন তারা কি করে?

হ্যাঁ, তারা আপনার ব্রাউজার উইন্ডোর প্রস্থ এবং উচ্চতা পিক্সেলে (স্ক্রলবার সহ) ফেরত দেয়। আসুন এটি নিশ্চিত করি এবং console.log() ব্যবহার করি সেই প্রস্থ এবং উচ্চতা সম্পত্তি মান ফেরত দিতে।

যেহেতু আমরা এটি বর্তমান মানকে গতিশীলভাবে ধরতে চাই আমাদের console.log() রাখতে হবে রিসাইজ ইভেন্টের ফাংশন ব্লকের ভিতরে আছে:

window.addEventListener("resize", function() {
  // Code to execute when window resizes
  console.log("Width:", window.innerWidth);
  console.log("Height:", window.innerHeight);
});

'Width:' এবং 'Height:' console.log()-এ পাঠ্য কনসোল আউটপুট পরিষ্কার করার জন্য শুধু আছে।

আমাদের আসলে window. লিখতে হবে না প্রস্থ এবং উচ্চতার মান ধরতে, শুধু innerWidth এবং innerHeight কাজ করবে. বিভ্রান্তি এড়াতে আমি এটা করি।

যদি এটি কাজ করে তবে আপনার কনসোল এখন ক্রমাগতভাবে আপনার বর্তমান ভিউপোর্টের মাত্রাগুলি মুদ্রণ করবে যতক্ষণ না আপনি আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করবেন৷

এটি এইরকম হওয়া উচিত:

এখন আমরা কোথাও যাচ্ছি!

চলুন console.log() থেকে পরিত্রাণ পাই এবং পরিবর্তে প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলিকে তাদের নিজস্ব ভেরিয়েবলে বরাদ্দ করুন যাতে আমরা তাদের একটি রেফারেন্স সংরক্ষণ করতে পারি:

window.addEventListener("resize", function() {
  // Code to execute when window resizes
  var width = window.innerWidth;
  var height = window.innerHeight;
});

এখন width এবং height সর্বদা উইন্ডোর প্রস্থ এবং উচ্চতা বৈশিষ্ট্যের বর্তমান মান থাকবে। আপনি সর্বদা করেন না একটি ভেরিয়েবলে প্রত্যাবর্তিত মান নির্ধারণ করতে হবে, তবে এটি একটি ভাল অনুশীলন কারণ এটি আপনাকে সেই তথ্যটি পরে ব্যবহার বা পরিবর্তন করতে দেয়৷

আপনার নতুন ভেরিয়েবলগুলি যেভাবে কাজ করে তা নিশ্চিত করতে, সেই নতুন ভেরিয়েবলগুলিকে কনসোলে প্রিন্ট করার চেষ্টা করুন:

window.addEventListener("resize", function() {
  // Code to execute when window resizes
  var width = window.innerWidth;
  var height = window.innerHeight;

  console.log(width);
  console.log(height);
});

যদি সবকিছু কাজ করে, আপনি আপনার console.log's সরাতে পারেন এবং এগিয়ে যেতে পারেন৷

ডিভ এলিমেন্টে প্রস্থ এবং উচ্চতার মান যোগ করা হচ্ছে

আমরা আমাদের ডিভ এলিমেন্টে প্রত্যাবর্তিত প্রস্থ এবং উচ্চতার মান যোগ করতে চাই। আরো নির্দিষ্টভাবে আমরা মানগুলিকে ভিতরে এম্বেড করতে চাই আমাদের div উপাদান খোলা এবং বন্ধ ট্যাগ:

<div> We want width & height values here </div>

এটি করার জন্য আমাদের ভেরিয়েবলটি ধরতে হবে যা আমাদের ডিভ উপাদান সংরক্ষণ করে:viewportDimensions . তারপর আমাদের এলিমেন্ট অবজেক্টে একটি প্রপার্টি অ্যাক্সেস করতে হবে, যাকে বলা হয় textContent . আমরা আগের থেকে একই ডট নোটেশন ব্যবহার করি:

viewportDimensions.textContent;

এখন আমাদের শুধু আমাদের প্রস্থ এবং উচ্চতা ভেরিয়েবল নির্ধারণ করতে হবে:

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

এখন আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করার চেষ্টা করুন। আপনি যদি সবকিছু ঠিকঠাক করে থাকেন তবে এটি এখন আপনার উইন্ডোর উপরের ডানদিকে, বর্তমান প্রস্থ এবং উচ্চতার মানগুলি প্রদর্শন করবে৷

আমি জানি আমরা উপরে যে কোড সিনট্যাক্স ব্যবহার করেছি তা কিছুটা বিভ্রান্তিকর দেখাতে পারে।

আসুন এটি ভেঙে ফেলি:

textContent উপাদান বস্তুর একটি সম্পত্তি. আমাদের ভিউপোর্ট ডাইমেনশন ডিভ এলিমেন্ট সহ একটি ডকুমেন্টের যেকোনো উপাদানে এটি থাকে।

textContent একটি নোড প্রদান করে বিশেষভাবে একটি টেক্সট নোড . উদাহরণস্বরূপ:একটি অনুচ্ছেদের উপাদানের ভিতরের পাঠ্য:<p>Some text...</p> , একটি টেক্সট নোড।

আমাদের viewportDimensions ভেরিয়েবলে একটি খালি <div> রয়েছে উপাদান এখন এটি ওপেনিং এবং ক্লোজিং ডিভ এলিমেন্ট ট্যাগের মধ্যে সাংখ্যিক পিক্সেল মান সহ একটি পাঠ্য নোড প্রদান করে:

width + "px" + " x " + height + "px";

width এবং height উভয়ই একটি পিক্সেল নম্বর মান ধারণ করে। আমরা শুধুমাত্র 'px' যোগ করি এবং ' x ' (স্ট্রিং) প্রস্থ এবং উচ্চতা ভেরিয়েবল আলাদা করতে এবং প্রত্যেকের কাছে এটা পরিষ্কার করে দিতে যে আমরা যে মানগুলি ফেরত দিই তা পিক্সেলে।

setTimeout() এর সাথে একটি কাউন্টডাউন টাইমার যোগ করা হচ্ছে

যখন আমরা আমাদের উইন্ডোর আকার পরিবর্তন করছি না তখন আমরা প্রস্থ এবং উচ্চতা ক্রমাগত প্রদর্শিত দেখতে চাই না। আমাদের ব্রাউজার উইন্ডোর আকার পরিবর্তন করা বন্ধ করার ঠিক তিন সেকেন্ড পরেই ভিউপোর্ট ডাইমেনশনের ডিভ উপাদানটি চলে যাক৷

এটি করার জন্য আমাদের উইন্ডো অবজেক্টের আরেকটি পদ্ধতি ব্যবহার করতে হবে , যাকে বলা হয় setTimeout . এই পদ্ধতিটি একটি function() চালানোর জন্য ডিজাইন করা হয়েছে একবার পরে মিলিসেকেন্ডের একটি নির্দিষ্ট সংখ্যা।

এটা এই মত কাজ করে:

setTimeout(functionToExecute, 3000);

1000 ms =1 সেকেন্ড। সুতরাং উপরের 3000 মানে 3 সেকেন্ড।

আমরা কোন ফাংশন চালাতে চাই? একটি যা আমাদের ভিউপোর্ট মাত্রার ডিভ উপাদানকে সরিয়ে দেয়।

আমাদের কাছে এখনও এমন কোনও ফাংশন নেই, আসুন একটি তৈরি করি এবং এটিকে কল করি removeViewportDimensions() এবং এর কোড ব্লকের ভিতরে { } আমাদের div উপাদান মুছে ফেলার জন্য এটা বলা যাক.

উপরে নিম্নলিখিত কোড যোগ করুন আপনার উইন্ডো ইভেন্ট ফাংশন:

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

display সম্পত্তি কিভাবে বা যদি নির্দিষ্ট করে একটি উপাদান প্রদর্শিত হয়। এটিকে 'none' এ সেট করে , আমরা এটা লুকিয়ে রাখছি।

এখন আমাদের কল করতে হবে আমাদের নতুন removeViewportDimensions() ফাংশন, ভিতর থেকে আমাদের উইন্ডো ইভেন্ট কোড ব্লক। setTimeout() ব্যবহার করে আগের থেকে ফরম্যাট, নিম্নলিখিত যোগ করুন:

setTimeout(removeViewportDimensions, 3000);

এখন প্রতিবার উইন্ডো রিসাইজ ইভেন্ট সক্রিয় থাকে, setTimeout 3 সেকেন্ডের একটি কাউন্টডাউন সেট করে। অন্য কথায়:আমরা দেরি করি removeViewportDimensions() কে কল করুন 3 সেকেন্ডের মধ্যে।

3 সেকেন্ড শেষ হলে, removeViewportDimensions() ফাংশন বলা হয়, এবং তার কোড নির্বাহ করে:

এখন আমাদের div এলিমেন্টের ডিসপ্লে প্রপার্টি 'none' সেট করা আছে , এবং লুকানো আছে।

কিন্তু আমাদের একটা সমস্যা আছে

আপনি যদি দ্বিতীয়বার আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করার চেষ্টা করেন, div উপাদানটি সরানোর ঠিক পরে, তাহলে div উপাদানটি আর প্রদর্শিত হবে না। কারণ শেষ আমাদের প্রোগ্রামে যে জিনিসটি ঘটে তা হল আমাদের div উপাদানটি তার display পায় সম্পত্তি 'none' এ সেট করা হয়েছে .

আমাদের প্রোগ্রামে এমন কোথাও নেই যেখানে আমরা বলেছি যে আমরা আমাদের ডিভ উপাদান আবার দৃশ্যমান করতে চাই।

তবে কেন প্রথমবার দেখা গেল? কারণ ডিফল্টরূপে একটি <div> উপাদান একটি তথাকথিত ব্লক-লেভেল উপাদান এর মানে হল এটির ডিফল্ট display সম্পত্তির মান হল 'block' — যা একটি দৃশ্যমান প্রদর্শনের ধরন।

আমাদের ডিভ এলিমেন্টের শেষ কাজটি হল এর ডিসপ্লে মান 'none' এ সেট করা . তাই সেই মান এখনও থাকবে যখন আমরা দ্বিতীয়বার রিসাইজ ইভেন্টটি চালাই তখন এলিমেন্টে থাকুন। যদি না আপনি আপনার পৃষ্ঠা রিফ্রেশ করেন।

এই স্থির করা সহজ। আপনার উইন্ডোর রিসাইজ ইভেন্টের কোড ব্লকের ভিতরে নিম্নলিখিত যোগ করুন (উপরে setTimeout !):

viewportDimensions.style.display = "block";

এখন আমাদের ডিভ এলিমেন্টের display সম্পত্তি 'block' এ সেট করা আছে প্রতিবার রিসাইজ ইভেন্ট চালানো হয়। আপনার উইন্ডোর আকার পরিবর্তন করার চেষ্টা করুন, এটি div উপাদান লুকানোর জন্য অপেক্ষা করুন, এবং তারপর আবার আকার পরিবর্তন করুন৷

অসাধারণ, আমাদের অ্যাপ কাজ করে!

ভাল.. সাজানোর। আমাদের আরেকটি সমস্যা আছে। আপনি যদি একটি বর্ধিত সময়ের জন্য আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করার চেষ্টা করেন (3 সেকেন্ডের বেশি) তাহলে ডিভ উপাদানটি ঝিকিমিকি শুরু করবে। এটা যেন একটা লাইট অন এবং অফ হয়ে যাচ্ছে।

এটা ঘটে, কারণ আমরা আমাদের কাউন্টডাউন টাইমার রিসেট করছি না। যতবার আমরা আমাদের ভিউপোর্টের আকার পরিবর্তন করি, উইন্ডো ইভেন্ট তার ফাংশন কোড ব্লক যতবার পারে ততবার কার্যকর করে। তাই আমাদের removeViewportDimensions() ফাংশন হল এছাড়াও অনেক বার কল করে।

এর ফলে আমাদের অ্যাপে একগুচ্ছ ওভারল্যাপিং কোড এক্সিকিউশন রয়েছে। আমাদের div উপাদানটি display = 'none' এর সাথে হাতুড়ে যাচ্ছে সম্পত্তি এবং display = 'block' একই সময়ে সম্পত্তি।

এটি আমাদের ডিভ এলিমেন্টকে ক্রমাগত দেখায় এবং লুকিয়ে রাখে এবং ফ্লিকারিং ঘটায়। এই sucks. এই সমস্যার সমাধান করার জন্য, আমাদের শিখতে হবে কিভাবে টাইমার ক্লিয়ারিং জাভাস্ক্রিপ্টে কাজ করে।

কাউন্টডাউন টাইমার রিসেট করা হচ্ছে

clearTimeout() ব্যবহার করে আমরা বিদ্যমান টাইমারগুলি সাফ করতে পারি পদ্ধতি এই পদ্ধতিটি ক্লিয়ার করার জন্য ডিজাইন করা হয়েছে একটি টাইমার যা setTimeout দিয়ে সেট করা হয়েছে পদ্ধতি তারা অংশীদার পদ্ধতির মত।

বিদ্যমান টাইমারগুলি সাফ করাই আমরা চাই। আমরা শুধুমাত্র একটি setTimeout() চালাতে চাই টাইমার একবার প্রতি রিসাইজ ইভেন্ট।

আপনি ভাবতে পারেন যে আমরা clearTimeout() চালাতে পারি setTimeout()-এ এই মত:

clearTimeout(setTimeout);

কিন্তু এটা কাজ করবে না। clearTimeout() পদ্ধতি ব্যবহার করতে, আপনাকে একটি গ্লোবাল ব্যবহার করতে হবে টাইমআউট পদ্ধতি তৈরি করার সময় পরিবর্তনশীল।

জাভাস্ক্রিপ্টের দুটি সুযোগ রয়েছে:বিশ্বব্যাপী এবং স্থানীয়:

• একটি গ্লোবাল ভেরিয়েবল একটি ফাংশনের বাইরে ঘোষিত একটি পরিবর্তনশীল (গ্লোবাল স্কোপে)।
• একটি স্থানীয় পরিবর্তনশীল একটি ফাংশন (স্থানীয় সুযোগ) এর ভিতরে ঘোষিত একটি পরিবর্তনশীল।

এর মানে হল যে আমরা যদি setTimeout() সাফ করতে চাই আমাদের এটিকে প্রথমে একটি গ্লোবাল ভেরিয়েবলে বরাদ্দ করতে হবে এবং তারপর আমরা clearTimeout() কল করতে পারি রিসেট করার জন্য সেই ভেরিয়েবলে।

আসুন আমাদের গ্লোবাল ভেরিয়েবল তৈরি করি এবং এটিকে resizeTimeout বলি :

var resizeTimeout;

এই ভেরিয়েবলটিকে আপনার জাভাস্ক্রিপ্ট ফাইলের একদম উপরে রাখুন।

এই মুহূর্তে এটি একটি খালি ভেরিয়েবল। প্রথমবার আমাদের রিসাইজ ইভেন্ট শুরু না হওয়া পর্যন্ত এটি খালি থাকবে৷

আপনি যদি console.log(resizeTimeout) ব্যবহার করার চেষ্টা করেন আপনি অনির্ধারিত পাবেন ফিরে এসেছে undefined একটি মিথ্যা মান প্রকার, যা গুরুত্বপূর্ণ। কেন, শীঘ্রই আপনি বুঝতে পারবেন।

এখন, আপনার setTimeout() নিন আগের থেকে ফাংশন করুন এবং এটিকে resizeTimeout এ বরাদ্দ করুন পরিবর্তনশীল:

resizeTimeout = setTimeout(removeViewportDimensions, 3000);

এখন বিশ্বব্যাপী resizeTimeout ভেরিয়েবল আমাদের setTimeout সম্পর্কে তথ্য পাবে ফাংশন, রিসাইজ ইভেন্ট সক্রিয় হওয়ার সাথে সাথে।

এখন আমরা setTimeout() ব্যবহার করতে পারি প্রতিবার আমাদের উইন্ডো রিসাইজ ইভেন্ট চলছে। clearTimeout() সেট করুন বিশ্বব্যাপী resizeTimeout-এ পরিবর্তনশীল এই মত:

clearTimeout(resizeTimeout);

আপনার resizeTimeout = setTimeout() এর উপরে কোডটি রাখুন তাই এটি এই মত দেখায়:

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

ঠিক আছে, এখন আপনার রিসাইজ ইভেন্টটি 5-6 সেকেন্ডের জন্য চালান, এবং আপনি দেখতে পাবেন যে ফ্লিকারিং চলে গেছে!

বিভ্রান্ত? কোডে কী ঘটে তা নিয়ে কথা বলি।

জাভাস্ক্রিপ্ট ইন্টারপ্রেটার (একটি ইঞ্জিন যা আপনার ব্রাউজারে চলে) আপনার কোড পড়বে এবং:

• লাইনের জন্য এটি লাইন চালান
• একবারে একটি লাইন
• উপর থেকে নীচে

যতক্ষণ আমরা আমাদের উইন্ডোর আকার পরিবর্তন করতে থাকি ততক্ষণ পর্যন্ত আমাদের কোডটি উপরে থেকে নীচে পর্যন্ত কার্যকর হতে থাকবে। প্রতিটি ক্ষুদ্র পরিমাপের আকার পরিবর্তন একটি নতুন উইন্ডো ইভেন্ট চালু করবে। তাই জাভাস্ক্রিপ্ট ইন্টারপ্রেটার প্রতি সেকেন্ডে বহুবার আমাদের কোড পড়ে এবং এক্সিকিউট করে।

প্রতিবার আমাদের উইন্ডো ইভেন্টের ফাংশন তার কোড ব্লক কার্যকর করে, clearTimeout() যেকোনো বিদ্যমান রিসেট করবে সারিতে কাউন্টডাউন, resizeTimeout-এ পরিবর্তনশীল।

শেষে কোডের লাইন, আমরা setTimeout() বরাদ্দ করি .

তাই শেষ যে জিনিসটি ঘটবে তা সর্বদা একটি হবে৷ 3 সেকেন্ডের কাউন্টডাউন যা resizeTimeout এ বরাদ্দ করা হয় . তার আগে যে কোনো শুরু করা কাউন্টডাউন clearTimeout() দ্বারা মুছে ফেলা হবে .

অসাধারণ! সংস্করণ 1 সম্পন্ন হয়েছে। আপনি এখানে সম্পূর্ণ কোড দেখতে পারেন. চলুন সংস্করণ 2-এ চলে যাই, যেখানে আমরা বিশেষভাবে পারফরম্যান্স-এ ফোকাস করতে যাচ্ছি।

ভিউপোর্টের মাত্রা [সংস্করণ 2]

আমাদের অ্যাপ কাজ করে, কিন্তু এটা কি যথেষ্ট ভালো? এই প্রশ্নের উত্তর দেওয়ার জন্য আমাদের দুটি গুরুত্বপূর্ণ বিষয় বিবেচনায় নিতে হবে:

• অনুভূত কর্মক্ষমতা:ব্যবহারকারীর অভিজ্ঞতা (UX)।
• হার্ডওয়্যার কর্মক্ষমতা (ব্যবহার এবং দক্ষতা)।

UX দৃষ্টিকোণ থেকে, আমি মনে করি আমাদের অ্যাপটি দুর্দান্ত পারফর্ম করে। এটি একটি জ্বলন্ত দ্রুত প্রতিক্রিয়া সময় আছে, এবং এটি খুব ভাল রেন্ডার করে, এমনকি পুরানো স্ক্রিনেও (আমি কয়েক দশক-পুরোনো অভিজ্ঞদের উপর পরীক্ষা করেছি)। আমরা সবসময় ভিজ্যুয়াল (UI ডিজাইন) অপ্টিমাইজ করার বিষয়ে তর্ক করতে পারি। কিন্তু বিশুদ্ধ কার্যকারিতার উপর ভিত্তি করে, আমাদের অ্যাপ ভাল কাজ করে।

কিন্তু একটি হার্ডওয়্যার কর্মক্ষমতা থেকে দৃষ্টিকোণ, আমাদের অ্যাপটি সত্যিই খারাপ প্রযুক্তিগত প্রয়োজনীয়তার তুলনায় আমাদের অ্যাপটি প্রচুর পরিমাণে CPU এবং GPU সম্পদ ব্যবহার করছে।

আপনি কেন বুঝতে পারেন? এটি এমন কিছু নয় যা আপনি সহজাতভাবে চিন্তা করেন যখন আপনি আঠালো প্রকৃতির সাথে পরিচিত নন। উইন্ডো ইভেন্টের।

এখানে সমস্যা:

যতবার আমরা আমাদের ব্রাউজার উইন্ডোর আকার পরিবর্তন করি, আমাদের অ্যাপের উইন্ডো ইভেন্ট তার ফাংশন শতবার কার্যকর করছে। মাত্র কয়েক সেকেন্ডের মধ্যে!

আমি কোডপেনে একটি ফাংশন রেখেছি যা সমস্যাটি কল্পনা করে। প্রতি সেকেন্ডে কতগুলি ফাংশন কার্যকর হয় তা লক্ষ্য করুন। এছাড়াও ছাদের মধ্য দিয়ে মোট গণনা ঘা দেখুন, দ্রুত:

কোডপেন উদাহরণ

এটি ভয়ঙ্কর এবং সম্পূর্ণ অপ্রয়োজনীয়! আমাদের কোড এটির চেয়ে অনেক বেশি সম্পদ ব্যবহার করছে৷

ব্রাউজার ইভেন্টের সময় আপনার CPU এবং GPU কতটা কাজ করছে তা দেখতে, আপনি Chrome এর টাস্ক ম্যানেজার চালু করতে পারেন:

আপনার ব্রাউজার উইন্ডোর আকার পরিবর্তন করার চেষ্টা করুন। টাস্ক ম্যানেজারের ভিতরে, আপনি আপনার সক্রিয় ব্রাউজার ট্যাবের পাশে একটি CPU এবং GPU % ব্যবহার ফিরে পাবেন।

পরম বনাম আপেক্ষিক হার্ডওয়্যার ব্যবহার

পরম এবং আপেক্ষিক হার্ডওয়্যার ব্যবহারের মধ্যে পার্থক্য করা গুরুত্বপূর্ণ। একটি সম্পূর্ণ (মোট) হার্ডওয়্যার ব্যবহারের দৃষ্টিকোণ থেকে, আমাদের ক্ষুদ্র অ্যাপটি খুব বেশি ক্ষতি করবে না। বেশির ভাগ কম্পিউটারই এর দ্বারা কাঁপতে না পারার জন্য খুবই শক্তিশালী৷

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

যত তাড়াতাড়ি আপনি ভারী চালায় এমন অ্যাপ্লিকেশনগুলির সাথে কাজ করা শুরু করুন৷ ফাংশন, হার্ডওয়্যার ব্যবহার একটি গুরুতর সমস্যা হয়ে ওঠে। আমরা যদি এই মুহূর্তের মতো কোড এক্সিকিউট করি তাহলে এটা খুব একটা সুন্দর দৃশ্য হবে না।

উইন্ডো ইভেন্ট কিভাবে কার্যকর করে

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

প্রতি সেকেন্ডে কতবার ফাংশন কার্যকর হয়?

এটি প্রতি 4 থেকে প্রতি 40 মিলিসেকেন্ডের মধ্যে কিছু হতে পারে। এটি অনেক কারণের উপর নির্ভর করে, যার মধ্যে রয়েছে:

• আপনার CPU এবং GPU (হার্ডওয়্যার) কতটা শক্তিশালী?
• আপনি কোন ব্রাউজার ব্যবহার করছেন?
• আপনি যে সফ্টওয়্যারটি (কোড) চালাচ্ছেন তা কতটা জটিল? এটা কি অ্যানিমেশন জড়িত?
• এই মুহূর্তে আপনার হার্ডওয়্যার আর কি করছে? একটি YouTube ভিডিও অন্য ট্যাবে চলছে?

আপনার হার্ডওয়্যার প্রদত্ত সময়ে উপলব্ধ যা কিছু রিসোর্স ব্যবহার করে আপনি এটিকে কিছু করতে বলেন৷

কখনও কখনও এটি যথেষ্ট ফ্রি থাকবে না৷ আপনার অনুরোধে অবিলম্বে সাড়া দেওয়ার জন্য সংস্থানগুলি কারণ একই সময়ে এক টন অ্যাপ চলছে৷

এটি ধীর প্রতিক্রিয়ার সময়, স্ক্রীনে সমস্যা, জমাট বাঁধা এবং অন্যান্য সমস্যার কারণ হতে পারে।

হার্ডওয়্যার ব্যবহার বৃদ্ধি পায়৷৷ এই কারণে আমাদের আবেদনের বর্তমান অবস্থা ঠিক করতে হবে। কারণ আমরা পারফরম্যান্স নিয়ে চিন্তা করি!

দ্রষ্টব্য:আধুনিক ব্রাউজারগুলিতে, সর্বনিম্ন কার্যকর করার হার হল 4ms৷ যা ফ্রেম রেট অনুযায়ী প্রায় 250fps। এটি মোজিলার ওয়েব API ডক্স অনুযায়ী৷

কিন্তু এই বিষয়ে পরস্পরবিরোধী তথ্য আছে, আরও তথ্য এখানে।

কত ঘন ঘন একটি ফাংশন চালানো উচিত?

আদর্শ ফাংশন সঞ্চালনের হার প্রসঙ্গের উপর নির্ভর করে। আমরা কি একটি বিস্তারিত অ্যানিমেশন নিয়ে কাজ করছি? অথবা কিছু সহজ, যেমন কয়েকটি সংখ্যাসূচক মান ফেরত দেওয়া (যেমন আমরা আমাদের অ্যাপ দিয়ে করি)?

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

থ্রটলিং নামক একটি প্রক্রিয়া ব্যবহার করে আমরা এক্সিকিউশন ফ্রিকোয়েন্সি নিয়ন্ত্রণ করতে পারি এটি পরবর্তীতে আসছে।

ইভেন্ট উদ্ধারের জন্য থ্রটলিং!

আমরা একটি থ্রটলিং ফাংশন ব্যবহার করতে পারি অন্য কতবার সীমাবদ্ধ করতে ফাংশন সময়ের সাথে সঞ্চালিত হয়। যেমন:“প্রতি 100 মিসে একবার এই ফাংশনটি কল করুন”।

আসুন একটি বেসিক ইভেন্ট থ্রটলার ফাংশন দেখে নেওয়া যাক, যা উইন্ডো রিসাইজ ইভেন্ট দ্বারা ট্রিগার হয়। থ্রটলার তারপর প্রতি 100 ms পরে একটি বাইরের ফাংশন কল করে।

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

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);

পড়া সহজ করার জন্য আমি কোড বিন্যাসে কিছু অতিরিক্ত সাদা স্থান যোগ করেছি। কোডটি কয়েকবার পড়ার চেষ্টা করুন, এবং দেখুন আপনি এটি বুঝতে পারেন কিনা৷

এটি পরীক্ষা করতে এই কোডপেনটি ব্যবহার করুন। আপনি দেখতে পাবেন যে আমরা functionToExecute() কল করি প্রতি সেকেন্ডে 10 বার পর্যন্ত (10 x 100 =1000 ms =1 সেকেন্ড)।

আমি বলি পর্যন্ত কারণ একটি ফাংশন সবসময় আপনি যে হারে সেট করেন ঠিক সেই হারে ফায়ার হবে না। এটি আপনার ফাংশন চলাকালীন আপনার হার্ডওয়্যার কতটা ব্যস্ত তার উপর নির্ভর করে। আপনি কি আপনার কম্পিউটারে অন্য এনার্জি ট্যাক্সিং অ্যাপ চালাচ্ছেন?.

থ্রটলার কোডে কি ঘটছে:

আপনি যদি প্রথমবার এটি বুঝতে না পারেন তবে চিন্তা করবেন না। অবশেষে ক্লিক না হওয়া পর্যন্ত আমি এই জিনিসের সাথে তালগোল পাকিয়ে অনেক সময় কাটিয়েছি।

আমাদের জাভাস্ক্রিপ্ট ফাইলের একেবারে উপরে, আমরা দুটি গ্লোবাল ঘোষণা করে শুরু করি ভেরিয়েবল:

var throttled; // Empty variable. Type: undefined (falsy value)

var delay = 100; // Number

দ্রষ্টব্য:গ্লোবাল ভেরিয়েবল, মানে আমরা যেকোন জায়গা থেকে এই ভেরিয়েবলগুলি অ্যাক্সেস করতে পারি।

আমরা throttled ব্যবহার করি আমাদের throttler()-এর রেফারেন্স পয়েন্ট হিসাবে ফাংশন, সারিতে একটি ফাংশন আছে কিনা তা পরীক্ষা করতে।

আমাদের throttler() এর আগে ফাংশনটি প্রথমবার ট্রিগার হয় (রিসাইজ ইভেন্ট দ্বারা), সারিতে চালানোর জন্য কোনও ফাংশন থাকবে না। তাই throttled একটি খালি ভেরিয়েবল হিসাবে শুরু হয়৷

ডিফল্টরূপে, খালি ভেরিয়েবলের মান প্রকারের undefined থাকে — যা একটি মিথ্যা মান প্রকার। আপনি দেখতে পাবেন কেন এটি এক মুহূর্তের মধ্যে গুরুত্বপূর্ণ৷

তারপরে আমরা delay নামক একটি ভেরিয়েবলে একটি সংখ্যাসূচক মান (100) বরাদ্দ করি . এই মানটিই আমরা ms (মিলিসেকেন্ড) নিয়ন্ত্রণ করতে ব্যবহার করি আমাদের throttler() এর এক্সিকিউশন রেট ফাংশন।

আমরা delay এর জন্য 100ms বরাদ্দ করি পরিবর্তনশীল তারপরে আমরা সেই ভেরিয়েবলটিকে আমাদের থ্রটলারের setTimeout()-এ পাস করি . আমাদের থ্রটলার তখন প্রতি 100ms বা প্রতি সেকেন্ডে 10 বার চালাবে — সর্বাধিক।

আমি বলি সর্বাধিক কারণ 100ms আমাদের এক্সিকিউশন রেটকে একটি ক্যাপ রাখে। আমাদের ব্যবহারকারীর হার্ডওয়্যার এবং সফ্টওয়্যারের উপর নির্ভর করে আমরা আসলে প্রতি সেকেন্ডে 10টির কম ফাংশন কল পেতে পারি। কিন্তু বেশিরভাগ কম্পিউটার প্রতি সেকেন্ডে 10 বার ফায়ার করতে সক্ষম হবে।

থ্রটলার ফাংশনের ভিতরে, আমরা একটি শর্তসাপেক্ষ if সেট আপ করি বিবৃতি:

function throttler() {
  if (!throttled) {
    // code to execute
  }
}

শর্তযুক্ত বিবৃতি একটি নির্দিষ্ট শর্ত একটি সত্য মান আছে কিনা তা পরীক্ষা করে.

! প্রতীক মানে not . তাই if (!throttled) এতে অনুবাদ করে:

“যদি থ্রোটল করা হয় না একটি সত্য মান আছে, তারপর if চালান এর কোড”।

“কিন্তু যদি throttled হয় করেন একটি সত্য মান আছে, তারপর সেখানে থামুন!”

জাভাস্ক্রিপ্টে সত্য এবং মিথ্যা মান কী?

জাভাস্ক্রিপ্টে, সত্য আছে এবং মিথ্যা মান হ্যাঁ, এটিই তাদের বলা হয়। সত্য একটি মান যা সত্য। মিথ্যা একটি মান যা মিথ্যা বলে বিবেচিত হয় (আশ্চর্য!)।

জাভাস্ক্রিপ্টে ছয়টি মিথ্যা মান রয়েছে:

• undefined
• null
• 0
• '' (খালি স্ট্রিং)
• NaN
• false

জাভাস্ক্রিপ্টে, যা কিছু না one of the above values is considered a truthy value. That’s pretty simple, right?

Back to the throttler

With that quick lesson on true vs. false, go ahead and check if our throttled variable is indeed undefined, and a falsy value type.

We can quickly find out with console.log() by using !! to check our variable:

var throttled;
console.log(throttled); // undefined
console.log(!!throttled); // false value

!! is a double not অপারেশন. It’s a quick way to check for truthy and falsy values.

Great, now we have confirmed that throttled is undefined, and a falsy value type. This means that the very first time our throttler() runs, if ’s condition is indeed met.

// I start out as a falsy value
var throttled;

// I’m triggered by the window resize event
function throttler() {
  // I will only run my { code } if throttled is falsy (it is!)
  if (!throttled) {
    // code to execute
  }
}

Which means that we can move onto what happens inside if’s code block.

Inside if’s code block

Once inside the if statement code block, we immediately start the callback to functionToExecute .

We also set our global throttled variable to true, so it’s no longer undefined (no longer a false value). This stops any future calls to functionToExecute() .

if (!throttled) {
  // Run callback
  functionToExecute();
  // Set global throttled variable to true
  throttled = true;

  // ...
}

But then right below, we use setTimeout to reset the the throttled value back to a falsy value, after the 100ms delay:

function throttler() {
  if (!throttled) {
    // Run callback
    functionToExecute();
    // Set global throttled variable to true
    throttled = true;

    setTimeout(function() {
      // Set throttled back to false after delay
      throttled = false;
    }, delay);
  }
}

So every time the window resize event is running, it triggers the throttler() , which will call functionToExecute every 100ms!

Throttling is power

It’s easier to understand how powerful throttling is if you look at two opposite extremes. Try the following in the throttler function on CodePen:

• Swap 100 out with 500 and resize your window. Notice how infrequent the functionToExecute() is called (twice per second).
• Then try to swap out 500 with 16 and resize the window. Now functionToExecute() is bombarded with calls (up to 60 calls per second).

That’s how throttling works. We use it to limit the number of times a function can be called over time. It’s a very easy way to avoid wasting hardware resources. The hard part is finding the “optimal” execution rate for a given function, as no project is the same. More about that later.

Adding the throttler to our project

To apply the throttler function to our own project, we’ll need to do a bit of refactoring to the old code first. Refactoring is when we improve the structure of a program but don’t change the overall functionality.

In other words:we take something that already works, and makes it easier to use and understand.

We no longer want the window resize event to directly execute the function that returns width and height. Instead, we want our throttler function to regulate when and how often the code executes.

Fortunately, the change is simple. We just need to declare a named function and then put all code from the anonymous function inside that named function.

Let’s call the new function 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);
}

Now let’s take the same throttler function from earlier, and replace the functionToExecute() with getViewportDimensions() :

function throttler() {
  if (!throttled) {
    // Callback: the function we want to throttle
    getViewportDimensions();

    throttled = true;

    setTimeout(function() {
      throttled = false;
    }, delay);
  }
}

And finally we add the window resize event listener:

window.addEventListener("resize", throttler);

That’s it, all the hard work is done! Before we wrap up, let’s check our app’s performance, and see if we need to tweak anything.

Hardware Performance vs. Perceived Performance

I don’t know about you, but when I resize my browser window, the width and height numbers are rendering a bit laggy to my screen. It’s not as smooth as it was before we added the throttler.

But that’s not surprising. Before we added the throttler, our code’s execution rate was absurdly high. Now it’s firing around 10 times per second. That’s why it’s a bit laggy now.

There’s no doubt that our app is very performant, from a hardware usage perspective. Our hardware hardly does any work, so it absolutely loves us right now. Which is good.

But what about the perceived performance, from the User Experience point of view? Do our users love us too?

Our rendering should be smoother. Our function execution rate is currently capped at 10 times per second. Let’s increase it. But how much?

We can make it easier to make that decision if we first take a look at the relationship between time and frame rate.

Time vs. Frame Rate

Frame rate is also known as FPS (Frames Per Second). It refers to the number of individual frames displayed per second.

In general, the higher fps the smoother the rendering will be. Video games often need 60fps or more to render smoothly. Most movies and tv series run smoothly at 24-30fps. The more fast-paced action a video or graphic has, the more FPS it needs to render smooth.

For some types of graphics, you can go as low as 15fps and still get a smooth render. But you should rarely go below 15fps because then the perceived performance will start to look noticeably slower.

To find your desired FPS in ms, you divide your target fps with 1000, e.g. 1000/15(fps) =66ms.

Take a look at this FPS to millisecond table:

var 2fps  = 1000/2; // 500ms
var 10fps = 1000/10; // 100ms
var 15fps = 1000/15; // 66ms
var 24fps = 1000/24; // 42ms
var 30fps = 1000/30; // 33ms
var 60fps = 1000/60; // 16ms

Do you recognize something? Our app is currently executing every 100ms, or in frame rate terms:10 frames per second.

Remember, I just said that anything below 15fps will usually appear slow? That could explain why current app’s rendering feels a bit off. There are not enough frames per second to render it smooth. It doesn’t feel instant.

Let’s do some testing

I’ll guarantee that if we crank our Viewport Dimensions feature up to run at 15fps (66ms), it will look significantly smoother than at the current 10fps (100ms).

And it won’t cost too much extra CPU power.

We only need it to be smooth enough.

Like I said earlier, testing opposite extremes is a good way to find out what not to do. Then the question becomes where between the two extremes does your project fit?

Try testing the following frame rates:5fps (500ms), 15fps (66ms), and 60fps (16ms) on your Viewport Dimensions app and see what happens.

What do you think?

5fps looks horrible. It looks broken. That would never work. Our hardware would love it, but our users will hate it!

15fps looks good to me. I wouldn't say that this frame rate is 100% smooth, but it’s clearly better than 10fps.

It’s also important to remember that if your eyes are trained to look for small details, it’s not comparable to the average user’s experience. Most people will consider 15fps smooth, for this type of graphic.

60fps is super smooth — not surprisingly. But honestly, it’s not worth massively extra hardware usage.

I’m going to settle at 15fps for my app.

Why 15 FPS?

The reason I decided on 15fps / 66ms, is because that frame rate is high enough to be perceived as smooth (for most people).

Most software, computers, and displays (screens) can render at 15fps without problems. Even most small, handheld devices can handle 15fps without issue.

The irony of high frame rates is that while logic tells us that more frames per second =smoother, it can also have the opposite effect.

If you try to force a frame rate or refresh rate that your user’s hardware and software can’t handle, the result is often:lagging.

Refresh rate :is how many times your display can redraw your screen. A refresh rate of 45Hz means that your display can redraw it’s entire screen 45 times in 1 second.

Now if your CPU &GPU can generate a frame rate of 60fps, but your display’s refresh rate is only 45Hz, then you have a mismatch. This often causes unpredictable results.

We developers and designers can easily get out of touch with reality. Our development machines are usually more powerful than the average person’s computer.

This is why we need to do solid research and test our assumptions before we push products on the market.

So 15fps is a happy medium that will also work for people who don’t have powerful machines.

Using 15fps will also save us at least 75% of the energy our hardware used before we added the throttler.

Anything below 15fps will usually start to look slow and laggy. It becomes really obvious once you get to around 10fps, which is why our initial frame rate wasn’t good enough.

Here’s an insightful video on the topic of response times which supports my argument for not going below 15fps (on most things).

Context &the Minimum Effective Dose

How much of a perceived difference is there from 15 to 30fps? If you test it out on the app we just built, you’ll be surprised.

You probably won’t be to notice any significant difference. Not a deal-breaking পার্থক্য But the price you pay for hardware usage is double up!

High fps costs a lot of hardware power. So why use more than necessary? There’s always a point of diminishing returns. That’s where the Minimum Effective Dose (MED) comes in. You only need enough, to get the desired effect, no more, no less.

Of course, it always depends on the context. Are we talking about an explosive first-person shooter video game or a simple pixel counter like the one we’ve built? Context is key!

A Finishing Touch

All the hard work is done. For good measure, let’s wrap all our code inside an IIFE ((function () {...})(); ) and initialize use strict mode inside:

(function() {
  "use strict";

  // Put all your code below

})();

IIFE (Immediately-Invoked Function Expression), keeps all your code inside a local scope.

If we don’t wrap our code like this, we risk “polluting the global namespace”. This is a fancy way of saying that we risk causing conflicts with other code, outside of our app.

use strict; is also used to prevent conflicts with 3rd party software that don’t follow strict coding rules.

We’re done!

Here is all the code we’ve written. I've added some comments for clarification and some extra white space for readability:

Finished project code:

(function() {
  "use strict";

  // throttled value before window event starts
  var throttled;

  // Delay function calls to 66ms (frame rate: 15fps)
  var delay = 66;

  // Declare empty variable for later use
  var resizeTimeout;

  // Grab body element
  var body = document.querySelector("body");

  // Create element
  var viewportDimensions = document.createElement("div");

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

  // Add div element inside body element
  body.appendChild(viewportDimensions);

  // window.resize callback function
  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);
  }

  // Called from getViewportDimensions()
  function removeViewportDimensions() {
    viewportDimensions.style.display = "none";
  }

  function throttler() {
    // Only run code if’s block if we’re not throttled
    if (!throttled) {
      // Callback: the function we want to throttle
      getViewportDimensions();
      // We're currently throttled!
      throttled = true;
      // Reset throttled variable back to false after delay
      setTimeout(function() {
        throttled = false;
      }, delay);
    }
  }

  // Listen to resize event, and run throttler()
  window.addEventListener("resize", throttler);

  // End of IFFE wrapper
})();

Here’s a CodePen you can play with.

How to use your app on any project

Include a script tag at the bottom of your HTML document, just above your closing body tag (</body> ) and add the path to your js file, like this:

<script src="/js/get-viewport-dimensions.js"></script>

Browser Compatibility

Our app is compatible with all modern browsers, and from Internet Explorer 9 and up.

Advanced throttling

What we learned in this tutorial is a great precursor for some the more powerful performance tools on the market.

If you need to boost performance on more complex projects than the one we built, check out the Lodash JavaScript library. Lodash has a lot of performance features and is very popular among developers. You can also learn a lot from digging through the library’s code.

Resources

• Mozilla’s Resize Event docs
• Mozilla’s Frame Rate docs
• Video on Response Times
• Frame Rate vs Refresh Rate
• Why 66ms when using setTimeout