Javascript 如果在缓存中，则使用缓存版本，否则获取新JSON

关于最终用户绩效的一些建议/指导之后

我们已经建立了一个小型的客户端“个人搜索”，它从一个JSON文件中获取数据。我遇到的问题是编译JSON以供使用的服务器很旧/速度慢（非营利社区组）。因此，用户必须等待3-6秒才能与页面交互。我知道如何请求JSON数据可以提高效率，但我对javascript还是非常陌生。JSON被编译为：

print(JSON.stringify(datarecord));

这就是我当前请求JSON文件的方式，然后使用

var request = new XMLHttpRequest();
request.open("GET", "linktojson.json", false);
request.send(null);
var a = JSON.parse(request.responseText);


$(document).ready(function() {    
// Javascript things here
console.log(a);
}

因此，我怀疑每次用户访问页面时，都会发出请求。然后（缓慢地）编译JSON，然后页面就可以使用了

我一直在考虑将JSON数据存储在用户缓存中，这样一来，每次会话只需要获取一次JSON数据，但是加载时间仍然很慢

这就是我更新代码的方式

var request = new XMLHttpRequest();
request.open("GET", "linktojson.json", false);
request.send(null);
localStorage.setItem("request",(request));

$(document).ready(function() {

var jsonString = localStorage.getItem("request");
var retrievedObject = JSON.parse(jsonString);
console.log(retrievedObject);
// Javascript things here
}

我还能够确认瓶颈发生在服务器的JSON请求点。我通过保存生成的JSON副本，然后使用这个“静态”JSON文件来测试这一点，页面将在一秒钟内呈现

然后再进一步，使用下面的JSON文件（28K记录），页面仍然快速呈现

链接：

---

对不起，如果这是一个有点长篇大论。我想帮助您尽可能最好地描述这个问题。

如果您想利用缓存，您必须在执行请求之前先检查该缓存。否则，就没什么意义了

不推荐使用同步阻塞请求，如果可能，您还应该切换到使用

fetch

，而不是

XMLHttpRequest

在执行请求之前首先检查数据是否在catch中的函数可能如下所示：

async function getData() {
   let data = localStorage.getItem('request')
   // check if data is in cache
   if( data === null ) {
      // if it is not in cache then request it
      const response = await fetch('linktojson.json')

      // parse the json response
      data = await response.json()
      
      // store the data in the cache
      localStorage.setItem('request', JSON.stringify(data));
   } else {
      // if it exists then parse it
      data = JSON.parse(data)
   }

   // return the data
   return data
}

getData()
.then(data => {
   // ensure DOM is ready
   $(() => {
      console.log('do something with data', data)
   })
})
.catch(err => {
   console.log('error occured')
})

然后，您可以这样做：

async function getData() {
   let data = localStorage.getItem('request')
   // check if data is in cache
   if( data === null ) {
      // if it is not in cache then request it
      const response = await fetch('linktojson.json')

      // parse the json response
      data = await response.json()
      
      // store the data in the cache
      localStorage.setItem('request', JSON.stringify(data));
   } else {
      // if it exists then parse it
      data = JSON.parse(data)
   }

   // return the data
   return data
}

getData()
.then(data => {
   // ensure DOM is ready
   $(() => {
      console.log('do something with data', data)
   })
})
.catch(err => {
   console.log('error occured')
})

代码也可以这样编写：

function waitForDomReady() {
   return new Promise(resolve => $(resolve))
}

async function run() {
   try {
       let data = await getData();
       
       await waitForDomReady();
       
       console.log('do something with data', data)
   } catch (err) {
       console.log('error occured')
   }
}


run()

---

您执行了什么

localStorage.setItem（“请求”，JSON.stringify（请求））可以吗？应该是localStorage.setItem（“请求”，“请求”）？可能的问题是您期望这行代码做什么？
中的代码是我更新代码的方式。
不会阻止您的网站向服务器发出请求。我已经更新了我的原始帖子，因为尝试对已经是字符串的json数据进行字符串化没有意义。感谢您指出这一点。但是
request
是请求对象，而不是响应的内容
request.responseText
。您认为它应该如何减少服务器的负载？您仍然以同步方式执行请求，所以它仍然是阻塞的？顺便说一句，不建议执行同步阻塞请求。