这是一个打开大约 200 张图片的脚本，第一次打开网页时，200 张图片的加载速度很快。幻灯片一次只显示一张图片，如图所示。
但是如果你重新打开页面，第二次加载同一个页面大约需要 4 分钟。我在想，如果这些数据存储在缓存中，如果需要重新打开，这将是一个好主意。
session_start();
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');
if(!isset($_SESSION['token']) && (!isset($_SESSION['user']))){
echo "<script language='javascript'>self.close();</script>";
}
require 'db.php';
$upload_id = $_GET['id'];
$client = $_GET['NAME'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Display | <?=$client;?></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<?
$myid = $_GET['myd'];
$mydept = $_GET['dept'];
$myrole = $_GET['role'];
?>
<?
//}
// Retrieving Book mark page for this job (upload_id)
$book = ("SELECT * FROM bookmark WHERE user_id = '".$_SESSION['id']."' AND upload_id='".$upload_id."' ");
$bk = mysqli_query($conn, $book) or die ("ERROR bookmark ".mysqli_error($conn));
$bookmark = mysqli_fetch_assoc($bk);
$page = $bookmark['page_book'];
?>
<div class="w3-container">
<center>
</div>
<div class="w3-content w3-display-container">
<?
$s = ("SELECT count(USER_ID) as counter FROM upload_data WHERE UPLOAD_ID='".$upload_id."'");
$r = mysqli_query($conn, $s) or die ("ERROR ".mysqli_error($conn));
$c = mysqli_fetch_assoc($r);
$all = $c['counter'];
$sql = ("SELECT YEAR, FOLDER, USER_ID, FILE_NAME FROM upload_data WHERE UPLOAD_ID='".$upload_id."' ORDER BY USER_ID");
$result = mysqli_query($conn, $sql) or die ("ERROR ".mysqli_error($conn));
while($row = mysqli_fetch_assoc($result)){
$file = $row['FILE_NAME'];
//$all = $row['pages'];
$year = $row['YEAR'];
$folder = $row['FOLDER'];
$id = $row['USER_ID'];
$fileshow = "/$year/$folder/$file";
?>
<div class="w3-display-container myPictures " style="left: -15%; ">
<img src=<? echo $fileshow;?> style="width:130%; height: auto;" data-zoom-image=<? echo $fileshow;?>>
<!--<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
<?echo $id; ?>
</div>-->
</div>
<?
}
?>
<button class="button5" style="position: fixed; width: 100%; left: 20px; top: 140px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;" onclick="bookSave(0)">Save</button>
<div id="display" style="position: fixed; width: 100%; left: 30px; top: 372px;" ></div>
<button class="button2" style="position: fixed; width: 100%; left: 20px; top: 505px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;;" onclick="plusDivs(-10)">❮❮10-</button>
<font><div id="bookmark" style="position: fixed; width: 100%; left: 20px; top: 190px; height: 60px; width: 100px;"></div></font></center>
<div id="w20" class="clock" style="position: fixed; top: 20px; left: 60%;"></div>
<div class="message" style="position: fixed; top: 20px; left: 50%;"></div>
<button class="button" style="position: fixed; width: 100%; left: 20px; top: 410px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(-1)">❮ 前へ</button>
<button class="button" style="position: fixed; width: 100%; left: 20px; top: 300px; height: 50px; width: 100px; border-radius: 2px;" onclick="plusDivs(1)">次へ ❯</button>
<button class="button2" style="position: fixed; width: 100%; left: 20px; top: 215px; height: 40px; width: 100px; border-radius: 2px; background-color: Transparent;" onclick="plusDivs(10)">+10❯❯</button>
</div>
<?$hour = $_GET['t'];?>
<!---------------------------------------- Next | Prev Functions ------------------------------------------------------->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("myPictures");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display").innerHTML = this.responseText;
}
};
xhttp.open("POST", "timer5.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id;?>&total=<?=$all;?>&myid=<?=$myid;?>&dept=<?=$mydept;?>&role=<?=$myrole;?>");
<?if($_SESSION['id']==20000){?>
function clock1(){
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'MinuteCounter'
});
});
}
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock(<?=$hour;?>, {
clockFace: 'MinuteCounter',
countdown: true,
callbacks: {
stop: function() {
//$('.message').html('message here');
clock1();
}
}
});
});
<?}?>
}
</script>
<!-- ---------------------------------Save BookMark Functions ---------------------------------------->
<script>
function bookSave(n) {
if(confirm('Save and Close?')){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("bookmark").innerHTML = this.responseText;
}
};
xhttp.open("POST", "booksave.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id;?>&myid=<?=$myid;?>");
setTimeout("self.close()", 2000 ) // after 5 seconds
}
}
</script>
<!------------------------------------------------------ Call BookMark (PageNumber) when view ------------------------------------------------------------>
<script>
var slideIndex = <?=$page;?>;
showBk(slideIndex);
function bookMark(n) {
showBk(slideIndex += n);
}
function showBk(n) {
var i;
var x = document.getElementsByClassName("myPictures");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display").innerHTML = this.responseText;
}
};
xhttp.open("POST", "callbookmark.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("index="+slideIndex+"&name=<?echo $client;?>&upload_id=<?echo $upload_id; ?>");
}
</script>
</body>
</html>
答案1
我能给出的最好帮助是“第一次快，第二次慢”，听起来这一定是缓存问题。
尤其因为这与具有良好缓存时应发生的情况完全相反。
那header('Cache-Control: no-store, no-cache, must-revalidate');就是关闭缓存——为什么这样做？
我思考正在发生的事情是，第一次运行时，会有一些缓存生效 - 直到该行被命中。这会减慢第一页剩余部分的加载速度以及整个第二页的加载速度。
请删除该行，重试并报告发生的情况（或询问其中一个https://webmasters.stackexchange.com/或者https://stackoverflow.com/或者甚至https://superuser.com/）。