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

Question

在关于终端用户性能的一些建议/指导之后。

我做了一个小型的客户端'person search‘，它从一个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记录)，页面仍然呈现得很快。

链接：https://raw.githubusercontent.com/prust/wikipedia-movie-data/master/movies.json

抱歉，如果这有点长篇大论。我想尽可能地帮助描述这个问题。

Answer 1

如果要使用缓存，则必须在发出请求之前首先检查缓存。否则，它不会有多大意义。

不推荐使用同步阻塞请求，如果可能的话，您还应该改用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')
})

代码也可以写成这样：

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()