JavaScript Css Animation

我在http://dev17.edreamz3.com/css/

然而，所有代码都能正常工作，但也存在性能问题。在桌面上，它很好，在移动设备上，东西太慢了，无法使用。我想优化动画，使其在移动设备上平稳运行。渲染动画可能需要20秒或更长时间。

现在代码的设计方式是在js/anim.js中，有一个render（）函数，每次发生滚动事件时都会执行。问题是这个程序效率不高，这就是我的想法。每次render（）执行时，它都会遍历迷宫的所有路径和部分并重新绘制它们，有没有其他方法或策略可以让它在移动和桌面上都能工作。

var offPathTime = 1000;
window.offSection = -1;
function render() {
    // var top = ($window.scrollTop() + (0.4 * $window.height())) / window.scale;
    var top = ($('.parent-div').scrollTop() + (0.4 * $('.parent-div').height())) / window.scale;
    top -= 660;
    top /= mazeSize.h;
    if (window.offSection != -1) {
        $body.addClass("blockScroll");
        $('.parent-div').addClass("blockScroll");
        // var wtop = $window.scrollTop() / window.scale;
        var wtop = $('.parent-div').scrollTop() / window.scale;
        wtop -= 660;
        wtop /= mazeSize.h;
        var $offSection = $("#offSection" + window.offSection);
        var $section = $("#section" + window.offSection);
        $(".section").removeClass("sectionActive");
        $offSection.addClass("sectionActive");
        $section.addClass("sectionActive");
        var sTop = 200 -(mazeSize.h * (window.offSections[window.offSection].cy - wtop));
        $container.animate({
            left: 290 -(mazeSize.w * window.offSections[window.offSection].cx) + "px",
            top: sTop + "px"
        }, offPathTime);
        // Path
        var lr = offPaths[window.offSection].x1 > offPaths[window.offSection].x0;
        var dx = Math.abs(offPaths[window.offSection].x1 - offPaths[window.offSection].x0);
        var dashw = (dx * mazeSize.w) | 0;
        $offPaths[window.offSection].css("width", "0px");
        $offPaths[window.offSection].show();
        if (lr) {
            $offPaths[window.offSection].animate({
                width: dashw + "px"
            }, offPathTime);
        } else {
            var x0 = offPaths[window.offSection].x0 * mazeSize.w;
            var x1 = offPaths[window.offSection].x1 * mazeSize.w;
            $offPaths[window.offSection].css("left", x0 + "px");
            $offPaths[window.offSection].animate({
                width: dashw + "px",
                left: x1 + "px"
            }, offPathTime);
        }
        return;
    }
    $body.removeClass("blockScroll");
    $('.parent-div').removeClass("blockScroll");
    $(".offPath").hide();
    if ($container.css("top") != "0px") {
        $container.animate({
                left: "-1550px",
                top: "0px"
            }, 500);
    }
    var pathIdx = -1;
    var path0 = paths[0];
    var path1;
    var inPath = 0;
    var i;
    var curTop = 0;
    var found = false;
    for (i=0; i<paths.length; i++) {
        var top0 = (i == 0) ? 0 : paths[i-1].y;
        var top1 = paths[i].y;
        if (top >= top0 && top < top1) {
            pathIdx = i;
            path1 = paths[i];
            inPath = (top - top0) / (top1 - top0);
            found = true;
            if (i > 0) {
                var dy = paths[i].y - paths[i-1].y;
                var dx = paths[i].x - paths[i-1].x;
                var vert = dx == 0;
                if (vert)
                    $paths[i-1].css("height", (dy * mazeSize.h * inPath) + "px");
                $paths[i-1].show();
            }
        } else if (top >= top0) {
            path0 = paths[i];
            var dy = paths[i].y - top0;
            var vert = dy != 0;
            if (i > 0) {
                if (vert)
                    $paths[i-1].css("height", (dy * mazeSize.h) + "px");
                $paths[i-1].show();
            }
        } else {
            if (i > 0) {
                $paths[i-1].hide();
            }
        }
        curTop = top1;
    }
    // Check for an active section
    $(".section").removeClass("sectionActive");
    var section;
    for (i=0; i<sections.length; i++) {
        var d = Math.abs(sections[i].cy - (top - 0.05));
        if (d < 0.07) {
            var $section = $("#section" + i);
            $section.addClass("sectionActive");
        }
    }
}