问题：我的网站中的图片需要一点时间才能开始加载……就像有什么东西阻塞了一样，但是无法准确指出可能是原因。
PHP 8 / 最新 WHM
实例：https://www.stubfeed.com/crypto
我尝试过 [.0A.]：更换网络托管公司 => 没有变化，我的网络代码中存在一些东西......
我尝试过 [.0B.] ：我之前用的是 centos 7，后来换成了 centos 8 => 还是一样
我尝试过 [.0C.]：禁用 php-fpm => 它有很大帮助，但仍然需要等待图像。
我尝试过 [.0D.]：打开或关闭输出缓冲区 => 仍然相同
我尝试过的 [.1.]：将所有.css 和 .js 合并到更少的文件中（2.css 2.js 而不是多个）// 还添加了 font-display:swap;
我尝试过 [.2.]：apache 的 nginx 反向代理（开启或关闭 => 没有变化，因为 cloudflare 充当 CDN...）
我尝试过的方法 [3] : apache 配置
Header set X-XSS-Protection "1; mode=block"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header always set X-Content-Type-Options "nosniff"
Header always set Referrer-Policy "no-referrer"
Header always set Permissions-Policy "geolocation=(self),midi=(self),sync-xhr=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self)"
我尝试过的方法 [4] : .htaccess 缓存控制标头
<IfModule mod_headers.c>
ExpiresActive On
<FilesMatch “\.(webp|webm|flv|ico|pdf|avi|mov|mp4|m4v|m4a|ppt|doc|mp3|wmv|wav|gif|jpg|jpeg|png|apng|swf|css|js|otf|ttf|woff)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>
我尝试过 [5] ：转换全部我的图像是 webp -quality 60（使用 iMageMagick）=> 它大大缩小了尺寸；）==>> 但仍然没有解决问题。
我尝试过 [6]：在 Google Chrome 控制台中 => “清空缓存硬重新加载” => 似乎比正常加载更快???
我尝试过 [7] ：在谷歌浏览器控制台 => 网络选项卡 => 我看到从缓存中加载，但不知何故，用我的眼睛，我看到菜单非常快，但所有其他图像，它等待 1 或 2 秒才显示出来
我尝试过的方法 [8] ：在 cloudflare 中添加页面规则https://www.stubfeed.com/media/* 浏览器缓存 TTL：一年，缓存级别：缓存所有内容，边缘缓存 TTL：14 天，缓存欺骗防护：开启，来源缓存控制：开启
我的尝试 [9]：加载 4、6、9、23 张图片 => 全部相同，仍然：我用眼睛看到的内容（等待 1 秒，然后出现图像....）[速度测试员说...]
我尝试过 [10]：服务工作者缓存了所有内容... => 我将其关闭，因为之前从缓存中检查的速度非常慢…… :( 你可以在那里看到它：https://www.stubfeed.com/ws.js?v=202108000021（在可缓存数组中我添加了 webb，但我将其删除了...）
所有这些尝试的结果是：菜单、.css、.js ==>>非常快且即时......但 1 秒（有时是 2 秒）后图像静止......
您可以在此处查看报告：https://gtmetrix.com/reports/www.stubfeed.com/4MGVqAFv/
curl -I https://www.stubfeed.com/media/feed/2021/08/02/14463960829226.webp
HTTP/2 200
date: Mon, 02 Aug 2021 02:13:44 GMT
content-type: image/webp
content-length: 78296
x-content-type-options: nosniff
referrer-policy: no-referrer
permissions-policy: geolocation=(self),midi=(self),sync-xhr=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self)
last-modified: Mon, 02 Aug 2021 01:40:11 GMT
vary: Accept-Encoding
x-xss-protection: 1; mode=block
strict-transport-security: max-age=15552000; includeSubDomains; preload
cache-control: public, max-age=31536000
cf-cache-status: HIT
age: 1483
accept-ranges: bytes
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=QawI6BH%2FlcrvvsUxJ6VgTJzwNqvb%2BVqBRo1gbxng6JRggJe9MgZbkWhLtMjmwvwC8yB3SLaoJXT%2BvNZDuLCzya1g8HlxGFbpFMzXB%2F4p%2B9GcIGIZANk%2FjfvIx0Lu2t07QIsr"}],"group":"cf-nel","max_age":604800}
nel: {"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 6783c9ea7f3c4bd1-YUL
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
答案1
经过深入挖掘，我发现了它。
这就是我的“步骤”...加载页面然后 ajax...
我重新考虑并做了纳入。
我还将我的 ajax 重塑为异步等待
async function stubajax (divid,phphat,postix = [],pend = 'html') {
var pcache = (Math.floor(Math.random() * 100000000) + 1);
postix["preventcache"] = pcache;
postix["divid"] = encodeURIComponent(divid);
postix["mojax_height"] = encodeURIComponent($(window).height());
postix["mojax_width"] = encodeURIComponent($(window).width());
postix["cookies"] = decodeURIComponent(document.cookie); // if you need to send cookies
for (var i = 0; i < localStorage.length; i++){ postix[localStorage.key(i)] = localStorage.getItem(localStorage.key(i)); }
for (var i = 0; i < sessionStorage.length; i++){ postix[sessionStorage.key(i)] = sessionStorage.getItem(sessionStorage.key(i)); }
await fetch(phphat+"?pcache="+pcache+"&fetchx="+pcache, {
method: "POST", body: JSON.stringify(Object.assign({}, postix)), headers: {"Content-type": "application/json; charset=UTF-8"}
}).then( response => { return response.text(); }).then( html => {
switch ( pend ){
case 'append' : $("#"+divid+"_message").append(extraforml+html); break;
case 'prepend' : $("#"+divid+"_message").prepend(extraforml+html); break;
default : $("#"+divid+"_message").html(extraforml+html); break;
}
}).catch( err => console.log(err) );
}
稍后可以这样调用
stubajax('id','...php',{'somevar1':'hello'});
//（当灯塔上每个主题的完成度达到 100% 时，他们添加了烟花动画）
