जावास्क्रिप्ट के साथ लोकलस्टोरेज में कितनी तेजी से मूल्य खोज रहा है?

क्या किसी के पास किसी भी प्रदर्शन परीक्षण के लिंक हैं जो इंगित करते हैं कि जावास्क्रिप्ट ऑब्जेक्ट में डेटा को कैशिंग करना उचित है या नहीं? या क्या ब्राउज़र पहले से ही स्थानीय स्टोरेज से एक्सेस किए गए मानों को कैश करता है?

मैं स्थानीय स्टोरेज के फ़ायरफ़ॉक्स और क्रोम कार्यान्वयन में विशेष रूप से रूचि रखता हूं।

79
Mike 10 नवम्बर 2011, 06:10
2
एक प्रदर्शन परीक्षण-केस क्या दिखाता है? (एक लिखें और मैं इसे आपके लिए कई ब्राउज़रों पर चलाऊंगा ;-)
 – 
user166390
10 नवम्बर 2011, 06:13

4 जवाब

सबसे बढ़िया उत्तर

इसके लायक क्या है, इसके लिए यहां एक jsperf परीक्षण है।

FF7 और IE9 दोनों में नियमित ऑब्जेक्ट प्रॉपर्टी की पहुंच की तुलना में localStorage का बेंचमार्क उपयोग काफी धीमा है। बेशक, यह केवल एक माइक्रो-बेंचमार्क है, और जरूरी नहीं कि यह वास्तविक दुनिया के उपयोग या प्रदर्शन को प्रतिबिंबित करे...

मेरे FF 7 रन से लिया गया नमूना यह दिखाने के लिए कि "काफी धीमा" का अर्थ क्या है, ops/सेकंड में:

            native     local-storage    notes
small set   374,397    13,657           10 distinct items
large set   2,256      68               100 distinct items
read-bias   10,266     342              1 write, 10 reads, 10 distinct items

साथ ही, लोकलस्टोरेज में क्या रखा जा सकता है पर प्रतिबंध हैं। वाईएमएमवी।

42
Alexander Abakumov 10 पद 2018, 20:21
2
लेकिन नियमित वस्तुओं को कायम नहीं रखा जाता है। यह SQL स्टोरेज के साथ वेरिएबल एक्सेस की तुलना करने जैसा है। उनके अलग-अलग उद्देश्य हैं और पहला हमेशा बाद वाले की तुलना में बहुत तेज होता है।
 – 
cchamberlain
2 जुलाई 2019, 09:39
यह जानना अभी भी महत्वपूर्ण है, उदा। यह विचार करते समय कि क्या पृष्ठ के भीतर अक्सर उपयोग किए जाने वाले डेटा को कैश करना है (और संभावित रूप से एकाधिक टैब/विंडो में स्थिरता प्रबंधित करने की आवश्यकता है) या इसे हमेशा localStorage से प्राप्त करना है। मैं वर्तमान में OAuth रीफ्रेश टोकन और अन्य लगातार एप्लिकेशन स्थिति के लिए इस निर्णय का सामना कर रहा हूं। संयोग से, एक और लुकास ने पहले ही आपके उत्तर के नीचे इस पर चर्चा की है।
 – 
Lukas
13 अक्टूबर 2020, 19:07

बस एक छोटा बेंचमार्क बनाया। मैं जो करने की योजना बना रहा हूं वह स्थानीय स्टोरेज से अक्सर कुछ डेटा प्राप्त करना है और मुझे आश्चर्य है कि क्या यह अवरुद्ध होगा। जबकि localStorage.getItem सिंक किया गया ऑपरेशन है, यह डरावना लग सकता है लेकिन है ना?

  • आइटम प्राप्त करने के लिए 1 मिलियन बार लोकलस्टोरेज पर कॉल करने के लिए पहला परीक्षण जो मौजूद है।
  • आइटम प्राप्त करने के लिए 1 मिलियन बार लोकलस्टोरेज पर कॉल करने के लिए दूसरा परीक्षण जो मौजूद नहीं है।

परिणाम:

"आइटम मिला: 0.0007991071428571318ms प्रति कॉल"

"आइटम नहीं मिला: 0.0006365004639793477ms प्रति कॉल"

संक्षेप में - बस इसका उपयोग करें। इसमें समय नहीं लगता। 1 मिलीसेकंड का 0.0007.

https://jsbin.com/resuziqefa/edit?js,console

 let results = [];
 let sum = 0;
 localStorage.setItem('foo', 'foo bar baz foo bar baz foo bar baz foo');

 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('foo');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log(`Item found: ${sum / results.length}ms per call`);

 results = [];
 sum = 0;
 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('bar');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log(`Item not found: ${sum / results.length}ms per call`);
45
Lukas Liesis 10 नवम्बर 2017, 21:50
2
आपको एक संदर्भ बिंदु की आवश्यकता है, यह चर पहुंच की तुलना कैसे करता है?
 – 
Kugel
14 मार्च 2018, 09:37
4
यह तुलना करने के लिए नहीं बल्कि यह जांचने के लिए किया गया था कि क्या लोकलहोस्ट स्टोर इतनी तेजी से काम कर रहा है कि समग्र प्रदर्शन पर कोई प्रभाव न पड़े, या कम से कम नहीं। मुझे आश्चर्य है कि जिन चीजों की आप तुलना करना चाहते हैं, उन पर वास्तविक तुलना करने के लिए परीक्षण को कैसे लिखा जाना चाहिए और यह निश्चित रूप से इस प्रश्न के दायरे से बाहर है। जब क्रियाएँ 0.0007ms के दायरे में होती हैं, तब भी यह परीक्षण संभवतः पर्याप्त सटीक नहीं होता है और यह उन चीज़ों को कवर नहीं करता है कि CPU कैसे काम करता है और JS इंजन ही। मेरी दिलचस्पी यह जाँचने में थी कि क्या लोकलहोस्ट सामान्य रूप से "तेज़" है।
 – 
Lukas Liesis
14 मार्च 2018, 15:52
क्या आपने इसे एक साधारण स्ट्रिंग की बजाय बड़ी वस्तुओं के साथ परीक्षण किया है?
 – 
Sergiu
17 जून 2018, 10:54
1. लोकलस्टोरेज केवल स्ट्रिंग्स को स्टोर करता है, कोई ऑब्जेक्ट नहीं। 2. ब्राउज़र के आधार पर इसकी सीमाएँ होती हैं कि कितना डेटा संग्रहीत किया जा सकता है और वे सीमाएँ कुछ भी बड़ी नहीं हैं, जैसे 5Mb। मुझे नहीं पता कि आपके लिए "बड़ा" क्या है।
 – 
Lukas Liesis
17 जून 2018, 15:11
असल में मैं पूछ रहा था कि क्या कोई प्रदर्शन अंतर है जब मूल्य में केवल कुछ वर्णों की बजाय बड़ी स्ट्रिंग होती है?
 – 
Sergiu
19 जून 2018, 09:46

सेब से सेब

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

स्थानीय भंडारण बनाम कुकीज़

localStorage के मुकाबले एक बेहतर तुलना इसके क्लासिक समकक्ष, document.cookie से होगी। localStorage और document.cookie दोनों का मुख्य उद्देश्य सभी ब्राउज़र रीफ़्रेश में मान बनाए रखना है।

मैंने codsandbox.io पर एक उदाहरण एक साथ रखा है

  • localStorage, document.cookie से तेज परिमाण के दो क्रम हैं।
  • Object भंडारण localStorage (अप्रासंगिक लेकिन संदर्भ के लिए जोड़ा गया) से तेज परिमाण का एक क्रम है।

localStorage अब तक एक ब्राउज़र रीफ्रेश में मूल्यों को बनाए रखने के लिए सबसे तेज़ तंत्र है।

localstoragevcookies

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

12
cchamberlain 2 जुलाई 2019, 11:51
3
यह बात नहीं है, और सवाल का जवाब नहीं है। हो सकता है कि मैं यह तय करना चाहता हूं कि मुझे अपने साझा चर का कैश नियमित भंडारण में रखना चाहिए (और समय-समय पर इसे अपडेट करें) या इसे स्थानीय स्टोरेज में छोड़ दें और इसे अक्सर जांचें? यही प्रश्न का बिंदु है, और यह इसका उत्तर नहीं देता है।
 – 
DJClayworth
28 अक्टूबर 2019, 18:57
"नियमित भंडारण" को परिभाषित करें। एक वैश्विक चर में एक मान चिपकाना localStorage के साथ उपयोग के मामलों के दृष्टिकोण से बहुत अधिक समान नहीं है। localStorage से डेटा पढ़ना डिस्क से मेमोरी में ले जाता है, इसलिए आप एक चीज़ A की तुलना A + B से कर रहे हैं। एक स्मृति में अस्थायी उपयोग के लिए है और दूसरा डिस्क के लिए दृढ़ता के लिए है। आप एक ही गलियारे में रैम और हार्ड ड्राइव नहीं खरीदते हैं। यह प्रश्न localStorage पर खराब रोशनी डालता है और यह इसकी तुलना अपने शास्त्रीय समकक्ष, कुकीज़ से भी नहीं कर रहा है।
 – 
cchamberlain
29 अक्टूबर 2019, 02:04
यदि आप ऑब्जेक्ट को स्टोर करने का तरीका देखते हैं और स्थानीय स्टोरेज के साथ ऐसा करने का प्रयास करते हैं, तो मैं शर्त लगाता हूं कि ऑब्जेक्ट को स्ट्रिंग और बैक पर ले जाने के लिए अधिकतर समय व्यतीत होगा। जैसे सबसे लोकप्रिय तरीका JSON stringify होगा जो एक तरह का धीमा ऑपरेशन है।
 – 
Lukas Liesis
23 पद 2019, 10:53
यह सच है कि JSON stringify का उपयोग आमतौर पर स्थानीय स्टोरेज में डालने के लिए स्ट्रिंग को क्रमबद्ध करने के लिए किया जाता है, लेकिन इसे स्थानीय स्टोरेज के बेंचमार्क में शामिल नहीं किया जाना चाहिए। इस प्रश्न के कई उत्तरों के बारे में मुझे जो पसंद नहीं है, वह यह है कि वे लोकलस्टोरेज एक्सेस की तुलना रेगुलर वेरिएबल एक्सेस से करते हैं और दोनों में बहुत कम समानता है। प्रश्न का उत्तर देने के प्रयोजनों के लिए, लोकलस्टोरेज कैशे रीड्स को प्रतीत नहीं होता है, लेकिन इसे "बहुत धीमा" कहना एक मिथ्या नाम है। यह अपने स्थायी विकल्पों (कुकीज़) की तुलना में बहुत तेज़ है।
 – 
cchamberlain
12 मार्च 2020, 23:27

मैं पिछले उत्तरों के प्रयासों की सराहना करता हूं लेकिन बेंचमार्क की कमी पाई। यहां एक बेहतर माइक्रो-बेंचमार्क है, ध्यान दें, यह अभी भी एक माइक्रो-बेंचमार्क है। समयपूर्व प्रदर्शन अनुकूलन करने के लिए हमेशा वास्तविक प्रदर्शन बाधाओं को मापना पसंद करते हैं।

बेंचमार्क एक मान को पढ़ने और लिखने के लिए हैं, सौ वस्तुओं की सूची, और स्थानीय स्टोरेज से दस हजार वस्तुओं की सूची।

टीएल; डॉ:

single read: 0.0004ms, write: 0.0114ms
small list read: 0.0325ms, write: 0.0498ms
large list read: 3.1787ms, write: 3.3190ms

3,1 GHz क्वाड-कोर इंटेल कोर i7 पर चलता है। क्रोम 79.

read local storage - single x 2,439,715 ops/sec ±0.91% (62 runs sampled)
read local storage - small x 30,742 ops/sec ±0.78% (62 runs sampled)
read local storage - large x 315 ops/sec ±1.30% (60 runs sampled)
write local storage - single x 88,032 ops/sec ±4.25% (33 runs sampled)
write local storage - small x 20,079 ops/sec ±1.89% (59 runs sampled)
write local storage - large x 301 ops/sec ±1.09% (60 runs sampled)

Test: read local storage - single
mean: 0.0004098839352502669ms
margin of error: ±0.000003731514453196282ms
devation: ±0.00001499080315635531ms

Test: read local storage - small
mean: 0.03252840093744983ms
margin of error: ±0.0002551322114660716ms
devation: ±0.001024955633672395ms

Test: read local storage - large
mean: 3.1786666666666674ms
margin of error: ±0.041479799689699ms
devation: ±0.16392915653288143ms

Test: write local storage - single
mean: 0.011359496605398242ms
margin of error: ±0.00048286808926899016ms
devation: ±0.0014152377493978731ms

Test: write local storage - small
mean: 0.04980309857651518ms
margin of error: ±0.0009408982120607311ms
devation: ±0.0036873348473201325ms

Test: write local storage - large
mean: 3.31899154589372ms
margin of error: ±0.03605551145015122ms
devation: ±0.14249224018921072ms

यदि आप चाहें तो इसे स्वयं चलाने के लिए यहां एक स्निपेट है।

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
<script>
  const suite = new Benchmark.Suite();

  const genNum = () => Math.floor(Math.random() * 1000000);

  const genObj = () => ({
    target: String(genNum()),
    swap: String(genNum()),
    price: genNum()
  });

  const printStats = test =>
    console.log(
      `Test: ${test.name}
mean: ${test.stats.mean * 1000}ms
margin of error: ±${test.stats.moe * 1000}ms
devation: ±${test.stats.deviation * 1000}ms`
    );

  const singleNum = String(genNum());
  const smallList = _.range(100).map(genObj);
  const largeList = _.range(10000).map(genObj);

  const singleKey = "single-key";
  const smallKey = "small-key";
  const largeKey = "large-key";

  localStorage.setItem(singleKey, singleNum);
  localStorage.setItem(smallKey, JSON.stringify(smallList));
  localStorage.setItem(largeKey, JSON.stringify(largeList));

  suite
    .add("read local storage - single", function() {
      const readData = localStorage.getItem(singleKey);
    })
    .add("read local storage - small", function() {
      const readData = JSON.parse(localStorage.getItem(smallKey));
    })
    .add("read local storage - large", function() {
      const readData = JSON.parse(localStorage.getItem(largeKey));
    })
    .add("write local storage - single", function() {
      localStorage.setItem("single_write_key", singleNum);
    })
    .add("write local storage - small", function() {
      localStorage.setItem("small_write_key", JSON.stringify(smallList));
    })
    .add("write local storage - large", function() {
      localStorage.setItem("large_write_key", JSON.stringify(largeList));
    })
    .on("cycle", function(event) {
      console.log(String(event.target));
    })
    .on("complete", function() {
      this.forEach(printStats);
    })
    .run({ async: true });
</script>
11
alextes 24 नवम्बर 2019, 13:48