mackxu
子曰:学而时习之,不亦说乎?

共用于执行JavaScript代码和更新用户界面的进程通常称为”浏览器UI线程”;

         UI线程的工作基于一个简单的队列系统,任务会保存到队列中直到进程空闲。一旦空闲,队列中下一个任务就被重新被提取出来并运行。这些任务要么是运行JS代码,要么执行UI更新,包括重绘和重排。进程每一次输入(响应用户事件,自动执行的JavaScript代码)可能会导致一个或多个任务被加入队列。

考虑一个简单的交互,点击按钮,屏幕上显示一条消息:

<button onclick="handleClick()">Click me</button>
<script type="text/javascript">
function handleClick() {
    var div = document.createElement('div');
    div.innerHTML = 'good work';
    document.body.appendChild(div);
}
</script>

当示例中的按钮被点击时,它会触发UI线程来创建两个任务并添加到队列中。第一个任务是更新按钮的UI,它需要改变外观以表示被点击了,第二个任务是执行JS代码即handlerClick()中的代码,唯一被运行的代码是这个方法和所有被它调用的方法。假设现在UI线程处于空闲状态,第一个任务被提取出来并执行以便更新按钮的外观,然后JavaScript任务被提取出来并执行。在运行过程中,handleClick()创建了一个新的<div>元素并把它附加在<body>元素末尾,这实际引发另一个UI变化。意味着在JavaScript执行过程中,一个新的UI更新任务被添加到队列中,当JavaScript运行完之后,UI还会再更新一次(IE浏览器)。

         当脚本执行时,UI不随用户交互而更新。执行时间段内用户交互行为所引发的的JavaScript任务被加入队列中,并在最初的JavaScript任务完成后依次执行。而这段时间内由用户交互行为所引发的UI更新会被自动跳过,因为页面中的动态部分会被优先考虑。因此,在一个脚本运行期间点击一个按钮,将无法看到它被按钮按下的样式,尽管它的onclick事件处理器会被执行。

posted on 2012-12-06 22:16  mackxu  阅读(1712)  评论(1编辑  收藏  举报