वेब विकास: लोकल स्टोरेज बनाम कैश HTTP

Question

मान लें कि मेरे पास एक वेब सर्वर है जो .json फ़ाइल के साथ GET का जवाब देता है। उस जीईटी की प्रतिक्रिया से पता चलता है कि ब्राउज़र 5 साल के लिए प्रतिक्रिया कैश करता है।

मान लें कि मेरे पास एक वेब पेज है जो पेज लोड होने पर JSON डेटा के लिए अनुरोध प्राप्त करता है। जब प्रतिक्रिया वापस आती है, तो JSON डेटा localStorage में रखा जाता है।

इस बिंदु पर

, अगर मैं फिर से कि JSON डेटा पुनः प्राप्त करने के, जो हो जाएगा चाहते हैं करना चाहते हैं जल्दी:

1. से localStorage
2. यह ला रहा है एक और अजाक्स GET अनुरोध (निष्पादित जहां ब्राउज़र नहीं होगा वास्तव में अनुरोध करें - यह इसके बजाय ब्राउज़र कैश तक पहुंच जाएगा)

क्या आप इसे स्वचालित परीक्षण या उदाहरण के साथ साबित कर सकते हैं?

आपका उत्तर सही क्यों है?

Answer 1

मतभेद यदि इन दो तरीकों में से कोई भी आधुनिक UAs (ब्राउज़र्स) में नगण्य होना चाहिए।

मेरा उत्तर सही है क्यों आप पूछते हैं? क्योंकि मैंने इन दोनों तंत्रों को लागू किया है।

Answer 2

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

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

इसके बजाय, आपको डेटा की दीर्घायु के बारे में सोचना चाहिए, और उपयोगकर्ता नियमित रूप से इसके लिए कितनी बार खोज करेगा।

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

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

अंत में, सबसे महत्वपूर्ण सवाल: डेवलपर के रूप में, अधिक जटिल localStorage-आधारित समाधान के विकास के लिए लागत-लाभ व्यापार बंद है? दूसरे शब्दों में, क्या आप 1-2 के लुकअप को कैश करने वाले अंतिम उपयोगकर्ता को पर्याप्त लाभ देखने जा रहे हैं, या आप एक महत्वपूर्ण मात्रा में जानकारी के बारे में बात कर रहे हैं, जहां उपयोगकर्ता 30s + लाभ देखेंगे।

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

Answer 3

दोनों सूत्रों का दावा है कि localStorage गति में ब्राउज़र कैश धड़कता है।

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

यहाँ localStorage से JavaScript फ़ाइलों को लोड हो रहा है पर मेरी ले है। कोड छोटा है, आप इसे मेरे गीथब प्रोजेक्ट https://github.com/webpgr/cached-webpgr.js पर देख सकते हैं या नीचे दिए गए पूर्ण उदाहरण से कोड उपयोगकर्ता को देख सकते हैं।

पूरा पुस्तकालय:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)}; 

पुस्तकालय

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
}); 

कॉलिंग