javascript divide long operation into sub operations to improve responsiveness -

joe.bq.wang

浏览: 399793 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript divide long operation into sub operations to improve responsiveness

博客分类：

javascript

javascript

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>

分享到：

javascript centralized timers | javascript subclassing native objects

2012-08-05 20:19
浏览 573
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript divide long operation into sub operations to improve responsiveness

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript divide long operation into sub operations to improve responsiveness

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

最近访客更多访客>>