javascript divide long operation into sub operations to improve responsiveness-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_13882/article/details/82396346

本文探讨了浏览器如何智能地监控Web应用状态，并介绍了通过将复杂DOM操作分解为更小的任务来提高浏览器响应性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nowadays the browser is much more smarter and they normally possed some features that intelligently monitor the status of the web applications. If some process overruns, say, 5 seconds non-stop (browser suc as FireFox, and Opera does this, the Iphone actually kills any script that are running for more than 5 seconds without even opening a dialog.)

because of this ,it make sense to "reducing all complex operations (any more than a few hundred milliseconds）into manageable portions becomes a necessity.

below shows an example that will create 2000 rows, and each row is with 6 columns. this operation may take long to run as it create a log of DOM object.

 var function1 = function () {

    // Normal, intensive, operation
    var table = document.getElementsByTagName("tbody")[0];
    for (var i = 0; i < 2000; i++) {
      var tr = document.createElement("tr");
      for (var t = 0; t < 6; t++) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("" + t));
        tr.appendChild(td);
      }

      table.appendChild(tr);
    }
  };
window.onload = function1;

With the help of timer, you can reorganize the function as such (with all necessary html tags and others).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>

<script type="text/javascript">

// this may be some expensive task, which when run in serialization, might cause the browser to be unresponsive. so it makes sense to divide the tasks into some subtasks.
  var function1 = function () {

    // Normal, intensive, operation
    var table = document.getElementsByTagName("tbody")[0];
    for (var i = 0; i < 2000; i++) {
      var tr = document.createElement("tr");
      for (var t = 0; t < 6; t++) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("" + t));
        tr.appendChild(td);
      }

      table.appendChild(tr);
    }
  };

  // while it is more natural(counter-natural when you are do the program) to split the long running operation so that each runs in piecemeal fragement so that the browser may become more responsive 
  var fun2 = function () {
    var table = document.getElementsByTagName("tbody")[0];
    var i = 0, max = 1999;

    setTimeout(function () {
      for (var step = i + 500; i < step; i++) {
        var tr = document.createElement("tr");
        for (var t = 0; t < 6; t++) {
          var td = document.createElement("td");
          td.appendChild(document.createTextNode("" + t));
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
      if (i < max) {
        // the timeout value of 0 indicate that the function call will fire immediately
        setTimeout(arguments.callee, 0);
      }
    }, 0);

  };
  window.onload = fun2;
</script>

<body>

<!--
This example will demonstrate how we can make use of timer to split some expensive tasks into some non-expensive tasks. 

 -->

<table><tbody></tbody></table>


</body>
</html>