जावास्क्रिप्ट के साथ एक प्रदर्शनकारी "व्यूपोर्ट आयाम प्राप्त करें" मिनी-ऐप बनाएं

एक शुरुआत के अनुकूल और व्यावहारिक वेनिला जावास्क्रिप्ट ट्यूटोरियल। बड़ी बात:कैसे लिखें उच्च-प्रदर्शन विंडो ईवेंट जो हमारे उपयोगकर्ताओं के हार्डवेयर को नष्ट नहीं करेगा।

के लिए:इंटरमीडिएट के लिए पूर्ण शुरुआती

आज हम “व्यूपोर्ट आयाम” नामक एक शानदार छोटा ऐप बना रहे हैं। यह सुविधा वास्तव में एक काम अच्छी तरह से करती है:जब आप अपनी ब्राउज़र विंडो का आकार बदलते हैं तो यह आपके ब्राउज़र व्यूपोर्ट की चौड़ाई और ऊंचाई मान प्रदर्शित करता है।

जब आप उत्तरदायी डिज़ाइन कर रहे हों तो यह एक अमूल्य उपकरण है। कोडपेन में एक समान विशेषता है। लेकिन मुझे कुछ बड़ी और कुछ अतिरिक्त सुविधाओं की जरूरत थी, इसलिए मैंने अपना खुद का निर्माण करने का फैसला किया। मैंने इस प्रक्रिया में बहुत कुछ सीखा, विशेष रूप से प्रदर्शन के मुद्दों को कैसे संभालना है। अब मैं इसे आपके साथ साझा कर रहा हूँ!

व्यूपोर्ट आयाम

मैं आपके मौजूदा ज्ञान के बारे में कोई धारणा नहीं बनाना चाहता। परिणामस्वरूप, यह एक अत्यधिक विस्तृत है ट्यूटोरियल।

तकनीकी विषय:

createElement() के साथ एलिमेंट कैसे बनाएं? विधि।
Style object के साथ तत्वों को कैसे शैलीबद्ध करें
विंडो ऑब्जेक्ट का resizeसेटअप और उपयोग कैसे करें घटना।
innerWidth . के साथ अपने ब्राउज़र व्यूपोर्ट से चौड़ाई और ऊंचाई कैसे प्राप्त करें और innerHeight गुण।
फ़ंक्शंस (कॉलबैक) के बाहर फ़ंक्शंस कैसे कॉल करें।
कितना सशर्त (सत्य/गलत)if बयान काम करते हैं।
setTimeout() का उपयोग करके टाइमर के साथ कोड निष्पादन में देरी कैसे करें?
clearTimeout() के साथ टाइमर कैसे रीसेट करें? ।
एक ईवेंट थ्रॉटलर फ़ंक्शन का उपयोग कैसे करें? विंडो इवेंट के प्रदर्शन में नाटकीय रूप से सुधार करने के लिए।
MS और FPS के बीच संबंध (मिलीसेकंड और फ्रेम प्रति सेकेंड)।
कथित प्रदर्शन के बीच महत्वपूर्ण अंतर और हार्डवेयर प्रदर्शन।

दृष्टिकोण

हम अपने व्यूपोर्ट डाइमेंशन ऐप के दो संस्करण बना रहे हैं।

संस्करण 1 ऐप को काम करने के बारे में है। यह मसौदा है, लेकिन अंतिम उत्पाद नहीं है।
संस्करण 2 संस्करण 1 को बेहतर बनाने के बारे में है। हम सीखेंगे कि कैसे अपने कोड को अधिक प्रदर्शनकारी, ऊर्जा कुशल और पढ़ने में आसान बनाया जाए।

चीज़ों को JavaScript केंद्रित रखने के लिए, हम सब कुछ करेंगे जावास्क्रिप्ट कोड में। सब कुछ एक जावास्क्रिप्ट फ़ाइल में रखने से, हमारे ऐप को आपके किसी भी मौजूदा प्रोजेक्ट में जोड़ना भी आसान हो जाएगा।

क्या आप पूरी तरह से नौसिखिया हैं? फिर मेरा सुझाव है कि आप कोडपेन का उपयोग करके अनुसरण करें। इसका उपयोग करने के लिए आपको साइन अप करने की भी आवश्यकता नहीं है। मैंने एक बहुत ही लोकप्रिय कोडपेन वीडियो ट्यूटोरियल प्रकाशित किया है जिसे आप यहां देख सकते हैं।

कैसे सीखें

यदि आप भ्रमित हैं, तो कुछ अनुच्छेदों पर वापस जाएं और सुनिश्चित करें कि आपने कुछ भी महत्वपूर्ण नहीं छोड़ा है। आप स्वयं पहले . समस्याओं को हल करने का प्रयास करके और जानेंगे और फिर संदर्भ कोड देखें दूसरा ।

यदि आप खो जाते हैं आप हमेशा तैयार कोड का संदर्भ दे सकते हैं:

संस्करण 1
संस्करण 2

आइए शुरू करें!

व्यूपोर्ट आयाम [संस्करण 1.0]

कोडिंग शुरू करने से पहले, आइए परियोजना की आवश्यकताओं पर एक नज़र डालें।

आवश्यकताएं

विंडो की चौड़ाई और ऊंचाई प्रदर्शित करने के लिए इसमें एक कंटेनर होना चाहिए।
यह हमारी विंडो के ऊपरी दाएं कोने में स्थित होना चाहिए।
इसे डिफ़ॉल्ट रूप से छिपाया जाना चाहिए।
विंडो का आकार बदलते ही यह दिखना चाहिए।
नवीनतम विंडो आकार बदलने के 3 सेकंड बाद इसे छिपाना चाहिए।

संस्करण 1 के लिए सुविधा आवश्यकताओं का सार यही है।

आइए कोडिंग शुरू करें!

डिस्प्ले कंटेनर बनाना और उसे स्टाइल करना

सबसे पहले, हमारे व्यूपोर्ट डाइमेंशन ऐप के लिए createElement का उपयोग करके एक div एलिमेंट बनाते हैं। विधि और इसे एक चर के लिए असाइन करें:

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 दस्तावेज़ का तत्व।

सबसे पहले, हमारे दस्तावेज़ के शरीर तत्व के संदर्भ को संग्रहीत करने के लिए एक चर घोषित करें। अपनी JavaScript फ़ाइल के शीर्ष पर निम्न कोड जोड़ें।

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

अब हमारे व्यूपोर्ट डाइमेंशन के डिव एलिमेंट को बॉडी एलिमेंट के अंदर जोड़ें। निम्नलिखित कोड को अपनी जावास्क्रिप्ट फ़ाइल के नीचे रखें (अंतिम शैली के नीचे:

body.appendChild(viewportDimensions);

appendChild() एक विधि है जो एक नोड को दूसरे नोड के अंदर जोड़ता है (जोड़ता है)। सब कुछ DOM में एक नोड होता है, और विभिन्न प्रकार के नोड होते हैं। इस मामले में, हम बॉडी एलिमेंट नोड के अंदर एक डिव एलिमेंट नोड जोड़ रहे हैं।

चूंकि हमारे div तत्व में अभी तक कोई सामग्री नहीं है, हम यह नहीं देख सकते हैं कि हमारा वर्तमान कोड भी काम करता है या नहीं। हम तत्व में एक अस्थायी सीमा जोड़कर जल्दी से पता लगा सकते हैं:

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

यदि यह काम करता है तो अब आपको अपनी खिड़की के ऊपरी दाएं कोने में एक मोटी काली सीमा के साथ एक छोटा सा बॉक्स देखना चाहिए:

आप अपनी ब्राउज़र विंडो में राइट-क्लिक करके भी चेक कर सकते हैं। फिर निरीक्षण . पर क्लिक करें अपने ब्राउज़र DevTools तक पहुँचने के लिए।

अब एलिमेंट्स टैब के अंतर्गत, अपने body . का पता लगाएं तत्व, और आपको कुछ इनलाइन शैली गुणों के साथ एक खाली div तत्व देखना चाहिए।

ध्यान दें कि जब आप DevTools में अपने माउस को उसके ऊपर ले जाते हैं तो अदृश्य 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);

बढ़िया, हमारे div तत्व को हमारे शरीर तत्व के अंदर बनाया, स्टाइल और जोड़ा गया है। इसके बाद विंडो रिसाइज इवेंट है।

विंडो का आकार बदलें ईवेंट सेट करना

विंडो ऑब्जेक्ट आपकी ब्राउज़र विंडो का प्रतिनिधित्व करता है। इसकी कई विधियाँ हैं, जिनमें addEventListener . शामिल हैं . यह विधि कई प्रकारों को सुन सकती है स्क्रॉलिंग, क्लिक करने, टाइप करने और आकार बदलने जैसे विंडो ईवेंट की संख्या।

हम 'resize' . का उपयोग करने जा रहे हैं प्रतिस्पर्धा। नीचे body.appendChild निम्नलिखित जोड़ें:

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

नोट:टिप्पणियाँ // ब्राउज़र द्वारा व्याख्या नहीं की जाती है, वे केवल हम मनुष्यों के लिए हैं

पहले हमने डिव एलिमेंट के गुणों को हथियाने के लिए डॉट नोटेशन का इस्तेमाल किया था। अब हम इसका उपयोग विधि . तक पहुंचने के लिए करते हैं विंडो ऑब्जेक्ट पर:addEventListener ।

हम दो तर्क पारित कर रहे हैं घटना श्रोता के लिए:'resize' और function() . हमने पहले ही आकार बदलने की घटना पर चर्चा की है, लेकिन इसके लिए क्या कार्य है?

function() कोड ब्लॉक सेट करता है जिसे हम हर बार विंडो आकार बदलने की घटना के सक्रिय होने पर निष्पादित करना चाहते हैं (जैसे ही आप अपनी विंडो का आकार बदलते हैं)। कोड ब्लॉक वह है जो घुंघराले ब्रेसिज़ के अंदर होता है { } (जिसे कार्य निकाय भी कहा जाता है) जिसमें अभी तक केवल एक // comment है ।

हर बार जब हम विंडो इवेंट को कॉल करते हैं, तो यह function() tells बताता है घुंघराले ब्रेसिज़ के अंदर कोड चलाने के लिए { } ।

यह पुष्टि करने के लिए कि यह काम कर रहा है, आइए console.log() . का उपयोग करके इसका परीक्षण करें :

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

अब अपनी विंडो का आकार बदलें। यदि आपका कंसोल 'वर्किंग!' प्रिंट करता है कई बार, इसका मतलब है कि आपकी विंडो आकार बदलने वाली घटना काम कर रही है।

कंसोल एक्सेस करना

कोडपेन में कंसोल तक पहुंचने के लिए, अपनी विंडो के निचले बाएं कोने में कंसोल बटन पर क्लिक करें। Chrome में कंसोल तक पहुंचने के लिए, यहां कीबोर्ड शॉर्टकट हैं:

सीएमडी + ऑप्ट + जे (मैक)।
Ctrl + Shift + J (Windows / Linux)

ठीक है, चलो हमारे विंडो इवेंट को काम पर लगाते हैं!

ब्राउज़र की चौड़ाई और ऊंचाई को पिक्सेल में लौटाना

अगला कदम व्यूपोर्ट की चौड़ाई और ऊंचाई के संख्यात्मक मानों को हथियाना है। हम चाहते हैं कि मान तुरंत अपडेट हो जाएं, क्योंकि हम अपनी विंडो का आकार बदलते हैं। विंडो ऑब्जेक्ट आपकी ब्राउज़र विंडो का प्रतिनिधित्व करता है। इसमें कुछ शानदार गुण हैं जिन्हें innerWidth . कहा जाता है और innerHeight ।

सोचो वे क्या करते हैं?

हाँ, वे आपकी ब्राउज़र विंडो की चौड़ाई और ऊँचाई को पिक्सेल (स्क्रॉलबार सहित) में लौटाते हैं। आइए इसकी पुष्टि करें, और console.log() . का उपयोग करें उन चौड़ाई और ऊंचाई संपत्ति मूल्यों को वापस करने के लिए।

चूँकि हम चाहते हैं कि यह वर्तमान मान गतिशील रूप से grab को प्राप्त करे हमें अपना 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);
});

अगर सब कुछ काम करता है, तो आप अपने कंसोल.लॉग को हटा सकते हैं और आगे बढ़ सकते हैं।

डिव एलिमेंट में चौड़ाई और ऊंचाई के मान जोड़ना

हम अपने div तत्व में लौटाई गई चौड़ाई और ऊंचाई मान जोड़ना चाहते हैं। अधिक विशेष रूप से हम मूल्यों को अंदर एम्बेड करना चाहते हैं हमारे डिव एलिमेंट्स ओपनिंग और क्लोजिंग टैग्स:

&lt;div&gt; We want width &amp; height values here &lt;/div&gt;

ऐसा करने के लिए हमें वेरिएबल को पकड़ना होगा जो हमारे 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 . कहा जाता है . यह विधि function() . को निष्पादित करने के लिए डिज़ाइन की गई है एक बार बाद मिलीसेकंड की एक निर्दिष्ट संख्या।

यह इस तरह काम करता है:

setTimeout(functionToExecute, 3000);

1000 एमएस =1 सेकंड। तो 3000 से ऊपर का मतलब 3 सेकंड है।

हम कौन सा फ़ंक्शन निष्पादित करना चाहते हैं? एक जो हमारे व्यूपोर्ट डाइमेंशन के डिव एलिमेंट को हटा देता है।

हमारे पास अभी तक ऐसा कोई फ़ंक्शन नहीं है, आइए एक बनाएं और इसे कॉल करें removeViewportDimensions() और इसके कोड ब्लॉक के अंदर { } आइए इसे हमारे div तत्व को हटाने के लिए कहें।

ऊपरनिम्न कोड जोड़ें आपका विंडो इवेंट फ़ंक्शन:

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

display संपत्ति निर्दिष्ट करती है कि कैसे या अगर एक तत्व प्रदर्शित होता है। इसे 'none' . पर सेट करके , हम इसे छिपा रहे हैं।

अब हमें कॉल करने की आवश्यकता है हमारा नया removeViewportDimensions() फ़ंक्शन, अंदर . से हमारा विंडो इवेंट कोड ब्लॉक। setTimeout() का उपयोग करना पहले से प्रारूपित करें, निम्नलिखित जोड़ें:

setTimeout(removeViewportDimensions, 3000);

अब हर बार विंडो आकार बदलने की घटना सक्रिय है, setTimeout 3 सेकंड की उलटी गिनती सेट करता है। दूसरे शब्दों में:हम देरी removeViewportDimensions() . पर कॉल करें 3 सेकंड तक।

जब 3 सेकंड पूरे हो जाएं, तो removeViewportDimensions() फ़ंक्शन को कॉल किया जाता है, और उसका कोड निष्पादित करता है:

अब हमारे डिव एलिमेंट की डिस्प्ले प्रॉपर्टी 'none' . पर सेट है , और छिपा हुआ है।

लेकिन हमें एक समस्या है

यदि आप दूसरी बार अपनी ब्राउज़र विंडो का आकार बदलने का प्रयास करते हैं, तो div तत्व को हटा दिए जाने के ठीक बाद, फिर div तत्व फिर से दिखाई नहीं देगा। ऐसा इसलिए है क्योंकि आखिरी हमारे प्रोग्राम में जो चीज होती है वह यह है कि हमारे डिव एलिमेंट को उसका display मिलता है संपत्ति 'none' . पर सेट है ।

हमारे कार्यक्रम में कहीं भी ऐसा नहीं है जहां हम कहते हैं कि हम चाहते हैं कि हमारा div तत्व फिर से दिखाई दे।

लेकिन फिर यह पहली बार क्यों दिखाई दिया? क्योंकि डिफ़ॉल्ट रूप से एक <div> तत्व एक तथाकथित ब्लॉक-स्तर . है तत्व। इसका मतलब है कि इसका डिफ़ॉल्ट display संपत्ति का मूल्य 'block' . है — जो एक दृश्यमान है प्रदर्शन प्रकार।

सबसे आखिरी चीज जो हम अपने डिव एलिमेंट के साथ करते हैं, वह है इसके डिस्प्ले वैल्यू को 'none' . पर सेट करना . तो वह मान अभी भी रहेगा तत्व पर हो जब हम दूसरी बार आकार बदलने की घटना चलाते हैं। जब तक आप अपने पेज को रिफ्रेश नहीं करते।

इसे ठीक करना आसान है। अपनी विंडो के आकार बदलें ईवेंट के कोड ब्लॉक के अंदर निम्नलिखित जोड़ें (setTimeout . के ऊपर) !):

viewportDimensions.style.display = "block";

अब हमारे डिव एलिमेंट का display प्रॉपर्टी 'block' . पर सेट है हर बार आकार बदलने की घटना चलती है। अपनी विंडो का आकार बदलने का प्रयास करें, इसके div तत्व को छिपाने के लिए प्रतीक्षा करें, और फिर पुन:आकार बदलें।

बहुत बढ़िया, हमारा ऐप काम करता है!

खैर.. तरह। हमें एक और समस्या है। यदि आप विस्तारित अवधि (3 सेकंड से अधिक) के लिए अपनी ब्राउज़र विंडो का आकार बदलने का प्रयास करते हैं तो div तत्व झिलमिलाहट शुरू कर देगा। यह ऐसा है जैसे यह लगातार चालू और बंद हो रही रोशनी थी।

हमारे ऐप के लिए कितना अयोग्य!

ऐसा इसलिए होता है, क्योंकि हम अपना काउंटडाउन टाइमर रीसेट नहीं कर रहे हैं। हर बार जब हम अपने व्यूपोर्ट का आकार बदलते हैं, तो विंडो इवेंट अपने फ़ंक्शन कोड ब्लॉक को जितनी बार हो सके निष्पादित करता है। तो हमारा removeViewportDimensions() फ़ंक्शन भी है कई बार फोन किया।

यह हमारे ऐप को अतिव्यापी कोड निष्पादन का एक समूह बनाने का कारण बनता है। हमारा डिव एलिमेंट display = 'none' . से प्रभावित हो रहा है संपत्ति और display = 'block' एक ही समय में संपत्ति।

यह हमारे div तत्व को लगातार दिखाता और छुपाता है, और झिलमिलाहट का कारण बनता है। यह बेकार है। इस समस्या को हल करने के लिए, हमें सीखना होगा कि कैसे समाशोधन टाइमर जावास्क्रिप्ट में काम करें।

उलटी गिनती टाइमर रीसेट करना

हम clearTimeout() . का उपयोग करके मौजूदा टाइमर को साफ़ कर सकते हैं तरीका। यह विधि साफ़ . करने के लिए डिज़ाइन की गई है एक टाइमर जिसे setTimeout . के साथ सेट किया गया है तरीका। वे साझेदार विधियों की तरह हैं।

मौजूदा टाइमर्स को साफ़ करना ठीक वही है जो हम चाहते हैं। हम केवल एक setTimeout() चलाना चाहते हैं टाइमर एक बार प्रति आकार घटना।

आप सोच सकते हैं कि हम clearTimeout() चला सकते हैं setTimeout() पर इस तरह:

clearTimeout(setTimeout);

लेकिन यह काम नहीं करेगा। ClearTimeout() पद्धति का उपयोग करने के लिए, आपको एक वैश्विक . का उपयोग करना होगा टाइमआउट विधि बनाते समय चर।

जावास्क्रिप्ट के दो क्षेत्र हैं:वैश्विक और स्थानीय:

एक वैश्विक चर एक फ़ंक्शन के बाहर घोषित एक चर है (वैश्विक दायरे में)।
एक स्थानीय चर एक फ़ंक्शन (स्थानीय दायरे) के अंदर घोषित एक चर है।

इसका मतलब है कि अगर हम setTimeout() को क्लियर करना चाहते हैं हमें इसे पहले एक वैश्विक चर के लिए असाइन करने की आवश्यकता है, और फिर हम clearTimeout() call को कॉल कर सकते हैं उस चर पर इसे रीसेट करने के लिए।

आइए अपना वैश्विक चर बनाएं, और इसे resizeTimeout . कहते हैं :

var resizeTimeout;

इस वेरिएबल को अपनी JavaScript फ़ाइल में सबसे ऊपर रखें।

अभी यह सिर्फ एक खाली चर है। यह केवल तब तक खाली रहेगा जब तक कि पहली बार हमारा आकार बदलने का कार्यक्रम शुरू नहीं हो जाता।

यदि आप 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]

हमारा ऐप काम करता है, लेकिन क्या यह काफी अच्छा है? उस प्रश्न का उत्तर देने के लिए हमें दो महत्वपूर्ण बातों को ध्यान में रखना होगा:

कथित प्रदर्शन:उपयोगकर्ता अनुभव (यूएक्स)।
हार्डवेयर प्रदर्शन (उपयोग और दक्षता)।

यूएक्स के दृष्टिकोण से, मुझे लगता है कि हमारा ऐप बहुत अच्छा प्रदर्शन करता है। इसमें एक तेज प्रतिक्रिया समय है, और यह पुरानी स्क्रीन पर भी बहुत अच्छी तरह से प्रस्तुत करता है (मैंने कुछ दशक पुराने दिग्गजों पर परीक्षण किया)। हम हमेशा दृश्यों (यूआई डिज़ाइन) को अनुकूलित करने के बारे में बहस कर सकते हैं। लेकिन शुद्ध कार्यक्षमता के आधार पर, हमारा ऐप अच्छा काम करता है।

लेकिन हार्डवेयर प्रदर्शन . से परिप्रेक्ष्य, हमारा ऐप वास्तव में . है खराब। इसकी तकनीकी आवश्यकताओं की तुलना में हमारा ऐप एक टन CPU और GPU संसाधनों का उपयोग कर रहा है।

क्या आप समझ सकते हैं क्यों? जब आप पेटू स्वभाव से परिचित नहीं होते हैं, तो ऐसा कुछ नहीं है जिसके बारे में आप सहज रूप से सोचते हैं विंडो इवेंट का।

यहां समस्या है:

हर बार जब हम अपनी ब्राउज़र विंडो का आकार बदलते हैं, तो हमारे ऐप का विंडो ईवेंट सैकड़ों बार अपना कार्य कर रहा होता है। कुछ ही सेकंड में!

मैंने कोडपेन पर एक फ़ंक्शन डाला जो समस्या की कल्पना करता है। ध्यान दें कि प्रति सेकंड कितने कार्य निष्पादित किए जाते हैं। छत के माध्यम से कुल गिनती झटका भी देखें:

कोडपेन उदाहरण

यह भयानक और पूरी तरह से अनावश्यक है! हमारा कोड जितना चाहिए उससे कहीं अधिक संसाधनों का उपयोग कर रहा है।

यह देखने के लिए कि ब्राउज़र इवेंट के दौरान आपका सीपीयू और जीपीयू कितना काम कर रहा है, आप क्रोम के टास्क मैनेजर को लॉन्च कर सकते हैं:

अपनी ब्राउज़र विंडो का आकार बदलने का प्रयास करें। टास्क मैनेजर के अंदर, आपको अपने सक्रिय ब्राउज़र टैब के बगल में एक सीपीयू और जीपीयू% उपयोग लौटाया जाएगा।

निरपेक्ष बनाम सापेक्ष हार्डवेयर उपयोग

पूर्ण और सापेक्ष हार्डवेयर उपयोग के बीच अंतर करना महत्वपूर्ण है। एक पूर्ण (कुल) हार्डवेयर उपयोग के दृष्टिकोण से, हमारे छोटे ऐप ने ज्यादा नुकसान नहीं किया है। अधिकांश कंप्यूटर इससे हिलने के लिए बहुत शक्तिशाली हैं।

लेकिन एक रिश्तेदार . से उपयोग के नजरिए से, हमारा ऐप बेहद अक्षम है। और यही समस्या है। हम कभी भी प्रदर्शन की उपेक्षा करने की आदत में नहीं पड़ना चाहते, क्योंकि यह हमें परेशान करेगा, और हमें गधे में काटने के लिए वापस आ जाएगा।

जैसे ही आप उन अनुप्रयोगों के साथ काम करना शुरू करते हैं जो भारी निष्पादित करते हैं कार्य, हार्डवेयर उपयोग एक गंभीर मुद्दा बन जाता है। यदि हम कोड निष्पादित करते हैं जैसे हम अभी करते हैं तो यह एक सुंदर दृश्य नहीं होगा।

विंडो इवेंट कैसे निष्पादित होता है

डिफ़ॉल्ट रूप से, एक मानक विंडो ईवेंट जितनी बार हो सके फ़ंक्शन निष्पादित करेगा, जब तक ईवेंट सक्रिय है। प्रत्येक छोटा परिवर्तन एक नई विंडो घटना को ट्रिगर करेगा। यही कारण है कि हमारे ऐप में अभी हास्यास्पद रूप से उच्च निष्पादन दर है।

फ़ंक्शन प्रति सेकंड कितनी बार निष्पादित होते हैं?

यह हर 4 से हर 40 मिलीसेकंड में कुछ भी हो सकता है। यह कई कारकों पर निर्भर करता है, जिनमें शामिल हैं:

आपका CPU और GPU (हार्डवेयर) कितना शक्तिशाली है?
आप किस ब्राउज़र का उपयोग कर रहे हैं?
आप कितना जटिल सॉफ़्टवेयर (कोड) चला रहे हैं? क्या इसमें एनिमेशन शामिल हैं?
इस समय आपका हार्डवेयर और क्या कर रहा है? क्या कोई YouTube वीडियो दूसरे टैब में चल रहा है?

आपका हार्डवेयर उस निश्चित समय पर उपलब्ध संसाधनों का उपयोग करता है जिसे आप कुछ करने के लिए कहते हैं।

कभी-कभी इसमें पर्याप्त मुफ़्त नहीं होता आपके अनुरोध का तुरंत जवाब देने के लिए संसाधन क्योंकि एक ही समय में एक टन ऐप्स चल रहे हैं।

इससे धीमी प्रतिक्रिया समय, स्क्रीन में खराबी, फ़्रीज़िंग और अन्य समस्याएं हो सकती हैं।

हार्डवेयर का उपयोग बढ़ जाता है। यही कारण है कि हमें अपने आवेदन की वर्तमान स्थिति को ठीक करने की आवश्यकता है। क्योंकि हम प्रदर्शन की परवाह करते हैं!

नोट:आधुनिक ब्राउज़रों में, न्यूनतम निष्पादन दर 4ms . है जो फ्रेम रेट के मामले में लगभग 250fps है। यह मोज़िला के वेब एपीआई डॉक्स के अनुसार है।

लेकिन इस विषय पर परस्पर विरोधी जानकारी है, अधिक जानकारी यहाँ है।

<ब्लॉकक्वॉट>

किसी फंक्शन को कितनी बार "कितनी बार" निष्पादित करना चाहिए?

आदर्श कार्य निष्पादन दर संदर्भ पर निर्भर करती है। क्या हम विस्तृत एनिमेशन के साथ काम कर रहे हैं? या कुछ आसान, जैसे कुछ संख्यात्मक मान लौटाना (जैसे हम अपने ऐप के साथ करते हैं)?

संदर्भ के बावजूद, हम आम तौर पर नहीं चाहते कि विंडो ईवेंट जितनी बार संभव हो फ़ंक्शन निष्पादित करें। यह बेतुका है। यह भी मुफ़्त नहीं है। हमें इसे रोकना होगा!

थ्रॉटलिंग . नामक प्रक्रिया का उपयोग करके हम निष्पादन आवृत्ति को नियंत्रित कर सकते हैं वह आगे आ रहा है।

इवेंट थ्रॉटलिंग टू द रेस्क्यू!

हम एक थ्रॉटलिंग फ़ंक्शन का उपयोग कर सकते हैं दूसरा . कितनी बार प्रतिबंधित करने के लिए फ़ंक्शन समय के साथ निष्पादित होता है। उदा.:"इस फ़ंक्शन को प्रति 100 ms में केवल एक बार कॉल करें"।

आइए एक बुनियादी ईवेंट थ्रॉटलर फ़ंक्शन पर एक नज़र डालें, जो विंडो आकार बदलने की घटना से ट्रिगर होता है। फिर थ्रॉटलर प्रत्येक 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 सेकंड)।

मैं कहता हूं तक क्योंकि कोई फ़ंक्शन हमेशा ठीक उसी दर पर सक्रिय नहीं होता है जिस पर आपने इसे सेट किया है। यह इस बात पर निर्भर करता है कि आपका फंक्शन चलने के समय आपका हार्डवेयर कितना व्यस्त है। क्या आप अपने कंप्यूटर पर अन्य ऊर्जा कर ऐप्स चला रहे हैं?.

थ्रॉटलर कोड में क्या हो रहा है:

अगर आप इसे पहली बार नहीं समझते हैं तो चिंता न करें। मैंने इस सामान के साथ खिलवाड़ करने में बहुत समय बिताया है जब तक कि यह अंत में क्लिक नहीं हो जाता।

हमारी JavaScript फ़ाइल के शीर्ष पर, हम दो वैश्विक . घोषित करके प्रारंभ करते हैं चर:

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 run चलाएं का कोड"।

“लेकिन अगर throttled करता है एक सच्चा मूल्य है, फिर वहीं रुक जाओ!"

जावास्क्रिप्ट में सही और गलत मान क्या हैं?

JavaScript में सत्य . होते हैं और झूठा मूल्य। हां, उन्हें यही कहा जाता है। सत्य एक मूल्य है जो सत्य है। Falsy एक ऐसा मान है जिसे असत्य (आश्चर्य!) माना जाता है।

जावास्क्रिप्ट में छह मिथ्या मान हैं:

undefined
null
0
'' (खाली स्ट्रिंग)
NaN
false

In JavaScript, anything that is not 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 operation. 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 difference. 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:

&lt;script src="/js/get-viewport-dimensions.js"&gt;&lt;/script&gt;

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