जब डेटाबेस और सर्वर कॉन्फ़िगर किए जाते हैं, तो प्रश्नों को अनुकूलित किया जाता है, सभी कैश चालू किए जाते हैं, सेवा को गति देने के लिए क्या विकल्प बने रहे? अमूर्तता का अंतिम स्तर, यूजर इंटरफेस, आपको वस्तुतः कुछ भी नहीं से गति वृद्धि प्राप्त करने की अनुमति देता है। ये तीन सरल व्यंजनों न केवल कई बार साइट को गति देने में मदद करेंगे, बल्कि इसमें कुछ सुविधाजनक बन्स भी जोड़ सकते हैं। पहले भाग में, एक साथ हम अनावश्यक कठिनाइयों के बिना साइट को आदिम अजाक्स नेविगेशन में स्थानांतरित करेंगे। दूसरे में, जब आप माउस पर और पृष्ठभूमि में होवर करते हैं तो प्रीलोड पृष्ठ जोड़ें। ध्वनि की गति पर काबू? हम कूदते हैं!

त्वरित वापसी वाले पृष्ठों के बीच अजाक्स संक्रमण

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

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

संक्षेप में बताएं कि विदेशी किस बारे में बात कर रहा है?

क्या आपने VKontakte ऑडियो प्लेयर देखा है जो पृष्ठों के बीच स्विच करते समय बिना रुके काम करता है? ऐसा इसलिए है क्योंकि पृष्ठ पुनः लोड नहीं होते हैं, जब प्रत्येक लिंक पर क्लिक करते हैं, तो जावास्क्रिप्ट सर्वर पर एक अनुरोध भेजता है, प्रतिक्रिया में एक पृष्ठ प्राप्त करता है, और इसके साथ वर्तमान पृष्ठ की सामग्री को प्रतिस्थापित करता है। इस दृष्टिकोण के स्पष्ट लाभ (एक निरंतर खिलाड़ी बनाने की क्षमता के अतिरिक्त): साइट को घटकों में गहराई से कुचलने से आपको पेज लोडिंग गति जीतने की अनुमति मिलती है (उदाहरण के लिए, आप साइट के स्थैतिक शीर्षलेख को फिर से लोड नहीं कर सकते हैं), और पहले से लोड की गई लिपियों को फिर से लोड करने की आवश्यकता नहीं है, जो अनुरोधों को बचाता है, जो भी देता है गति में वृद्धि (ब्राउज़र में कैश हमेशा इस समस्या को हल नहीं करता है, उदाहरण के लिए, प्लग-इन तीसरे पक्ष के गतिशील पुस्तकालयों के मामले में)। मेरे मामले में, अजाक्स के लिए संक्रमण Google चार्ट को कैश करने में असमर्थता द्वारा निर्धारित किया गया है, जिनमें से js प्रत्येक संक्रमण पर एक सेकंड से अधिक के लिए दिए गए थे और कैश नहीं किए गए थे, और लाइसेंस ने इसे स्थानीय रूप से सहेजने से मना किया था।

सर्वर साइड तैयारी।

MVC, JSON, पृष्ठ की सामग्री की पैकेजिंग करता है।

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

लिंक पर क्लिक करने पर, पृष्ठ को अब जावास्क्रिप्ट में प्रस्तुत किया जाएगा, इसलिए इसे कुछ प्रारूप में पैक करने की आवश्यकता है। सादगी के लिए हम JSON का उपयोग करते हैं।
आइए डेटा को घटकों में विभाजित करें: html कोड, इनलाइन स्क्रिप्ट, पेज शीर्षक और रीडायरेक्ट के बारे में जानकारी। हम एक फ़ंक्शन लिखेंगे जो इन घटकों को एक इनपुट के रूप में प्राप्त करेगा और लिंक पर क्लिक करते समय जेएस के अनुरोध का परिणाम वापस करेगा (छद्म कोड के नीचे, इसका आधार php था, लेकिन आपके पास एक अलग भाषा हो सकती है):

function response(html, options = null) { define res; //     JSON res['html'] = html; // html  html- . //      html,   – error. if (options) { if (options['script']) { res['script'] = options['script']; } if (options['redirect']) { res['redirect'] = options['redirect']; } if (options['title']) { res['title'] = options['title']; } } //       json   UTF-8 header('Content-Type: application/json; charset=UTF-8'); print json_encode($res); //  res  json     http. exit(); //       json . } 

अब, पेज को अजाक्स संक्रमण के दौरान देने के लिए, यह प्रतिक्रिया () फ़ंक्शन को कॉल करने के लिए पर्याप्त होगा।
उदाहरण के लिए, php के लिए, यह इस तरह दिखेगा:

 function wrapAbout($employees) { return "<div>   2012 .    : {$employees}</div>"; } $employees = getEmployeesNumber(); $html = wrapAbout($employees); response($html, array('title' => ' ')); 

हैंडलिंग में त्रुटि।

पृष्ठ वापस करना हमेशा संभव नहीं होता है। हम त्रुटि जानकारी को अलग से संसाधित करेंगे।
ऐसा करने के लिए, हम एक फ़ंक्शन लिखते हैं:

 function error(num, msg) { define res; //,     JSON define res['error']; //     res['error']['num'] = $num; //  res['error']['msg'] = $msg; //          print json_encode(res); exit(); } 

अब, यदि कोई अपवाद उड़ गया है, या गलत डेटा प्रसारित हो गया है, तो हम इस तरह से प्रतिक्रिया करते हैं:

 if ($_POST['password'] != $password) { error(1, 'Invalid password'); } 

प्रत्यक्ष अनुरोध के लिए समर्थन।

लेकिन क्या होगा अगर उपयोगकर्ता लिंक का पालन नहीं करता है, लेकिन सीधे चला गया, या F5 दबाया? ऐसे मामलों को भी संभालने की जरूरत है। इसके लिए, हमने कोड को अनुकूलित किया ताकि HTML के साथ एक पंक्ति वापस आ जाए। यह html को सीधे देने के लिए पर्याप्त है, और मामलों में जबड़े के रूप में नहीं जब अनुरोध अजाक्स से नहीं आया। इसे कैसे समझें? अजाक्स से अनुरोध करते समय, हम एक अतिरिक्त पैरामीटर अजाक्स = 1 पास करेंगे, इसलिए हम हमेशा यह अंतर कर सकते हैं कि अनुरोध कहां से आया और परिणाम कैसे लौटाया जाए।

ग्राहक भाग

ग्राहक पक्ष की तैयारी

यहां हम थोड़ा सा रिफ्लेक्टर लगाने की भी प्रतीक्षा कर रहे हैं। एक अवधारणा जैसे "पृष्ठ स्थिति" प्रकट होती है। हम अब पृष्ठों के बीच नहीं जाते हैं, सब कुछ एक पर होता है, इसलिए राज्यों को अलग-थलग करने की आवश्यकता है। हम बैक बटन के साथ काम करना चाहते हैं, तुरंत पृष्ठ की पिछली स्थिति में लौट रहे हैं, और साथ ही हम जावास्क्रिप्ट वातावरण में सभी चर भी चाहते हैं। ऐसा करने के लिए, हम राज्य को एक इकाई में संग्रहीत करेंगे जो पूर्ण वर्तमान स्थिति को संग्रहीत करता है। यह डरावना लगता है, यह तुच्छ दिखता है:

 cur = {somevar: true}; 

हम सभी पेज वैरिएबल को क्यूर के अंदर स्टोर करेंगे - फिर हम आसानी से इसकी स्थिति को बचा सकते हैं।
आइए एक सहायक कैश शुरू करें, जहां पिछले पृष्ठों की सामग्री को कुछ चरणों में संग्रहीत किया जाएगा:

 var globalPageHtml = []; 

लिंक प्रसंस्करण

लिंक अब लिंक नहीं हैं, लेकिन बटन, जब क्लिक किए जाते हैं, तो जावास्क्रिप्ट को अंजैक्स के माध्यम से एक और पृष्ठ लोड करना निष्पादित करें। उसी समय, आपको सामान्य संक्रमण की संभावना को बनाए रखने की आवश्यकता है यदि अजाक्स नेविगेशन उपलब्ध नहीं है (उदाहरण के लिए, यदि इतिहास एपीआई समर्थित नहीं है, और हम URL को बदल नहीं सकते हैं, लेकिन हम हैश नेविगेशन का उपयोग नहीं करना चाहते हैं)। और आपको एक नए टैब में लिंक खोलने के लिए ctrl + क्लिक का समर्थन करना होगा। इस तरह से सभी लिंक फिर से करें:

 <a onclick="go('/someurl', null, event); return false;" href="/someurl">Some link</a> 

क्या जाना है? यह सबसे महत्वपूर्ण विधि है, यह वह होगा जो नेविगेशन से निपटेगा, इसके बारे में और नीचे।

URL और इतिहास के साथ काम करें

नेविगेशन इतिहास के साथ काम करने के लिए, हम लोकप्रिय history.js लाइब्रेरी का उपयोग करेंगे। यह हमें भविष्य में एक ही समय में हैश नेविगेशन का समर्थन करने की अनुमति देगा, लेकिन अब हम एक आदिम अजाक्स नेविगेशन का निर्माण कर रहे हैं, जिसका अर्थ है कि प्रगति में पिछड़ने वाले ब्राउज़र को छोड़ दिया जा सकता है।
हम इतिहास के साथ काम को शुरू करते हैं (यह माना जाता है कि परियोजना बैकरी के काम का समर्थन करने के लिए jquery का उपयोग करती है):

 var History = window.History; History.enabled = !!(window.history && history.pushState); //Temp turn off html4 if (History.enabled) { $(window).bind('statechange', function() { var State = History.getState(); //replacingState -  ,    ajax-  .      URL   ,      -   back     .           ajax-     . if (!cur.replacingState) { cur = State.data; //,   ,   history api,      history.js if (globalPageHtml[State.url]) { //       ? $('#content').html(globalPageHtml[State.url].html); // ,       content,    html     . Html    . if (globalPageHtml[State.url].scripts) {//     ,    ,   , jquery       DOM. var fragment = document.createDocumentFragment(); globalPageHtml[State.url].scripts.each( function(nodeIndex, scriptNode) { fragment.appendChild(scriptNode); //   ,            -    DOM. }); document.getElementById('content').appendChild(fragment); //    DOM  ,     . } window.scrollTo(globalPageHtml[State.url].scroll[0], globalPageHtml[State.url].scroll[1]); //        ,    . delete globalPageHtml[State.url]; //  } else { go(State.url, null, null, true); //    "" ,      (,         URL  ).       ,      . } } cur.replacingState = false; }); } 

अजाक्स संक्रमण के लिए मूल जावास्क्रिप्ट

इसलिए हम सबसे महत्वपूर्ण हो गए। जब लिंक पर क्लिक किया जाता है तो गो फ़ंक्शन को कहा जाता है:

 function go(url, query, event, back) { if (!History.enabled || (event && (event.ctrlKey || event.metaKey))) { //  ctrl ( command  )   history api var requestString = url; if (query) { requestString += query; } if (!History.enabled) { window.location = requestString; //   history api,      } else { window.open(requestString, '_blank'); //    ctrl,      /,   ajax } return; } var query = query || {}; var urlString = (url.length > 0) ? url : $(location).attr('href').split('?', 1); // URL   ( ),    if (jQuery.param(query).length > 0) { urlString += '?' + jQuery.param(query); //    (        ) } urlString = window.decodeURI(urlString); //  .          URL  history api.   , ,   rewrite,       N     /post/N,  - /post?item=N -        ajax . $.extend(query, {ajax: 1}); //       ajax  (   ,   url    ) $.ajax({ url: url, global: false, type: "GET", data: query, dataType: "json", success: function (res) { if (res.html) { //ajax     html,         ,      if (!back) { //  ,      ,      var currentUrl = $(location).attr('href'); globalPageHtml[currentUrl] = new Object(); //    ,    url globalPageHtml[currentUrl].html = $('#content').html(); globalPageHtml[currentUrl].scroll = getScrollXY(); //     globalPageHtml[currentUrl].scripts = $('script:not([src])'); //   .      .          cur.   ,  -       (,      ),     -  ,      (disclaimer:       ).   inline  ,                 (    ). //   state, history api,   cur.replacingState = true; History.replaceState(cur, $(document).attr('title') || null, window.decodeURI(currentUrl) || null); //       cur,  ,       back,   cur.replacingState = true; History.pushState(null, res.title || null, urlString); // URL     } window.scrollTo(0, 0); //      document.getElementById('content').innerHTML = res.html; //, ,    cur = {}; $('script:not([src])').each( //  (      innerHTML,   html()  jquery        ) function(nodeIndex, scriptNode) { try {eval(scriptNode.innerHTML);} catch(e) {/*Do nothing*/} }); } else { errorAlert(res.error || 'Unable to load page ' + url); //errorAlert - ,     ,    } }, error: function (res) { errorAlert(res.error || 'Unable to load page ' + url); } }); } 

वह सब है! अजाक्स नेविगेशन तैयार है।

इस दृष्टिकोण पर विचार नहीं किए गए पहलुओं पर महत्वपूर्ण नोट्स

अधिक गंभीर अजाक्स नेविगेशन IE के लिए हैश कार्य को ध्यान में रखेगा, लेकिन हमारे सिस्टम की सीमाएं इस तक सीमित नहीं हैं।

विभिन्न पृष्ठों के लिए अलग स्क्रिप्ट लोड हो रहा है

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

स्क्रिप्ट संस्करण

Js कोड में, एक बग और आपने अभी एक नया संस्करण बनाया है? समस्या: अजाक्स नेविगेशन के दौरान, स्क्रिप्ट को दिनों के लिए अपडेट नहीं किया जा सकता है - ब्राउज़र में खोला गया पृष्ठ, जिसके अंदर स्क्रिप्ट हर अनुरोध पर डाउनलोड नहीं होती हैं, लेकिन लंबे समय से स्मृति में है, उपयोगकर्ता को अपडेट प्राप्त करने से रोकता है। एक समाधान है: प्रत्येक अजाक्स संक्रमण के साथ सर्वर से जेएस-मॉड्यूल के संस्करण संख्याओं को प्रसारित करें। यदि मॉड्यूल अपडेट किया गया है, तो उसके नए संस्करण को डाउनलोड करें, स्मृति से पिछले एक को दबाकर। वही सीएसएस के लिए जाता है।

अजाक्स ग्लोबल कैश

अधिक गंभीर अजाक्स नेविगेशन प्रणाली में, कुछ अनुरोधों और पृष्ठों को मैन्युअल रूप से कैश करने के लिए वैश्विक अनुरोध कैश को लागू करना सुविधाजनक है। यह हॉवर करते समय प्रीलोडिंग के लिए उपयोगी हो सकता है। दरअसल, हम अब प्रीलोडिंग की ओर बढ़ेंगे।

पृष्ठ लोड करें

हमारे पास अजाक्स नेविगेशन होने के बाद, हम सेवा को गति देने के लिए सरल लेकिन सुपर कार्यात्मक सुविधाओं का उपयोग कर सकते हैं। इन सरल ट्रिक्स का प्रभाव बेतहाशा अपेक्षाओं से अधिक है: साइट का काम तुरंत हो जाता है। और प्रीलोड हमें इसमें मदद करेंगे। इसे दो मूलभूत रूप से अलग-अलग तरीकों से विभाजित किया जा सकता है: पृष्ठभूमि में प्रीलोड, और जब आप ओवर होवर करते हैं। पहला वर्तमान पृष्ठ से जुड़े साइट के कुछ निश्चित वर्गों के लिए उपलब्ध है। उदाहरण के लिए, यदि सेटिंग पृष्ठ पर पाँच टैब हैं, तो मुख्य पृष्ठ को पृष्ठभूमि में लोड करने के बाद, हम इन टैब को लोड कर सकते हैं ताकि जब वे क्लिक करें, तो वे तुरंत खुलें। यह तकनीक उत्पादों की सूची के लिए काम नहीं करेगी (और आम तौर पर किसी भी लिंक की सूची) - यदि आप खोज परिणामों से प्रत्येक उत्पाद के लिए एक पेज लोड नहीं कर सकते हैं तो सूची 5 से अधिक तत्वों की है। जब आप माउस पर होवर करेंगे तो यह प्रीलोड करने में मदद करेगा।

पृष्ठभूमि प्रीलोड

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

 function preloadTabs(current) { cur.preloading = 1; //   ajax    (     ajax      ,      ),    .  ,    callback   (  createElement   DOM-,         -    ,    ). function(data, tab1Html, tab2Html, tab3Html) { var page = $('#content'); if (cur.section != 'tab1') { page.append(createElement('div', {innerHTML: tab1Html})); } if (cur.section != 'tab2') { page.append(createElement('div', {innerHTML: tab2Html})); } if (cur.section != 'tab3') { page.append(createElement('div', {innerHTML: tab3Html})); } cur.preloading = 2; //0 -   , 1 -      , 2 -   } 

एक फ़ंक्शन जो लिंक में खड़ा होगा हैंडलर पर क्लिक करें और वास्तव में टैब स्विच करें:

 function switchTab(section) { if (cur.section == section) { //    return; } var doSwitch = function(section) { hideCurrentSection(); //   id     cur.section = section; // id  showCurrentSection(); //  ,    ,     append ( display:none )  DOM   //      history  ,    }; if (!cur.preloading || cur.preloading == 1) { //     $('#load_progress').show(); // ,     ,    if (cur.preloading != 1) { preloadTabs(cur.section); } var waitPreload = setInterval(function() { if (cur.preloaded == 2) { //  $('#load_progress').hide(); //    clearInterval(waitPreload); doSwitch(section); } }, 100); } else { doSwitch(section); } } 

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

अधिभार पर माउस

लगभग हर क्लिक पर क्लिक के बीच में ही महत्वपूर्ण (मिलीसेकंड में) देरी होती है और वह अवधि जब कर्सर लिंक पर होता है। इससे आप उस पर क्लिक करने से पहले लिंक को डाउनलोड करने का प्रबंधन कर सकते हैं, जिससे ट्रांज़िशन तत्काल में बदल जाएगा। यहां आपको सावधान रहने की आवश्यकता है: क्या होगा यदि उपयोगकर्ता बिंदु ए से बी तक कर्सर ले जाता है, और हमारा लिंक सड़क के साथ मिलता है (और एक ही समय में दर्जनों अन्य - हम कर्सर और लिंक पर क्लिक करने पर अनुरोधों के साथ ब्राउज़र और अजाक्स सेवा पर बम नहीं जीतते हैं)। यह पता चलता है कि लिंक पर क्लिक करने से पहले कर्सर लिन्गर्स पर क्लिक करता है, और आप क्लिकों के बीच ऐसी न्यूनतम समय सीमा की गणना कर सकते हैं, लेकिन आपके द्वारा लिंक के ऊपर मंडराने के बाद जिसके लिए आप पेज लोड कर सकते हैं, लेकिन डाउनलोड करने के इरादे से हॉवर ओवर करने के लिए पर्याप्त समय के बाद डाउनलोड शुरू हो जाएगा। और अभी नहीं गुजर रहा है। इसके अलावा, हम सख्ती से एक लिंक को कैश करेंगे, अगर हम एक नया लोड करते हैं, तो पुराने को मेमोरी से मिटा दिया जाएगा।

कर्सर पर मंडराने के बाद, हम फ़ंक्शन को कॉल करेंगे (उदाहरण के लिए, उपयोगकर्ता सूचियों के लिए, उपयोगकर्ता प्रोफ़ाइल लोड करें):

 function preloadUser(user_id) { cur.pendingPreloadUid = user_id; cur.pendingPreload = setTimeout(doPreloadUser, 50); //50ms -         } 

माउसआउट ईवेंट द्वारा (कर्सर को लिंक से दूर ले जाया गया था), हम कॉल करेंगे:

 function cancelPreloadUser() { clearTimeout(cur.pendingPreload); } 

और यदि आप 50ms प्रतीक्षा करने में कामयाब रहे, तो लिंक को पहले से लोड करें:

 function doPreloadUser() { var uid = cur.pendingPreloadUid; if (cur.cachedUser && (uid != cur.cachedUser.uid)) { // -   ,     ,        unloadUser(cur.cachedUser.uid); } else { cur.cachedUser = new Object(); } cur.cachedUser.uid = uid; //  ajax ,      .     ,     ,           ,          ,      ,        .       cachedUser,    . } 

लिंक को अनलोड करने के लिए मत भूलना अगर कोई नया लोड करने का अनुरोध आता है, तो अनलोडर (यूआईडी) फ़ंक्शन में आपको वैश्विक कैश को खाली करने की आवश्यकता होती है।



धन्यवाद यदि आप वीरतापूर्वक इस जगह पर पढ़ते हैं, या इस लेख को तैयार करने में काम की सराहना करते हैं। सभी वर्णित विधियों को परियोजना के आकार के आधार पर कई घंटों से कई दिनों तक लागू किया जाता है। मैं वास्तव में आशा करता हूं कि यह सामग्री आपकी वेब सेवाओं को गति देने में कई बार आपकी मदद करेगी। टिप्पणी लिखें और टिप्पणियों में वेबसाइट त्वरण के अपने अनुभव को साझा करें।