清爽首页，持续加载视频封面

[NotUNperson]

对应功能

清爽首页
Commit:f53902062

问题描述

页面：b站首页
目前发现在高度少于2.5屏的时候会导致b站持续加载封面图片，对性能影响不大，但是没有必要进行加载
2.5屏是一个大致的数据，在窗口最大化和高度减半后大致是如此，1080p的屏幕最大化，布局配置必须包含“分区”在内的4个布局，并且需要都换行才可以不进行持续的封面加载。整体来说可能是b站的一个问题，最后会定位到某几个js文件上
图片大概演示一下：



由第三个图继续延伸，如果在不启动清爽首页插件的时候打开b站首页，等待页面加载完成，再打开清爽首页插件，会发现不会出现图一相同的问题。（使用极简首页没有这个问题，大概率是高度所致了）

相同出现封面持续获取的情况：
1.主动下拉加载，也是在下拉一段时间后会让页面停止加载，变成持续的加载动画，没有视频出现。（鼠标中键进入箭头状态，向下拉，过一段时间可以快速感受到）
2.使用adguard进行拦截元素

自定义规则：bilibili.com###i_cecream > div.bili-feed4:last-child > main.bili-feed4-layout:nth-child(3)

脚本版本

v2.8.12-36-gf53902062

脚本管理器及版本

Tampermonkey v5.1.1

浏览器及版本

Microsoft Edge 版本 125.0.2535.67 (正式版本) (64 位)

播放器版本

4.8.25-722b238d

播放策略

默认

错误信息

userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved plugins block time: 1.8ms for 20 items
userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved plugins resolve time: 11.2ms for 20 items
userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved components block time: 3.2ms for 22 items
userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved components resolve time: 1110.4ms for 22 items
userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved init block time: 0.4ms for 6 items
userscript.html?name=Bilibili-Evolved.user.js&id=da48533a-db09-4975-bce4-7710a7190181:226 Bilibili Evolved init resolve time: 743.3ms for 6 items

附加截图

致遇到了相同问题准备回复的人

太长不看：
1、遇到了相同的问题：请用左下角的 reaction 点赞
2、实时关注该 Issue 的后续进展：请用 Issue 页上的 Subscribe 功能（在 PC 端按钮通常位于页面右侧）。
请您回复前务必确认您有在本 Issue 之外补充了其它相关信息（比如 Log）再行回复以免对他人造成不必要的困扰

完整版

由于每个 Issue 甚至整个项目都是可以订阅通知的, 对于已经有人汇报过的 Bug, 如果您也遇到了并且没有其他信息要补充, 可以直接在左下点个赞表示 +1, 不要再去新增评论。想关注后续的可以用 Subscribe，Subscribe 之后该 Issue 如果有变动都可以收到通知，如果不想被回复打扰可以使用更加进阶的 Customize 功能，勾选 "Closed" & "Reopened"。Closed 通常代表该 Issue 已被解决，极少数情况下的 Reopened 代表该 Issue 的问题重新出现。如果您新增了无意义评论，因为 Issue 这个 bug tracker 与邮件列表类似，订阅某个 Issue 的用户会在每次这个 Issue 有新的动态时收到一封新的提醒邮件。也就是说，在 Issue 中的一个不能提供新的信息的评论，相当于给所有订阅这个 Issue 的用户发了一封垃圾邮件（spam）。尤其项目的维护者也是订阅者中的一员，太多垃圾邮件会对维护者带来很多不必要的困扰。发送垃圾邮件在开源社区通常是不那么受欢迎的行为。

[the1812]

不清楚这个判断条件是什么, 尝试把进入视图就触发加载的元素 .load-more-anchor 固定到视图外也不行, 只要一隐藏那个版块就会开始不断加载封面

[Tinhone]

代码 https://s1.hdslb.com/bfs/static/laputa-home/client/assets/index.bfb85e0c.js，第 212 行，第 39652 字符。

Hn = (e, t) =>
  J(void 0, null, function* () {
    var u, v, p, m;
    if (Ce) return;
    const n = (u = t == null ? void 0 : t.offset) != null ? u : 0,
      i = (v = t == null ? void 0 : t.immediate) != null ? v : !1,
      o = (p = t == null ? void 0 : t.max) != null ? p : 50,
      a = (m = t == null ? void 0 : t.throttle) != null ? m : 300;
    let s = 0;
    const l = () =>
      J(void 0, null, function* () {
        var _;
        if (
          (yield e(),
            (s += 1),
            s === o ||
            ((_ = t == null ? void 0 : t.end) != null && _.call(t)))
        )
          return !0;
        yield rn(a);
      }),
      d = () => document.body.scrollHeight > document.body.clientHeight + n;
    if (!(i && (yield l())) && !d())
      do if (yield l()) break;
      while (!d());
  }),

进行判断，在这种情况下 n 会被定义为通过 t 传入的一个值，作为一个高度的偏移值，以确保能够加载更多内容，具体见下。

const n = (u = t == null ? void 0 : t.offset) != null ? u : 0,

定义 l，其中 e() 在这种情况下是执行获取首页视频推荐列表网络请求的函数，具体见下。

const l = () =>
  J(void 0, null, function* () {
    var _;
    if (
      (yield e(),
        (s += 1),
        s === o ||
        ((_ = t == null ? void 0 : t.end) != null && _.call(t)))
    )
      return !0;
    yield rn(a);
  }),

定义 K，js 第 212 行，第 235816 字符，如上所述，用来执行获取首页视频推荐列表（https://api.bilibili.com/x/web-interface/wbi/index/top/feed/rcmd）网络请求。

const K = () => {
  if (!T.value && !v.value && L && !N.value && !Ee.value)
    if (ne) U(), (ne = !1);
    else {
      if (o.params.fetch_row > zs) {
        (Pt.value = !0), n("onManualLoad");
        return;
      }
      Q(), H.value.length + Lt > D.value.length - 1 && d(Lt);
    }
},

具体是这段，js 第 212 行，第 30680 字符。

const wi = (e, t) => {
  const n = Object.assign({}, { web_location: 1430650 }, e);
  return fe.get("x/web-interface/index/top/feed/rcmd", n, {
    com2co: Ce,
    encode: Ce,
    preload: !1,
    encWbi: !0,
    encWbiKeys: {
      wbiImgKey: "c6618eced9b64a019d0e6247aed7a38e",
      wbiSubKey: "6bb3adc89c244ccda6d9abf22fc6f910",
    },
    discovery: "web.interface",
    ctx: t,
  });
},

话说回来，定义 l 之后一起定义了 d。用来进行判断内容是否溢出整屏加偏移值，以确定是否需要加载更多内容。n 就是上面提到的高度的偏移值。

d = () => document.body.scrollHeight > document.body.clientHeight + n;

这个 while 也许是罪魁祸首，但不太清楚这里 l() 能否 == true，而且看起来也不太像是这里的 while 陷入了死循环，可能导致问题的代码在别的地方。

if (!(i && (yield l())) && !d())
  do if (yield l()) break;
  while (!d());

不过奇妙的是，修改 document.body.scrollHeight 确实可以解决这个问题。

const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.target.nodeName !== 'BODY') {
      continue;
    }
    Object.defineProperty(mutation.target, 'scrollHeight', {
      value: 100000,
      writable: false,
    });
    console.log("ok");
    observer.disconnect();
    break;
  }
};

const target = document.childNodes[1]; // HTML 元素

const options = {
  subtree: true,
  childList: true,
};

const theObserver = new MutationObserver(callback);
theObserver.observe(target, options);

怪不得最近打开首页这么卡...