javascript - Vue 服务器端渲染如何在耗时的计算中执行？

Question

我目前正在为一家销售商品的大公司开发一个网站。他们拥有包含大量搜索选项和过滤器的广泛目录，目前需要一些时间来计算和渲染（大约 1-2 秒）。我无法进一步加快此过程，因为我需要检查每个过滤器并返回正确的结果。

因此，当我单击复选框以应用过滤选项时，网站会冻结（Chrome 开发工具中的“性能”选项卡显示 JS 引擎非常繁忙）。我担心潜在用户会在引擎忙碌时继续反复点击 - 而不是耐心等待 - 导致令人沮丧的等待以选中取消选中且未应用过滤结束。我还尝试将耗时的操作包装在 a 中new Promise，但它仍然没有响应，最后以同样的方式冻结了浏览器。

所以我要问两个问题：

• 有没有办法在 Vue 计算结果时禁止进一步的用户输入（并且，也许，应用“加载”屏幕？我这样做的尝试是通过在方法/计算的开头和实际函数之前放置特定的指令身体，没有成功）
• 如果我在 Vue 中使用服务器端渲染，它会如何表现？它仍然会冻结那 1 秒钟，等待服务器有效负载，还是可以与Promise函数相媲美？

我真的不知道如果我澄清了问题，（我希望我的英语是正确的，即使技术上可能不正确，因为我是），如果有一些我遗漏的信息，我可以很高兴地纠正。

标签： javascriptvue.jsusabilityserver-side-rendering

Answer 1

我的建议是将这个复杂的逻辑移动到一个客户端工作脚本中，该脚本发出请求和任何过滤。其次，作为 UI/UX 级别，将添加一个“正在工作...”叠加层，并带有某种形式的动画，表明工作正在完成。

至于在服务器端进行这项工作......如果您通过 Node 进行服务器端渲染，则会执行复杂的阻塞计算，这将禁止所有用户，除非您注入某种形式的工作池或 RPC 前端工作队列。这是可能的，但答案和选项更复杂，超出了本网站的范围。

如上所述，带有一些动画的工人可能是最好的方法。