javascript - setInterval 滞后于我的页面

Question

我正在学习 Chrome 扩展程序并尝试替换实时聊天页面上的内容。我可以做大部分事情，唯一对我不起作用或者说滞后于我的页面的是选项 setInterval，我用它每 3 秒拍摄一次函数。

我使用 setInterval 的原因是每次将新的聊天消息添加到聊天控制台时，它都会创建一个 <td class=".profile-image">New Message</td>在表中。我想给它添加一个类，这样我就可以使用 CSS 更改它的外观，现在 CSS 可以工作了。

当页面加载所有过去的消息时，加载所有消息需要 2 秒，直到那时没有 class=".profile-image"事物。我有一个 setTimeout 以便函数等待 3 秒然后拍摄。现在的问题是，这只会加载一次，当有新消息时，我将不得不再次运行相同的功能。现在为了让它工作，菜鸟我做了一个 setInterval 来运行这个函数增益，但问题是整个页面滞后。我想要实现的是让函数知道有一条新消息，它应该自动添加类。

谢谢你的帮助!

var dostuff = function() {
  setTimeout(function() {
    jQuery(".profile-image img").each(function() {
      this.src = this.src.replace('small.jpg', 'large.jpg');
      this.src = this.src.replace('small.png', 'large.png');
      $(".profile-image img").attr("height", "64");
      $(".profile-image img").attr("width", "64");
      $(".profile-image img").attr("class", "pro_img");
    });
  }, 2000);
};

setInterval(dostuff, 3000);

Answer 1

观察页面的变化，或者 Hook 任何将这些图像插入页面的脚本，会更好。但是，如果您需要坚持对页面进行轮询，您可以进行一些改进，以使这项工作相当顺利:

1. 如果您打算继续在 setInterval 上轮询页面，则无需在其中执行 setTimeout。它所做的只是抵消间隔。
2. DOM 搜索是开销最大的部分。您正在对相同的元素进行多次重复搜索。很多。 jQuery(".profile-image img").each 将带您浏览每一张图片。在该循环中，您再次搜索每一张这些图像，再搜索三次。您需要做的就是遍历图像一次并修改它们。
3. 这是次要的，但是通过将这些 css 规则放在一个类中而不是单独设置它们，您可以减少操作。
4. 如果在修改 DOM 元素时可以安全地删除类名，则可以避免搜索在每次迭代时都捕获已修改的元素。
5. 您可以越明确地定位搜索，就越好。与其在整个 DOM 主体中搜索 .profile-image img，不如使用一个更接近的带有 ID 的父元素，您可以使用它来限制您必须挖掘的 DOM 数量(#foo .profile-image img). (ID 选择器很快，因为它们是唯一的并且可以查找。类选择器实际上必须搜索 DOM。)

结果:

var dostuff = function() {
    $(".profile-image img").each(function() {
      this.src = this.src.replace('small.png', 'large.png');
      $(this).addClass('pro_img') // put the height and width rules inside the class CSS
             .removeClass('profile-image'); // if you're not depending on this CSS (or move what you need to preserve into .pro_img)
    });
};

setInterval(dostuff, 3000);