HTML5 के साथ तेज़ी से काम करने वाले वेब ऐप्लिकेशन बनाने के सबसे सही तरीके

Paul Irish

परिचय

HTML5 का ज़्यादातर मकसद, उन कॉम्पोनेंट और तकनीकों के लिए नेटिव ब्राउज़र की सहायता उपलब्ध कराना है जिन्हें हमने अब तक JavaScript लाइब्रेरी की मदद से हासिल किया है. अगर ये सुविधाएं उपलब्ध हैं, तो इनका इस्तेमाल करके उपयोगकर्ताओं को तेज़ी से अनुभव दिया जा सकता है. इस ट्यूटोरियल में, हम परफ़ॉर्मेंस से जुड़ी उस बेहतरीन रिसर्च के बारे में नहीं बताएंगे जिसे आपने Yahoo की बेहतरीन परफ़ॉर्मेंस वाली साइट या Google की पेज स्पीड के दस्तावेज़ और आइए, वेब को और ज़्यादा तेज़ बनाएं साइट पर देखा है. इसके बजाय, मैं इस बात पर फ़ोकस करूंगा कि आज HTML5 और CSS3 का इस्तेमाल करके, आपके वेब ऐप्लिकेशन को ज़्यादा रिस्पॉन्सिव कैसे बनाया जा सकता है.

पहली सलाह: कुकी के बजाय वेब स्टोरेज का इस्तेमाल करना

कुकी का इस्तेमाल, यूनीक उपयोगकर्ता के डेटा को ट्रैक करने के लिए कई सालों से किया जा रहा है. हालांकि, इनमें कई गंभीर नुकसान हैं. सबसे बड़ी गड़बड़ी यह है कि आपका सारा कुकी डेटा, हर एचटीटीपी अनुरोध हेडर में जोड़ दिया जाता है. इससे, जवाब मिलने में लगने वाले समय पर असर पड़ सकता है. खास तौर पर, XHR के दौरान. इसलिए, कुकी का साइज़ कम करना सबसे सही तरीका है. HTML5 में, हम इससे बेहतर कर सकते हैं: कुकी के बजाय sessionStorage और localStorage का इस्तेमाल करें.

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

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

दूसरा सुझाव: JavaScript ऐनिमेशन के बजाय, सीएसएस ट्रांज़िशन का इस्तेमाल करें

सीएसएस ट्रांज़िशन की मदद से, दो स्टेटस के बीच आकर्षक विज़ुअल ट्रांज़िशन बनाया जा सकता है. ज़्यादातर स्टाइल प्रॉपर्टी में बदलाव किया जा सकता है. जैसे, टेक्स्ट-शैडो, पोज़िशन, बैकग्राउंड या रंग में बदलाव करना. :hover या HTML5 फ़ॉर्म, :invalid, और :valid (फ़ॉर्म की पुष्टि की स्थितियों के साथ उदाहरण) जैसे स्यूडो-सिलेक्टर स्टेटस में ट्रांज़िशन का इस्तेमाल किया जा सकता है. हालांकि, ये काफ़ी असरदार होते हैं और किसी एलिमेंट में कोई क्लास जोड़ने पर ट्रिगर हो सकते हैं.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

totheleft और totheright की क्लास को टॉगल करके, बॉक्स को इधर-उधर ले जाया जा सकता है. इस कोड की तुलना, JavaScript ऐनिमेशन लाइब्रेरी से करें. साफ़ तौर पर, सीएसएस पर आधारित ऐनिमेशन का इस्तेमाल करने पर, ब्राउज़र को भेजे जाने वाले बाइट की संख्या काफ़ी कम होती है. इसके अलावा, जीपीयू लेवल पर ऐक्सेलरेशन की सुविधा की मदद से, ये विज़ुअल ट्रांज़िशन आसानी से होंगे.

तीसरा सुझाव: सर्वर राउंड ट्रिप के बजाय क्लाइंट-साइड डेटाबेस का इस्तेमाल करें

वेब एसक्यूएल डेटाबेस और IndexedDB, क्लाइंट साइड में डेटाबेस की सुविधा देते हैं. XMLHttpRequest या फ़ॉर्म सबमिशन के ज़रिए सर्वर पर डेटा पोस्ट करने के सामान्य पैटर्न के बजाय, इन क्लाइंट-साइड डेटाबेस का इस्तेमाल किया जा सकता है. सभी परफ़ॉर्मेंस इंजीनियर का मुख्य टारगेट, एचटीटीपी अनुरोधों को कम करना होता है. इसलिए, इनका इस्तेमाल डेटास्टोर के तौर पर करने से, एक्सएचआर या फ़ॉर्म पोस्ट के ज़रिए सर्वर पर कई ट्रिप बचाए जा सकते हैं. localStorage और sessionStorage का इस्तेमाल कुछ मामलों में किया जा सकता है, जैसे कि फ़ॉर्म सबमिशन की प्रोग्रेस कैप्चर करना. साथ ही, इन एपीआई की तुलना में क्लाइंट-साइड डेटाबेस एपीआई ज़्यादा तेज़ होते हैं. उदाहरण के लिए, अगर आपके पास डेटा ग्रिड कॉम्पोनेंट या सैकड़ों मैसेज वाला इनबॉक्स है, तो डेटा को लोकल डेटाबेस में सेव करने से, उपयोगकर्ता को खोजने, फ़िल्टर करने या क्रम से लगाने के लिए, एचटीटीपी राउंड ट्रिप की ज़रूरत नहीं पड़ेगी. हर कीस्ट्रोक पर, दोस्तों की सूची या टेक्स्ट इनपुट अपने-आप पूरा होने की सुविधा को फ़िल्टर किया जा सकता है. इससे, उपयोगकर्ता अनुभव को ज़्यादा रिस्पॉन्सिव बनाया जा सकता है.

चौथा सुझाव: JavaScript में किए गए सुधारों से परफ़ॉर्मेंस में काफ़ी फ़ायदा मिलता है

JavaScript 1.6 में, कलेक्शन के प्रोटोटाइप में कई अन्य तरीके जोड़े गए. ये सुविधाएं, अब IE को छोड़कर ज़्यादातर ब्राउज़र पर उपलब्ध हैं. उदाहरण के लिए:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

ज़्यादातर मामलों में, इन नेटिव तरीकों का इस्तेमाल करने पर, for (var i = 0, len = arr.length; i < len; i++) जैसे सामान्य for लूप की तुलना में काफ़ी तेज़ी से काम होता है. JSON.parse() की मदद से नेटिव JSON पार्सिंग, json2.js फ़ाइल की जगह ले लेती है. हमने इसे कुछ समय से शामिल किया हुआ है. नेटिव JSON, बाहरी स्क्रिप्ट का इस्तेमाल करने के मुकाबले ज़्यादा तेज़ और सुरक्षित है. यह IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3, और Chrome में पहले से मौजूद है. नेटिव String.trim एक और अच्छा उदाहरण है, जो न सिर्फ़ जेएस के लंबे फ़ॉर्मैट की तुलना में तेज़ है, बल्कि संभावित तौर पर ज़्यादा सही भी है. तकनीकी तौर पर, JavaScript में जोड़े गए इनमें से कोई भी एलिमेंट, HTML5 नहीं है. हालांकि, ये हाल ही में उपलब्ध होने वाली टेक्नोलॉजी के दायरे में आते हैं.

पांचवां सुझाव: सिर्फ़ ऑफ़लाइन ऐप्लिकेशन के लिए ही नहीं, बल्कि लाइव साइटों के लिए भी कैश मेनिफ़ेस्ट का इस्तेमाल करें

दो साल पहले, Wordpress ने WordPress Turbo नाम की सुविधा जोड़ने के लिए, Google Gears का इस्तेमाल किया था. इसकी मदद से, एडमिन पैनल में इस्तेमाल किए जाने वाले कई रिसॉर्स को स्थानीय तौर पर कैश मेमोरी में सेव किया जाता है. इससे, फ़ाइल को ऐक्सेस करने में लगने वाला समय कम हो जाता है. हम एचटीएमएल5 के applicationCache और cache.manifest की मदद से, उस व्यवहार को दोहरा सकते हैं. Expires हेडर सेट करने के मुकाबले, ऐप्लिकेशन कैश मेमोरी का थोड़ा फ़ायदा होता है. ऐसा इसलिए होता है, क्योंकि आपने एक ऐसी फ़ाइल बनाई है जिसमें उन स्टैटिक संसाधनों के बारे में बताया गया है जिन्हें कैश मेमोरी में सेव किया जा सकता है. इससे ब्राउज़र, उस फ़ाइल को ज़्यादा ऑप्टिमाइज़ कर सकते हैं. शायद, वे आपके इस्तेमाल से पहले ही उसे कैश मेमोरी में सेव कर दें. अपनी साइट के बुनियादी स्ट्रक्चर को टेंप्लेट के तौर पर इस्तेमाल करें. आपके पास ऐसा डेटा है जो बदल सकता है, लेकिन आम तौर पर उसके आस-पास का एचटीएमएल काफ़ी हद तक एक जैसा रहता है. ऐप्लिकेशन कैश मेमोरी की मदद से, अपने एचटीएमएल को सिर्फ़ टेंप्लेट की सीरीज़ के तौर पर इस्तेमाल किया जा सकता है. साथ ही, cache.manifest की मदद से मार्कअप को कैश मेमोरी में सेव किया जा सकता है. इसके बाद, कॉन्टेंट को अपडेट करने के लिए, JSON को वायर पर डिलीवर किया जा सकता है. यह मॉडल, iPhone या Android के नेटिव न्यूज़ ऐप्लिकेशन के काम करने के तरीके से काफ़ी मिलता-जुलता है.

छठा सुझाव: विज़ुअल अनुभव को बेहतर बनाने के लिए, हार्डवेयर से तेज़ी लाने की सुविधा चालू करना

मुख्य ब्राउज़र में, कई विज़ुअल ऑपरेशन में जीपीयू-लेवल पर बेहतर परफ़ॉर्मेंस का फ़ायदा लिया जा सकता है. इससे, ज़्यादा डाइनैमिक विज़ुअल ऑपरेशन को आसानी से पूरा किया जा सकता है. Firefox Minefield और IE9 के लिए, हार्डवेयर से तेज़ी लाने की सुविधा का एलान किया गया है. साथ ही, Safari ने अपने वर्शन 5 में हार्डवेयर-लेवल की तेज़ी लाने की सुविधा जोड़ी है. (यह सुविधा, मोबाइल Safari में काफ़ी पहले से उपलब्ध है.) Chromium ने Windows के लिए, 3D ट्रांसफ़ॉर्म और हार्डवेयर से तेज़ी लाने की सुविधा अभी जोड़ी है. यह सुविधा जल्द ही अन्य दो प्लैटफ़ॉर्म के लिए भी उपलब्ध होगी.

जीपीयू ऐक्सेलरेशन की सुविधा सिर्फ़ कुछ खास स्थितियों में चालू होती है. हालांकि, 3D ट्रांसफ़ॉर्म और ऐनिमेशन वाली ओपैसिटी, इस सुविधा को चालू करने के सबसे सामान्य तरीके हैं. इसे चालू करने का एक तरीका यह है:

.hwaccel {  -webkit-transform: translateZ(0); }

हालांकि, इसकी कोई गारंटी नहीं है. :) हार्डवेयर से तेज़ी लाने की सुविधा के साथ, जीपीयू कंपोजिंग की मदद से ऐनिमेशन वाले अनुवाद, रोटेशन, स्केलिंग, और ओपैसिटी को आसानी से इस्तेमाल किया जा सकता है. इनका फ़ायदा यह होगा कि इन्हें सीधे तौर पर जीपीयू पर मैनेज किया जा सकेगा. साथ ही, लेयर के कॉन्टेंट को फिर से नहीं खींचना पड़ेगा. हालांकि, पेज के लेआउट पर असर डालने वाली कोई भी प्रॉपर्टी अब भी अपेक्षाकृत धीमी होगी.

सातवीं सलाह: सीपीयू पर ज़्यादा लोड डालने वाले ऑपरेशन के लिए, वेब वर्कर्स का इस्तेमाल करें

वेब वर्कर्स के दो अहम फ़ायदे हैं: 1) वे तेज़ी से काम करते हैं. 2) आपके टास्क पर काम करते समय, ब्राउज़र रिस्पॉन्सिव बना रहता है. Workers के बारे में ज़्यादा जानने के लिए, एचटीएमएल5 स्लाइड डेक देखें. वेब वर्कर्स का इस्तेमाल इन स्थितियों में किया जा सकता है:

• लंबे दस्तावेज़ का टेक्स्ट फ़ॉर्मैट करना
• सिंटैक्स हाइलाइट करना
• इमेज प्रोसेसिंग
• इमेज सिंथेसिस
• बड़े ऐरे प्रोसेस करना

आठवां सुझाव: HTML5 फ़ॉर्म एट्रिब्यूट और इनपुट टाइप

HTML5 में इनपुट टाइप का एक नया सेट शामिल किया गया है. इसमें text, password, और file के सेट को अपग्रेड करके, search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, और color को शामिल किया गया है. इनके लिए ब्राउज़र की सहायता अलग-अलग होती है. फ़िलहाल, Opera में ज़्यादातर सुविधाएं काम करती हैं. सुविधा का पता लगाने की सुविधा की मदद से, यह पता लगाया जा सकता है कि ब्राउज़र में नेटिव सपोर्ट है या नहीं. साथ ही, यह भी पता लगाया जा सकता है कि वह डेटापिकर या कलर पिकर जैसे यूज़र इंटरफ़ेस (यूआई) की सुविधा देगा या नहीं. अगर नहीं, तो इन सामान्य टास्क को पूरा करने के लिए, JS विजेट का इस्तेमाल जारी रखा जा सकता है. टाइप के अलावा, हमारे सामान्य इनपुट फ़ील्ड में कुछ काम की सुविधाएं भी जोड़ी गई हैं. इनपुट placeholder में डिफ़ॉल्ट टेक्स्ट होता है, जो उस पर क्लिक करने पर हट जाता है. साथ ही, autofocus पेज लोड होने पर कर्सर को फ़ोकस करता है, ताकि आप उस फ़ील्ड के साथ तुरंत इंटरैक्ट कर सकें. इनपुट की पुष्टि करना, HTML5 के साथ आने वाली एक और सुविधा है. required एट्रिब्यूट जोड़ने का मतलब है कि जब तक वह फ़ील्ड नहीं भरा जाता, तब तक ब्राउज़र फ़ॉर्म सबमिट नहीं करेगा. साथ ही, pattern एट्रिब्यूट की मदद से, इनपुट के लिए कस्टम रेगुलर एक्सप्रेशन तय किया जा सकता है. इस एक्सप्रेशन के हिसाब से इनपुट की जांच की जाती है. अमान्य वैल्यू होने पर, फ़ॉर्म सबमिट नहीं किया जा सकता. यह डिक्लेरेटिव सिंटैक्स, सोर्स को पढ़ने में आसानी के साथ-साथ JavaScript की ज़रूरत को भी कम करता है. अगर इन सुविधाओं के लिए नेटिव सपोर्ट मौजूद नहीं है, तो फ़ॉलबैक के तौर पर कोई समाधान दिखाने के लिए, सुविधा का पता लगाने की सुविधा का इस्तेमाल किया जा सकता है. यहां नेटिव विजेट का इस्तेमाल करने का मतलब है कि आपको इन विजेट को दिखाने के लिए, ज़रूरी जटिल JavaScript और CSS भेजने की ज़रूरत नहीं है. इससे पेज लोड होने में लगने वाला समय कम हो जाता है और विजेट के काम करने की स्पीड भी बेहतर हो जाती है. इनमें से कुछ इनपुट को आज़माने के लिए, एचटीएमएल5 स्लाइड डेक देखें.

नौवीं सलाह: ज़्यादा साइज़ वाली इमेज स्प्राइट का अनुरोध करने के बजाय, CSS3 इफ़ेक्ट का इस्तेमाल करें

सीएसएस3 में स्टाइल देने के कई नए विकल्प हैं. इनकी मदद से, विज़ुअल डिज़ाइन को सटीक तरीके से दिखाने के लिए, इमेज का इस्तेमाल नहीं करना पड़ता. 2K इमेज को 100 बाइट की सीएसएस से बदलना एक बड़ी जीत है. साथ ही, आपने एक और एचटीटीपी अनुरोध भी हटा दिया है. आपको इन प्रॉपर्टी के बारे में जानकारी होनी चाहिए:

• लीनियर और रेडियल ग्रेडिएंट
• गोल किनारों के लिए border-radius
• ड्रॉप शैडो और चमक के लिए बॉक्स-शैडो
• ऐल्फ़ा ओपैसिटी के लिए RGBA
• रोटेशन के लिए ट्रांसफ़ॉर्म
• सीएसएस मास्क

उदाहरण के लिए, ग्रेडिएंट की मदद से बेहतर बटन बनाए जा सकते हैं. साथ ही, इमेज के बिना कई अन्य इफ़ेक्ट बनाए जा सकते हैं. इनमें से ज़्यादातर सुविधाओं के लिए ब्राउज़र की सहायता बहुत अच्छी है. साथ ही, Modernizr जैसी लाइब्रेरी का इस्तेमाल करके, उन ब्राउज़र का पता लगाया जा सकता है जो इन सुविधाओं के साथ काम नहीं करते. इससे, फ़ॉलबैक के तौर पर इमेज का इस्तेमाल किया जा सकता है.

दसवां सुझाव: XHR की तुलना में कम बैंडविथ का इस्तेमाल करके, तेज़ी से डेटा डिलीवर करने के लिए वेबसोकेट का इस्तेमाल करना

WebSockets को Comet की बढ़ती लोकप्रियता को ध्यान में रखकर डिज़ाइन किया गया था. XHR मॉडल के बजाय, अब WebSockets का इस्तेमाल करने के फ़ायदे हैं.

WebSockets में फ़्रेमिंग काफ़ी कम होती है. इसलिए, यह XHR की तुलना में कम बैंडविड्थ का इस्तेमाल करता है. कुछ रिपोर्ट से पता चलता है कि वायर के ज़रिए भेजे गए बाइट में 35% की कमी आई है. इसके अलावा, ज़्यादा वॉल्यूम में मैसेज डिलीवरी की परफ़ॉर्मेंस में अंतर ज़्यादा साफ़ तौर पर दिखता है. इस टेस्ट में, XHR को रिकॉर्ड किया गया है, जिसमें वेबसोकेट की तुलना में कुल समय 3500% ज़्यादा है. आखिर में, Ericsson Labs ने WebSockets की परफ़ॉर्मेंस पर विचार किया और पाया कि प्रोसेसिंग की ज़्यादा ज़रूरी शर्तों की वजह से, एचटीटीपी पर पिंग का समय, WebSockets पर पिंग के समय से 3 से 5 गुना ज़्यादा था. उन्होंने यह निष्कर्ष निकाला कि WebSocket प्रोटोकॉल, रीयल टाइम ऐप्लिकेशन के लिए ज़्यादा सही है.

अतिरिक्त संसाधन

मेज़रमेंट और परफ़ॉर्मेंस से जुड़े सुझाव पाने के लिए, आपको Firefox एक्सटेंशन Page Speed और YSlow का इस्तेमाल करना चाहिए. इसके अलावा, Chrome के लिए Speed Tracer और IE के लिए DynaTrace Ajax, विश्लेषण की ज़्यादा जानकारी वाले लॉगिंग लेवल उपलब्ध कराते हैं.