Question

我有一个网页，其中函数中的javascript计算需要花费大量时间才能完成并使页面冻结。我应该使用什么技术来确保在后台进行计算时javascript不会冻结浏览器？

Answer 1

如果您只需要进行计算而不需要在长时间运行的计算中访问DOM，那么您有两个选择：

您可以将计算分解为多个部分，并在setTimeout()上一次执行一个部分。在每次setTimeout()调用时，浏览器都可以自由地为其他事件提供服务，并使页面保持活动和响应。完成最后一项计算后，即可执行结果。
您可以在现代浏览器中使用webworker在后台运行计算。当计算在webworker中完成时，它会将消息发送回主线程，然后您可以使用结果更新DOM。

以下是相关答案，其中还显示了一个示例：Best way to iterate over an array without blocking the UI

Answer 2

某些浏览器只有一个用于运行代码和更新UI的线程（换句话说，在计算完成之前，浏览器将显示为“冻结”）。您将尝试以某种方式异步执行操作。

如果计算确实昂贵，您可能需要调用服务器并让服务器进行计算，并在计算完成后回调客户端。

如果计算种类价格昂贵，您可以尝试在客户端上以块的形式执行此操作。这实际上不是异步的（因为客户端将在执行每个块时阻塞），但目标是使块足够小以使阻塞不明显。

Answer 3

让我详细说明@jfriend00的回答，给出一个具体的细节示例。这是一个长期运行的JavaScript进程，可以通过单击按钮来启动。一旦运行，它就会冻结浏览器。该过程包含一个长循环，它重复一些迭代占用相对较少时间的工作量。

由于浏览器冻结，调试这样的脚本并不容易。避免浏览器冻结的一种替代方法是使用Web工作者。这种方法的缺点是Web工作者本身的可调试性很差：不支持像Firebug这样的工具。

<html>
<head>
    <script>
        var Process = function(start) {
            this.start = start;
        }

        Process.prototype.run = function(stop) {
            // Long-running loop
            for (var i = this.start; i < stop; i++) {
                // Inside the loop there is some workload which 
                // is the code that is to be debugged
                console.log(i);
            }
        }

        var p = new Process(100);

        window.onload = function() {
            document.getElementById("start").onclick = function() {
                p.run(1000000000);
            }
        }
    </script>
</head>
<body>
    <input id="start" type="button" value="Start" />
</body>
</html>

使用队列数据结构（例如http://code.stephenmorley.org/javascript/queues/），间隔计时器和对原始进程控制流程的一些小修改，可以构建一个不冻结浏览器的GUI，离开进程完全可调试，甚至允许其他功能喜欢踩踏，停顿和停止。

这是怎么回事：

<html>
<head>
    <script src="http://code.stephenmorley.org/javascript/queues/Queue.js"></script>
    <script>
        // The GUI controlling process execution
        var Gui = function(start) {
            this.timer = null; // timer to check for inputs and/or commands for the process
            this.carryOn = false; // used to start/pause/stop process execution
            this.cmdQueue = new Queue(); // data structure that holds the commands 
            this.p = null; // process instance
            this.start = start;
            this.i = start; // input to the modified process 
        }

        Gui.prototype = {
            /**
             * Receives a command and initiates the corresponding action 
             */
            executeCmd: function(cmd) {
                switch (cmd.action) {
                    case "initialize":
                        this.p = new Process(this);
                        break;
                    case "process":
                        this.p.run(cmd.i);
                        break;
                }
            },

            /*
             * Places next command into the command queue
             */
            nextInput: function() {
                this.cmdQueue.enqueue({
                    action: "process",
                    i: this.i++
                });
            }
        }

        // The modified loop-like process
        var Process = function(gui) {
            this.gui = gui;
        }

        Process.prototype.run = function(i) {
            // The workload from the original process above
            console.log(i);

            // The loop itself is controlled by the GUI
            if (this.gui.carryOn) {
                this.gui.nextInput();
            }
        }

        // Event handlers for GUI interaction
        window.onload = function() {

            var gui = new Gui(100);

            document.getElementById("init").onclick = function() {
                gui.cmdQueue.enqueue({ // first command will instantiate the process
                    action: "initialize"
                });

                // Periodically check the command queue for commands
                gui.timer = setInterval(function() {
                    if (gui.cmdQueue.peek() !== undefined) {
                        gui.executeCmd(gui.cmdQueue.dequeue());
                    }
                }, 4);
            }

            document.getElementById("step").onclick = function() {
                gui.carryOn = false; // execute just one step
                gui.nextInput();
            }

            document.getElementById("run").onclick = function() {
                gui.carryOn = true; // (restart) and execute until further notice
                gui.nextInput();
            }

            document.getElementById("pause").onclick = function() {
                gui.carryOn = false; // pause execution
            }

            document.getElementById("stop").onclick = function() {
                gui.carryOn = false; // stop execution and clean up 
                gui.i = gui.start;
                clearInterval(gui.timer)

                while (gui.cmdQueue.peek()) {
                    gui.cmdQueue.dequeue();
                }
            }
        }
    </script>
</head>
<body>
    <input id="init" type="button" value="Init" />
    <input id="step" type="button" value="Step" />
    <input id="run" type="button" value="Run" />
    <input id="pause" type="button" value="Pause" />
    <input id="stop" type="button" value="Stop" />
</body>
</html>

虽然这种方法当然不适合所有可以想到的长期运行的脚本，但它确实如此可以适应任何类似循环的场景。我用它来移植Numenta's HTM/CLA人为的智能算法到浏览器。

Answer 4

我认为这可以解决您的问题，

function myClickOperation(){
    var btn_savebutton2 = document.querySelector("input[id*='savebutton2']");
    setTimeout(function () { btn_savebutton2.click() }, 1000);
}

//完整的Html内容

<html>
<script>
    function myClickOperation(){
        var btn_savebutton2 = document.querySelector("input[id*='savebutton2']");
        document.getElementById('savebutton1').disabled = true;
        setTimeout(function () { btn_savebutton2.click() }, 1000);
    }
    function testClick(){
        var idd = document.getElementById("myid");
        idd.innerHTML =idd.innerHTML +"<br/>" + new Date();
        if(true){
            setTimeout(function () { testClick() }, 1);
        }
    }

</script>
<body>
    <input type="button" id="savebutton1" onclick="myClickOperation()" value="Click me" />
    <input type="button" id="savebutton2" onclick="testClick()" value="Do not click this" />
    <input type="text"/>

    <input type="button" value="temp"/>
    <div style="height: 300px;overflow-y: scroll;" id="myid"/>
</body>

Answer 5

 setTimeout(function() { ..code  }, 0);

我推荐这个用于繁重的执行时间，并且对于加载ajax，你可以尝试添加

$(window).on("load", function (e) { }); // for jquery v3

如果它在加载过程中。

如何在Javascript中进行长时间运行的计算时避免冻结浏览器

5 个答案: