关于性能 jQuery 的问题

Posted 2023-02-16

【中文标题】关于性能 jQuery 的问题

【英文标题】：Questions about performance jQuery

【发布时间】：2014-10-22 17:26:34

【问题描述】：

我对性能有疑问？

用html写两张图片，一张隐藏一张显示，用jQuery改变两者的显示（隐藏显示的一张，显示隐藏的一张）会更好吗？

<img id="1" style="display:none;" src="img1.png" />
<img id="2" src="img2.png" />
$('#1').onclick(function ()
  $(this).css('display', 'none');
  $("#2").css('display', 'inline-block');
);
$('#2').onclick(function ()
  $(this).css('display', 'none');
  $("#1").css('display', 'inline-block');
);

还是改图片的src更好？

$('#1').onclick(function ()
  if ($(this).attr('src') == 'img1.png')
    $(this).attr('src', 'img2.png');
  else
    $(this).attr('src', 'img1.png');
);

非常感谢！

【问题讨论】：

一个性能问题是 jQuery 没有 onclick 方法

【参考方案1】：

替换 src 可能是一种更好的方法，因为如果用户没有点击图片请求（如果点击事件被触发），那么您将保存一个 不必要的 请求。

但是，如果需要通过点击多次更改图像，这可能是很多不必要的请求。

另一种方法是在 DOM 中创建 2 个图像并根据点击进行交换

var $img1 = $('<img>', 
    src: 'img1.png'
);
var $img2 = $('<img>', 
    src: 'img2.png'
);


$('#1').click(function ()
  if ($(this).attr('src') == 'img1.png')
    $(this).html($img2);
  else
    $(this).html($img1);
);

【讨论】：

大多数现代浏览器都会缓存这两个图像，因此当您翻转src 时，您很可能会收到最多两个请求。这种方法的缺点是第二张图片可能需要一段时间才能加载，并且点击后可能无法立即使用。因此，OP 问题的答案实际上取决于您更愿意做出哪种权衡。

或者使用精灵/背景图像并调整位置以显示第二张图像。这可能是最快的。