所有用于更新用户界面的操作都是由浏览器的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线程空闲后再次从队列中取出任务来执行
本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒
原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。
原始发表时间:2015-11-12
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句