如何优化根据查询字符串值显示对应logo的实现以提升加载速度

优化实现方案 #

第一步：消除冗余if判断，规范查询参数读取 #

直接匹配整个URL字符串容易出现路径关键字误匹配的问题，首先优化逻辑层代码，用配置映射表代替50个if判断，后续维护只需要修改映射表即可，同时调整执行时机大幅提前渲染速度：

// 提前定义所有logo的映射配置，新增/修改logo仅需调整该对象
const LOGO_MAP = {
  'Platform': '../common/img/lenders/Platform.jpg',
  '其他合作方标识': '对应logo路径',
  // 剩余48个依次添加
  'default': '../common/img/lenders/default.jpg' // 新增默认兜底logo
}

// 替换原window.onload（需等所有资源加载完成才执行，延迟极高），DOM解析完成就立即执行
$(document).ready(function() {
  // 标准化查询参数读取方法
  const getQueryParam = (name) => {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
  }
  const lenderName = getQueryParam('LenderName') || 'default';
  const logoSrc = LOGO_MAP[lenderName] || LOGO_MAP['default'];
  
  // 插入对应logo
  $('.qs-logo-container').html(`<img src="${logoSrc}" alt="${lenderName} logo" />`);
})

第二步：针对性优化图片加载速度 #

最优方案：使用CSS雪碧图（精灵图）

这是多小图标场景下性能最高的方案，将50个logo拼接为1张雪碧图，总大小通常比单张文件总和小30%以上，仅需要1次HTTP请求，还可利用浏览器长期缓存，后续所有访问无需重复加载图片。
实现步骤：

1. 拼接所有logo为雪碧图，记录每个logo对应的宽高、background-position坐标
2. 提前写入CSS样式：

.qs-logo {
  background-image: url('../common/img/lenders-sprite.jpg');
  background-repeat: no-repeat;
  /* 所有logo统一宽高可直接写在此处，尺寸不同的话单独写在对应类中 */
  width: 100px;
  height: 60px;
}
/* 每个logo对应定位规则 */
.qs-logo.Platform {
  background-position: 0 0;
}
.qs-logo.其他标识 {
  background-position: 0 -60px;
}
/* 剩余依次添加 */

3. JS逻辑简化为添加对应类即可：

const LOGO_CLASS_MAP = {
  'Platform': 'Platform',
  // 其他映射关系
  'default': 'default'
}
$(document).ready(function() {
  const getQueryParam = (name) => new URLSearchParams(window.location.search).get(name);
  const lenderName = getQueryParam('LenderName') || 'default';
  const logoClass = LOGO_CLASS_MAP[lenderName] || LOGO_CLASS_MAP['default'];
  $('.qs-logo-container').html(`<div class="qs-logo ${logoClass}"></div>`);
})

替代方案：Base64内嵌logo

若所有logo均为5KB左右的小体积文件，可将所有logo转成Base64字符串直接存入LOGO_MAP中，无需额外发起HTTP请求，加载速度与雪碧图接近，适合不想制作雪碧图的场景。

不推荐方案：预写HTML控制显隐

该方案实现简单，但会额外增加50个DOM节点，且浏览器打开页面时会并发请求所有logo资源，占用多余带宽，反而会拖慢页面整体加载速度，仅适合绝大多数logo访问概率极高的特殊场景。 #

额外通用优化点 #

• 给所有静态logo资源配置服务器缓存策略，设置Cache-Control: public, max-age=31536000，用户二次访问时直接读取本地缓存，完全无需请求服务器。

内容的提问来源于stack exchange，提问作者Danny91