米游社 依然有极小概率刷不出图

[mark9804]

原因待查

[Arondight]

[mark9804]

#898

还有这是什么武器……

[mark9804]

#898

我觉得大概是我写了个单线程的问题，先 fetch 完材料信息再开始处理 vue app 的挂载，可能是挂载时间超过 500ms 的空档被认为已经完成了

我先加一个 preload 试试看，改成异步的话要改的有点太多了

[mark9804]

我知道了 米游社 API 返回角色数量可能为 0

[Arondight]

我知道了 米游社 API 返回角色数量可能为 0

有 json 吗，我给你拦住了

[mark9804]

我知道了 米游社 API 返回角色数量可能为 0

有 json 吗，我给你拦住了

十天前的肯定没有了，我记得好像这个 case 似曾相识最后不知道是哪里出了问题，总之我前端做一下处理，如果这样也拦截不到的话说明还有其他地方出现了问题

[Arondight]

素材缺失依旧

commit 63e60be6b77253976f2612ccea8f8ff1c3473899 (HEAD -> master, origin/master, origin/dev, origin/HEAD)
Author: Qin Fandong <[email protected]>
Date:   Wed Sep 7 22:22:41 2022 +0800

    fix defconfig

[mark9804]

好消息是确实是加载太久的问题，坏消息是 vue 就这个速度

[mark9804]

vue 就这个速度

实在没办法压缩 vue 的执行时间， 0498c46 不行的话就只能 vite 走一遍提前编译了

[Arondight]

我把 json 给你发过去咋样

[mark9804]

我把 json 给你发过去咋样

不用，顶天快个十几毫秒罢了，vue evaluate 太久了，这个页面是 component 最多的

[mark9804]

如果是因为 json 的问题的话，同样 信息 应该也出现这种情况，所以应该是哪里的执行还能优化，我最近没时间了，有空的时候找一下瓶颈在哪

[Arondight]

我把 json 给你发过去咋样

不用，顶天快个十几毫秒罢了，vue evaluate 太久了，这个页面是 component 最多的

听起来需要优化的是 puppeteer

[mark9804]

听起来需要优化的是 puppeteer

执行效率问题，做不了 tree shaking 就先这样吧，我再挣扎挣扎

[Arondight]

我看看有没有办法优化一下截图时间

[mark9804]

截图时间

我们之前讨论过这个问题，结论是现在的方法逼近最优了

解决的关键点在于要在 puppeteer 等待的 500ms 之内把数据处理好，让浏览器开始请求图片数据，这样 puppeteer 会进入第二次等待，能保证截图是完整的

我们现在使用的 vue3.prod.js 是完全体，没有做 tree shaking，因此加载的时候可能有不必要的任务，假如我手动用 h 函数来接管模板的解析可能会快一点但应该不会快很多，因为开支大头在 vue evaluate 上面

至于为什么是加了 json 之后出问题，可能正好是这个 json 文件给这个 500ms 贡献了最后几十 ms 的解析时间，以后版本升上去，角色武器素材越来越多，照样会出问题的。现在出了也好

[mark9804]

待会最后推一个小小优化，如果还有问题的话就手写 render 或者预编译了

[Arondight]

能不能用这俩做点什么，一个是等 xpath visible ，另一个是等一个随意设置的时间（之前的 500ms）

https://pptr.dev/api/puppeteer.page.waitforxpath/

https://pptr.dev/api/puppeteer.page.waitfornetworkidle

[Arondight]

https://github.com/puppeteer/puppeteer/blob/9b120f6c7be6f0001f0d2695cffae43b707cb29c/src/common/Page.ts#L2115-L2122

看样子 idleTime 要设置成我们需要的，例如 1000 ，而 timeout 不要传值，会使用默认超时 （30000）

[mark9804]

xpath visible

<img> 有一个 complete 事件可能可以利用一下，要是能判断所有图片全都加载完了的话 new 一个节点扔进去就行了，但是怎么判断呢

等一个随意设置的时间

除非失败概率太高不然还是不动这个阈值的好

[mark9804]

啊先这样吧，观察一下，开摆了

[Arondight]

除非失败概率太高不然还是不动这个阈值的好

我理解的这不是一个阈值，这不是何时判断页面加载完毕，这是在 idle time 后 resolve 一个 promise，就这么简单，我想的是在截图前等待这个 promise resove ，至于 idle time 是多少那就是我们说了算了

[mark9804]

呃比如说 idle time 设置成 1500，那就是等待 1.5s 之后截图这个意思？

[Arondight]

呃比如说 idle time 设置成 1500，那就是等待 1.5s 之后截图这个意思？

我理解的不是，是等待 1.5s 内没有任何活动的连接之后 resolve promise，紧接着就是截图的代码

[Arondight]

应该是至少等 1.5s ，页面完毕的时间越长，总体时间就越多，和 500ms 一个性质

[mark9804]

感觉有点太妥协了，暂时先不动它吧，我之后看看拿 svelte 重写一遍

[mark9804]

svelte 重写

大约是不用了，只差一个预构建，不然 Svelte 对比 Vue 3 应该是没有什么优势的

[Arondight]

改一下 puppeteer 吧，省的麻烦，时间先设置 800ms 估计足够用了

[mark9804]

<component @hook:mounted="mountedCount++" />

if (mountedCount === array.length) {
  new Image onload = createElement（）
}