浏览器的UI线程

时间:2022-05-06
本文章向大家介绍浏览器的UI线程，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
所有用于更新用户界面的操作都是由浏览器的UI线程来完成

UI线程维护一个队列，把每个要更新UI的操作都做为一个任务添加到队列中，然后等UI线程空闲时再按顺序进行处理

示例

<button onclick="doClick()">
点击测试
</button>

<script>
function doClick(){
  var div = 
    document.createElement("div");

  div.innerHTML = "test";
  document.body.appendChild(div);
}
</script>

当用户点击按钮时，会触发UI线程来创建两个任务，并添加到队列中，

第一个任务是更新按钮的点击状态样式，是浏览器默认的操作

第二个任务是执行 doClick()

UI线程空闲下来后，先从队列中取出第一个任务来执行，完成后，再取出第二个任务，doClick()中需要创建一个元素并添加到body，这也是一个更新UI的操作，UI线程会再创建一个任务并添加到队列中，然后在UI线程空闲后再次从队列中取出任务来执行

随机文章
本站知识点必读
最近更新