高性能javascript之响应接口

响应接口

大多数浏览器有一个单独的处理进程,它由两个任务共享:Javascript任务和用户界面更新任务。每个时刻只有其中一个操作得以执行,也就是说当Javascript代码运行时用户界面不能对输入产生反应,反之亦然,当Javascript运行时,用户界面就被锁定了。

浏览器UI线程
JavaScript和UI更新共享的进程通常被称为浏览器UI线程。此UI线程维护着一个简单的队列系统,任务被保存到队列中直至进程空闲。一旦空闲,队列中的下一个任务将被检索和运行。这些任务不是运行Javascript代码就是执行UI更新,包括重绘和重排版。此进程中最令人感兴趣的部分是每次输入均导致一个或多个任务被加入。

<html> 
<head>
<title>Browser UI Thread Example</title>
 </head>
<body>
<button onclick="handleClick()">Click Me</button> <script type="text/javascript">
    function handleClick(){
    var div = document.createElement("div"); 
    div.innerHTML = "Clicked!";     
     document.body.appendChild(div);
} 
</script>
</body>
 </html>

当例子中按钮被点击时,它触发UI线程创建两个任务并添加到队列中。第一个任务是按钮UI更新,它需要做出相应的改变以指示它被按下了;第二个任务是Javascript运行任务,包含handleClick()的代码。假设UI线程空闲,第一个任务被检查并运行以更新按钮外观,然后Javascript任务被检查和运行。在运行过程中handleClick()创建了一个新的div元素,并追加到body元素上,其效果是引发另一次UI界面改变,也就是说在Javascript运行过程中,一个新的UI更新任务被添加队列中,当Javascript运行完后,UI还会再更新一次。
当所有UI线程任务执行之后,进程进入空闲状态,并等待更多任务添加到队列中。空闲状态是理想的。因为所有用户操作会立刻引发一次UI更新。
浏览器在Javascript运行时间上采取了限制,确保恶意代码编写者不能通过无尽的密集操作锁定用户和计算机。此类限制有两个:调用栈尺寸限制和长时间脚本限制。长运行脚本限制有时被称作长运行脚本定时器或者失控脚本控制器,但其基本思想是浏览器记录一个脚本的运行时间,一旦到达一定限度就终止它。

Fork me on GitHub