Jank免费体验和websocket

Question

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

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

这使得动画变得松散，因为在javascript中花费的时间超过了16ms 60fps的目标。

据我所知，websocket.onmessage是阻止通话。

有没有在几个frames中传播那些onMessage事件？

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（a.k.a AJAX请求）中，而不是快速加载60条单独的消息。

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

Answer 2

完成上述答案：

  

如果任何动画触发绘画，布局或两者，则“主线程”   将被要求做工作。这对CSS和CSS都是如此   基于JavaScript的动画，以及布局或绘画的开销   可能使与CSS或JavaScript执行相关的任何工作相形见绌，   使问题没有实际意义。

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

检查css样式触发主线程。

http://csstriggers.com/