我正在使用JSON文件自动填充下拉列表。它绝不是大规模的(3000行和不断增长),但刷新页面所花费的时间变得非常明显。
第一次加载页面时,将读取JSON,具体取决于用户选择的选项指示JSON的哪个部分用于填充下拉列表。
然后在每次刷新或菜单选择后加载它。是否有可能以某种方式缓存值以防止需要一次又一次地重新加载它?
谢谢。
编辑:更多信息:它本质上是一个单位转换器。 JSON包含所有细节。例如,当用户选择“Temp”时,进行呼叫并填充列表。转换完成后,您可以花一整天时间进行临时转换,但它们会很好,但每次用户更改转换类型时,现在长度,页面都会刷新并占用大量时间。
不幸的是,我不知道PHP中的标准化全局缓存机制。 This文章称,Optimizer Plus是第三方加速器,从5.5版开始包含在核心PHP中。不确定您使用的是哪个版本,但您可以试试。
另外一点,您是否考虑过安德鲁指出的文件存储?我认为它与$_SESSION
相结合可以在这种情况下真正帮助你。让我举一个可以使用现有JSON数据的示例:
服务器端
将您的JSON数据存储在PHP服务器上的.json
文件中:
{
"data": "some data",
"data2": "more data",
"data3": [
...
],
etc.
}
注意:确保正确格式化JSON数据。请记住,所有字符串必须用双引号"
括起来。
在PHP中,使用if语句来决定适当的操作:
error_reporting(E_ALL);
ini_set("display_errors", "On");
session_start();
if(isset($_SESSION['dataCache'])) {
echo json_encode($_SESSION['dataCache']);
} else {
$file = 'data.json';
if (!is_file($file) || !is_readable($file)) {
die("File not accessible.");
}
$contents = file_get_contents($file);
$_SESSION['dataCache'] = json_decode($contents, true);
echo $contents;
}
因此,让我们深入研究上面的编码。所以这就是我们简单地做的事情:
这将节省您解析JSON数据和/或在服务器上手动构建它的时间和风险。它将为用户session
缓存,以便他们可以使用它。
客户端
我假设你使用ajax
来获取信息?如果不能纠正我,但我认为这是你的一些JavaScript发挥作用的地方。如果是这样,你可以考虑这个:
将返回的数据存储在用户浏览器上的sessionStorage
中,当它从服务器返回时:
$.ajax({
...
success: function (res) {
localStorage.setItem("dataCache", JSON.stringify(res));
},
...
});
或者如果您使用promise对象:
$.ajax({
...
}).done(function (res) {
localStorage.setItem("dataCache", JSON.stringify(res));
});
当您需要阅读它时,您可以进行简单的测试:
var data;
// This returns null if the item is not in local storage.
// Since JavaScript is truthy falsy, it will be evaluated as false.
if(localStorage.getItem("dataCache")) {
data = JSON.parse(localStorage.getItem("dataCache"));
} else {
// Make ajax call, fetch object and store in localStorage in the success or done callbacks as described above
}
笔记:
localStorage
是HTML5中的一项新功能,因此尚未完全支持所有浏览器。然而,大多数主要的确实如此,甚至可以追溯到IE8(我认为)。但是,对于每个站点需要保留多少浏览器,没有标准化的大小限制。
考虑到这一点很重要。我可以保证你可能无法在localStorage中存储整个30,000行字符串。但是,您可以将此作为开始。结合服务器端解决方案,您应该看到性能提升。
希望这可以帮助。
我使用browser's cache来确保每个会话只下载一大块JSON。我在ASP.NET中编程,但我确信PHP具有相同的机制:
JsonSessionID
中。这样我就可以在我的页面标记中引用它。<script type="text/javascript" src="/dynamicJSON.ashx?v=<%= JsonSessionID %>"></script>
浏览器将自动缓存作为脚本包含的任何URL。下次要求浏览器从URL加载缓存脚本时,它只会从本地磁盘加载该文件。这包括这样的动态页面。
通过在那里添加?v=
,我ensure that the JSON is updated once per session。
我刚刚意识到你的JSON可能是静态的。如果是这种情况,您可以将您的JSON放入HTML中包含的静态.js文件中,浏览器将对其进行缓存。
// conversionData.js
var conversionData = { "a":1,"b":2,"c":3 };
当您包含转换Data.is时,转换数据变量将在您的页面的其余部分JavaScript中,以动态更新下拉列表。
如果您正在提供静态文件,则此blog post具有基于文件的日期修改属性的缓存清除的良好模式。即只有在服务器上更改文件时才下载文件。
我还没有找到一个很好的方法来缓存通过数据库查找表创建的缓存,而不是每个会话。这不是理想的,因为数据库可能会在会话期间发生变化。
一旦你将JSON数据解码成一个对象,你可以保持对象周围,它应该持续到页面重新加载为止。
如果你想在重载之间坚持下去,你可能想看看HTML5的localStorage
等。
您需要提出一个年龄策略,也许只是将当前日期转储到那里,以便您可以比较它并根据需要过期。
我建议将你的json数据存储到会话中。在第一页加载时,您可以编写脚本来获取json数据,然后将它们存储到会话中。在每个页面加载/刷新之后,您可以检查我们的会话以决定做什么 - 使用会话数据或再次获取您的json数据。
这种方法适用于小规模数据(例如:一系列产品 - 颜色 - 尺寸 - 价格)。
根据您的数据,您应该测试加载时间。
这是一个简单的黑客:
使用参数“bla-bla.html”或“bla-bla.css”创建对php文件的调用作为GET请求...嗯,你知道,它让浏览器认为它不是php,而是“html”或“CSS”。浏览器会缓存它。
要验证技巧是否正常 - 转到浏览器开发面板的“网络”选项卡,您将看到“类型”列以及“已转移” - 而不是在那里有PHP和实际大小,您将找到“html”和“(缓存)”
当你将诸如“blah-blak.html”之类的参数传递给php文件并期望它不会被缓存时,这也是很好的。好吧,它会被缓存。
在FireFox Quantum 57.0.1(Mac 64bit)上测试
附:
在这种情况下,Mac上的Chrome 63能够识别真实文件类型。所以它不能被愚弄。
开箱即用:
但如果你的清单有3000行并且正在增长(如你所说),你有可能确定它的最大尺寸吗?
假设答案是10,000(最大)项目;那你真的需要一个ajax电话吗?您可以直接将数据与页面一起传输
(当然,根据你的架构,你可以提出不同的解决方案)