javascript - 无卡顿体验和 websocket

Question

这是我遇到过几次的用例，我想知道是否有在接收数据时获得平滑加载动画的方法。

当应用程序启动时，会显示一个 CSS 动画 div 加载器。 然后我们开始接收来自 websocket 的一堆消息推送到初始数据集中。它不是那么大，可能是 ~60 < 1k 条消息。

这使得动画卡顿，因为在 javascript 中花费的时间远远超过了 16 毫秒 60fps 的目标。

据我所知，websocket.onmessage 是一个阻塞调用。

有没有办法将这些 onMessage 事件分散到多个 frames 中？

CSS 动画

.loader-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}  

.loader {
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: load4 1.3s infinite linear;
    transform: translateZ(0);
}

@keyframes load4 {
    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em @bluejeans, 2em -2em 0 0 @bluejeans, 3em 0 0 -1em @bluejeans, 2em 2em 0 -1em @bluejeans, 0 3em 0 -1em @bluejeans, -2em 2em 0 -1em @bluejeans, -3em 0 0 -1em @bluejeans, -2em -2em 0 0 @bluejeans;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 @bluejeans, 2em -2em 0 0.2em @bluejeans, 3em 0 0 0 @bluejeans, 2em 2em 0 -1em @bluejeans, 0 3em 0 -1em @bluejeans, -2em 2em 0 -1em @bluejeans, -3em 0 0 -1em @bluejeans, -2em -2em 0 -1em @bluejeans;
    }
    25% {
        box-shadow: 0 -3em 0 -0.5em @bluejeans, 2em -2em 0 0 @bluejeans, 3em 0 0 0.2em @bluejeans, 2em 2em 0 0 @bluejeans, 0 3em 0 -1em @bluejeans, -2em 2em 0 -1em @bluejeans, -3em 0 0 -1em @bluejeans, -2em -2em 0 -1em @bluejeans;
    }
    37.5% {
        box-shadow: 0 -3em 0 -1em @bluejeans, 2em -2em 0 -1em @bluejeans, 3em 0 0 0 @bluejeans, 2em 2em 0 0.2em @bluejeans, 0 3em 0 0 @bluejeans, -2em 2em 0 -1em @bluejeans, -3em 0 0 -1em @bluejeans, -2em -2em 0 -1em @bluejeans;
    }
    50% {
        box-shadow: 0 -3em 0 -1em @bluejeans, 2em -2em 0 -1em @bluejeans, 3em 0 0 -1em @bluejeans, 2em 2em 0 0 @bluejeans, 0 3em 0 0.2em @bluejeans, -2em 2em 0 0 @bluejeans, -3em 0 0 -1em @bluejeans, -2em -2em 0 -1em @bluejeans;
    }
    62.5% {
        box-shadow: 0 -3em 0 -1em @bluejeans, 2em -2em 0 -1em @bluejeans, 3em 0 0 -1em @bluejeans, 2em 2em 0 -1em @bluejeans, 0 3em 0 0 @bluejeans, -2em 2em 0 0.2em @bluejeans, -3em 0 0 0 @bluejeans, -2em -2em 0 -1em @bluejeans;
    }
    75% {
        box-shadow: 0 -3em 0 -1em @bluejeans, 2em -2em 0 -1em @bluejeans, 3em 0 0 -1em @bluejeans, 2em 2em 0 -1em @bluejeans, 0 3em 0 -1em @bluejeans, -2em 2em 0 0 @bluejeans, -3em 0 0 0.2em @bluejeans, -2em -2em 0 0 @bluejeans;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 @bluejeans, 2em -2em 0 -1em @bluejeans, 3em 0 0 -1em @bluejeans, 2em 2em 0 -1em @bluejeans, 0 3em 0 -1em @bluejeans, -2em 2em 0 0 @bluejeans, -3em 0 0 0 @bluejeans, -2em -2em 0 0.2em @bluejeans;
    }
}

Answer 1

可能有几种解决方案:

1. 如果您在 Web Worker 中加载该数据，则可以在单独的线程上接收数据，而不会干扰主线程的工作。

2. 确保您的 CSS 动画仅操纵变换和不透明度。这样它就很有可能在单独的线程上运行。

3. 在单个 XHR(也称为 AJAX 请求)中加载初始数据，而不是快速加载 60 条单独的消息。

您也可以将以上内容混合在一起。