专栏首页性能与架构浏览器的UI线程

浏览器的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线程空闲后再次从队列中取出任务来执行

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-11-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图解 Java 线程生命周期

    创建线程(NEW),然后线程做自己的工作(RUNNABLE),做完之后就终止了(TERMINATED)。

    dys
  • 架构设计 - 隔离术

    隔离是通过将系统、资源分开,从而保证在发生问题时使其影响最小化,防止出现雪崩效应。

    dys
  • Web安全-跨站脚本攻击XSS

    xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除数...

    dys
  • Java并发编程,Condition的await和signal等待通知机制

    Object类是Java中所有类的父类, 在线程间实现通信的往往会应用到Object的几个方法: wait(),wait(long timeout),wait(...

    李红
  • 生产者消费者模式

    在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度。

    哲洛不闹
  • 从ReentrantLock的实现看AQS的原理及应用

    AQS作为JUC中构建锁或者其他同步组件的基础框架,应用范围十分广泛,这篇文章会带着大家从可重入锁一点点揭开AQS的神秘面纱。

    美团技术团队
  • 让用户帮你把产品做得更好

    在互联网产品的开发和运营中,及时了解广大的实际用户的想法是极其重要的一件事情,任何产品都不可能一直采用闭门造车的方式向前走。

    一斤代码
  • 剑指offer代码解析——面试题22栈的压入、弹出序列

    本题的详细分析过程均在代码的注释中: import java.util.Stack; /** * 题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断...

    大闲人柴毛毛
  • 结合ThreadLocal来看spring事务源码,感受下清泉般的洗涤!

      在我的博客spring事务源码解析中,提到了一个很关键的点:将connection绑定到当前线程来保证这个线程中的数据库操作用的是同一个connection...

    青石路
  • 现场报道 | 英伟达GTC大会开幕,盘点首日三大亮点

    机器之心报道 编辑:李泽南 昨天,GPU 开发者的年度盛会,GPU 技术大会(GPU Technology Conference,GTC)在美国加州圣何塞开始举...

    机器之心

扫码关注云+社区

领取腾讯云代金券