浏览器的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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

如何用 Python 爬取需要登录的网站?

最近我必须执行一项从一个需要登录的网站上爬取一些网页的操作。它没有我想象中那么简单,因此我决定为它写一个辅助教程。

28620
来自专栏编程

JavaScript文件加载优化

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,...

22280
来自专栏十月梦想

HTML5新增表单类型

HTML5新增了input更多类型的框,如颜色,邮箱,多文件还有对正则表达式的支持!

13930
来自专栏大闲人柴毛毛

linux软件安装(一)——源码安装

Linux软件简介 Linux上几乎所有的软件都经过了GPL授权,因此几乎所有的软件都会提供源码。 而一个软件要在Linux上执行,必须是二进制文件,因此...

37640
来自专栏用户画像

解决 javac不是内部或外部命令等问题

1、JAVA_HOME值为: D:\Program Files\Java\jdk1.7.0_11(JDK的安装目录)

10320
来自专栏pangguoming

vue路由跳转传参数

1. router-link <router-link :to="{ path: 'yourPath', param...

36260
来自专栏积累沉淀

hbase集群安装(2)-ubuntu下jdk安装

Ubuntu下安装jdk 我的安装路径是根目录下的software 把jdk压缩包解压到software目录下 ? 解压花一会时间 然后设置环境变量的命令 ? ...

20290
来自专栏www.96php.cn

CentOS7 安装图形化桌面详解

‍‍创建本地yum仓库‍‍  #yum clean all                            \\  清楚yum仓库缓存   #yum ma...

66080
来自专栏静下来

解决军哥lnmp1.3环境下wordpress不显示主题问题

最近给新买的vps用了军哥的lnmp环境包,由于是第一次用他的,还不太熟悉。 一开始就遇到了一些问题吧,在安装好wordpress之后,发现主题不能显示。 然后...

29750
来自专栏无原型不设计

【Mockplus教程】安装Mockplus

MAC上安装Mockplus 1 下载 进入摩客官网桌面端下载页面,选择MAC版本下载; 2 安装 下载完成后,打开dmg包,将Mockplus图标拖...

37590

扫码关注云+社区

领取腾讯云代金券