当我在同一帧中通过three.js和tensorflow.js执行render和model.predict（）时如何处理Web上的FPS下降

Question

当我使用tensorflowjs预测模型，然后渲染到画布上时。 但是一旦执行该功能预测，则FPS会发生下降，从而导致屏幕卡住。

问：Tensorflowjs模型预测和threejs渲染在每个帧中执行，但我发现在模型预测结束之前将不执行renderer.render函数，这样会发生FPS降低，卡塞等现象。 。 有什么办法可以改善这个结果？

animation();

function animation()
{
requestAnimationFrame(animation)
predict(tf.fromPixels(albedo), tf.fromPixels(direct), model, INPUT_NODE_NAME, OUTPUT_NODE_NAME);
renderer.render(scene, camera);
}

function predict(albedo,direct,model,INPUT_NODE_NAME,OUTPUT_NODE_NAME) {
            console.time("1111");
            const y=tf.tidy(() => {
                const PREPROCESS_DIVISOR = tf.scalar(255 / 2);
                const preprocessedInputAlbedo = tf.div(
                tf.sub(albedo.asType('float32'), PREPROCESS_DIVISOR),
                PREPROCESS_DIVISOR);
                const preprocessedInputDirect = tf.div(
                tf.sub(direct.asType('float32'), PREPROCESS_DIVISOR),
                    PREPROCESS_DIVISOR);

                const reshapedInputAlbedo =preprocessedInputAlbedo.reshape([1, ...preprocessedInputAlbedo.shape]);
                const reshapedInputDirect =preprocessedInputDirect.reshape([1, ...preprocessedInputDirect.shape]);

                const imageConcat=tf.concat([reshapedInputAlbedo,reshapedInputDirect],3);

                var output=model.predict(
                    {[INPUT_NODE_NAME]: imageConcat}, OUTPUT_NODE_NAME);
                output=tf.mul(
                    tf.add(output, 1),
                    PREPROCESS_DIVISOR).toInt();
                output=output.reshape([512,512,3]);
                console.timeEnd("1111");
                return output;

            });
            tf.toPixels(y,document.getElementById("tensorflow"));