Question

我正在尝试改善website的性能。在Chrome DevTools中，我看到对bg2.jpg的请求在开始下载时被延迟了。

我发现发生这种情况是因为我正在使用JavaScript生成URL并将其设置为CSS中的背景图片，而Chrome浏览器正在取消对包含此代码的script标签进行优先级排序。

 $client_shopware->post('orders', [
                        "customerId"                   => $customer_id,
                        "paymentId"                    => $paymentId,
                        "dispatchId"                   => $dispatchId,
                        "partnerId"                    => "",
                        "shopId"                       => $shopId,
                        "invoiceAmount"                => 0,
                        "invoiceAmountNet"             => 0,
                        "invoiceShipping"              => 0,
                        "invoiceShippingNet"           => 0,
                        "orderTime"                    => $order_time,
                        "net"                          => $TotalOrderAmount,
                        "taxFree"                      => 0,
                        "languageIso"                  => "1",
                        "currency"                     => "EUR",
                        "currencyFactor"               => 1,
                        "referer"                      => "Channel advisor",
                        "remoteAddress"                => "155.155.155.155",
                        "orders.attributes.attribute1" => "test",
                        "details"                      => $JsonArray,
                        "documents"                    => $documents,
                        "billing"                      => $billing,
                        "shipping"                     => $shipping,
                        "paymentStatusId"              => $paymentStatusId,
                        "orderStatusId"                => $orderStatusId,

                        'attribute'                    => [
                            'attribute1' => '12345test',
                        ],
                    ]);

我的想法是使用HTML中的let bgImgName = "bg" + Math.floor(Math.random() * 5); ... document.documentElement.style.setProperty("--bgUrl", `url(img/${bgImgName}.jpg)`); preload。我的问题是，我必须对该URL进行硬编码才能正常工作（因为我的服务器仅运行apache，而没有真正的服务器端语言）。我的服务器（Linux共享主机上带有GoDaddy的主机）确实允许我访问.htaccess文件，并且可能有一种方法可以使用Server Side Includes注入随机数，但是我还没有找到一种方法来执行此操作

有没有办法解决这个问题？

更新：看来我无法使用“服务器端包含”。我忘记了在将HTML文件上传到服务器之前先对它们进行gzip压缩，这样可以提高从磁盘直接提供压缩静态文件的性能。

是否可以在传递给浏览器的.htaccess文件中添加随机数？

Answer 1

由于您有5张随机图像，一种简单的方法是使用CSS并将其设置为0大小的任何元素的背景。这将迫使浏览器在到达JS脚本之前先加载图像。当然，需要在JS之前尽快加载CSS。

因此您的代码可以是这样的：

html {
  background-image:
    url("img/bg1.jpg"),
    url("img/bg2.jpg"),
    url("img/bg3.jpg"),
    url("img/bg4.jpg"),
    url("img/bg5.jpg");
  background-size:0 0;
}

如何加快网站背景图片的加载？

1 个答案: