Javascript Retina / HD显示检测和重新加载期间阻止页面呈现

Question

我的问题主要是关于页面重新加载而不是视网膜检测。我在 head 标签中使用下面的代码进行视网膜显示：

<script type="text/javascript">
               if( document.cookie.indexOf('device_pixel_ratio') == -1
                  && 'devicePixelRatio' in window
                  && window.devicePixelRatio == 2 ){

                var date = new Date();
                date.setTime( date.getTime() + 3600000000 );

                document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio;
                //if cookies are not blocked, reload the page
                if(document.cookie.indexOf('device_pixel_ratio') != -1) {
                    window.location.reload(true);
                }
              }
</script>

它会检测访问者的屏幕类型，然后存储 cookie 并重新加载（如果是视网膜显示器）。它的工作没有问题，除了一个。

重新加载功能不会停止页面渲染。因此，您会在第一次访问时看到无样式的页面（半载），然后刷新。之后，由于存储了 cookie，网站的其余部分一切都很好。

很明显，PHP 没有提供检测屏幕类型的功能。必须通过JS来完成。但是 JS 没有合适的工具在不加载页面的情况下重新加载/重定向，甚至在 head 中使用了代码。

简而言之，我被困在两者之间。我希望有人可能会建议在首次加载时不显示任何内容的情况下重新加载（它甚至会显示我放在头部的内联样式）。还是在第一次加载时显示标准图像并让 Retina 用于其余的浏览体验是最佳选择？

顺便说一下，我尝试了 reload(true) 和 reload(false)。它没有帮助。

---

更新：请参阅下面 Marat Tanalin 的回答，了解可能的变通方法和更好的解决方案，以使用视网膜/高清显示图像，而不是存储 cookie + 重新加载。

在我对此进行深入研究之后，我意识到由于 *缓存方法，生成视网膜图像和标准图像可能并不是所有时间的答案。换句话说，在第一次访问时向访问者显示低质量图像并在刷新后显示高质量图像可能不起作用，因为低质量图像（和脚本）已经缓存。

我决定使用 1.5 倍的单张图片大小并支持 SVG 上传。虽然它不是各个方面的 100% 最佳答案，但比失去可靠性更好的选择。

*我是 Wordpress 开发人员，我参考了 WP Super Cache 和类似的缓存方法，但请注意，这也可能是其他缓存方法的问题。

Answer 1

本质上，您希望在运行此脚本之前停止页面呈现。

这可以使用外部 JS 文件来完成。当浏览器找到一个外部文件时，它会等到它运行。另一方面，如果你有一个内联的<script> 标签，那么浏览器就不会等待。

实际上，建议从不阻止页面呈现，以缩短页面加载时间，但为此目的是必要的。更多信息可以咨询https://developers.google.com/speed/docs/insights/BlockingJS

Answer 2

与使用纯 JS 解决方案相比，通常更好的做法是使用 CSS 进行样式设置、使用原生 HTML 元素作为内容图像，并在需要时使用不显眼的 JavaScript。不显眼的 JavaScript 意味着即使 JS 被禁用，网页也能正常工作。

在 CSS 中，只需使用媒体查询。

对于 HTML 中的响应式图像，有标准的 PICTURE 元素，但尚未得到广泛支持，因此可以使用像 picturefill 这样的 polyfill。

响应式图像的另一种可能方法：

• 始终使用高分辨率图像（无论实际像素密度如何；会在一定程度上浪费流量并为低像素密度显示器的用户提供较低的图像质量）；

• 或使用 JavaScript 在页面加载时将低分辨率图像替换为高分辨率版本。为了防止在高分辨率版本之前加载低分辨率版本，可以将低分辨率版本放入NOSCRIPT元素中，然后动态读取内容并提取、修改图像源，并将NOSCRIPT元素替换为雇用图像通过 JS。

对于摄影图像，可接受的折衷方案是使用 1.5 倍图像。但要小心线稿图像（如徽标或方案）：它们通常在 1:1 比例下看起来最好（当一个图像像素与一个物理显示像素完全对应时），并且在使用模糊缩放时可能会出现明显的质量损失。

此外，尽可能考虑使用 SVG 格式的矢量图像 - 无论实际像素密度如何，它们都可以在不损失质量的情况下进行缩放；但是，在具有常规像素密度的显示器上（例如，与 4K 显示器相比，流行的全高清显示器），与像素完美的 1:1 光栅图像相比，它们的视觉质量可能会明显降低。