这个javascript值得用来加速页面加载吗？答案

【问题标题】：Is this javascript worth using to speed up page loading?这个javascript值得用来加速页面加载吗？
【发布时间】：2012-09-20 16:14:45
【问题描述】：

我编写了这段代码，通过根据分辨率加载更小分辨率的图片来加快页面加载速度...

window.onload = function() {
    bannerRes();
    function bannerRes() {
        var x = $(window).width();
        var y = $("#banner");
        if(x<=1920) {
            y.css('backgroundImage', 'url(team_banner_1920.jpg)');
        } else {
            y.css('backgroundImage', 'url(team_banner_2560.jpg)');
        };
    };
    $(window).resize(function() {
        bannerRes();
    });
};

但我不确定它是否值得使用，或者是否会出现任何问题。请问有什么意见吗？谢谢

【问题讨论】：

我会改用css媒体查询。
不就是看浏览器视口大小吗？为什么要在调整大小时更改它？
使用工具并测量加载时间以确保；但是，这实际上完全取决于图像的大小。在这种情况下，尺寸可能很重要;)
$("#banner") 在页面加载时是否已有背景图片？

标签： javascript jquery

【解决方案1】：

您似乎正在实施自适应图像解决方案。

W3C 对此主题进行了大量讨论，因此请注意“专家”正在研究该主题。

如果您在移动设备上提供 iOS 视网膜显示屏，情况会变得更加棘手。因为它们需要“双密度”。并有效地使您的图像维护加倍，以及 JS 代码维护跨设备的体验。

问题是，如果您必须在几年后为每一款可能出现的新设备更新代码，这可能会成为维护的噩梦。

最初的解决方案是使用@media-query，这将使您能够维护 CSS 中的图像，并简化您的 JS。

W3C 悬而未决的一个有趣主题是<picture/> 标签，它将在 dom 属性级别提供响应能力。从而避免了 css 和 JS 的足迹。但这还有待观察。

希望对您有所帮助。

【讨论】：

【解决方案2】：

只有你自己才能判断它是否值得。

众所周知，Google 会在其排名算法中考虑页面加载速度，因此如果您担心这一点，那么它可能会有效。

您的网站有很多流量吗？用户可能会有很多不同的屏幕分辨率吗？您能否从您的网站统计数据中推断出类似的信息 - 即您是否有来自广泛分布的屏幕分辨率的点击？

所以，简而言之，这里不太可能回答。如果您在网站上提供了更多细节，那么可能会进行推断，但即便如此，您最好还是自己尝试一些指标。

【讨论】：

【解决方案3】：

您可以尝试使用 jquery 的动画调整图像大小...然后您将在服务器上只有一张图像，您可以相应地调整它的大小...

这个question 有答案...

【讨论】：