बस एक छोटा बेंचमार्क बनाया। मैं जो करने की योजना बना रहा हूं वह स्थानीय स्टोरेज से अक्सर कुछ डेटा प्राप्त करना है और मुझे आश्चर्य है कि क्या यह अवरुद्ध होगा। जबकि 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`);

सेब से सेब

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

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

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

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

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

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

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

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

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

टीएल; डॉ:

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>