当我们在input输入内容时，键盘的按键被按下时发生了什么？
1.准备
我们讨论这个问题前先关注如下几个问题：
a: 浏览器内核中有哪些线程？它们的作用分别是什么？
b: 从手指按下到抬起，input输入内容的操作是从哪一步触发的，换句话说，从哪一步开始内容就被输入了？
c: input内显示的value是浏览器内核中哪一个线程更新或者说显示上去的？
a. 浏览器内核中有哪些线程？它们的作用分别是什么？
① 图形用户界面GUI渲染线程
负责渲染界面，包括解析HTML、CSS、构建DOM树、渲染树、布局与绘制等；
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行；
与JS线程互斥(不能同时执行)
② JS引擎线程
简单来说，负责执行JS；
与GUI线程互斥(不能同时执行)
③ 事件触发线程
听起来像JS控制的，但是其实归属于浏览器，而不是JS引擎;
用来监听/触发事件、将对应的任务(事件callback)添加到事件队列
④ 定时触发器线程
setInterval与setTimeout所在线程；
定时和计时器并不是由JS引擎计时的，因为JS引擎是单线程的，如果JS引擎处于堵塞状态，那会影响到计时的准确；
当计时完成被触发，事件会被添加到事件队列，等待JS引擎空闲了执行；
注意：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms
⑤ 异步HTTP请求线程
在XMLHttpRequest在连接后新启动的一个线程；
线程如果检测到请求的状态变更，如果设置有回调函数，该线程会把回调函数添加到事件队列，同理，等待JS引擎空闲了执行；
b: 从手指按下到抬起，input输入内容的操作是从哪一步触发的，换句话说，从哪一步开始内容就被输入了？
code-1
<body>
<input id="my-input" />
</body>
有这样一段HTML代码，正常输入或者手指常按输入就会发现，手指按下时内容就被输入到了#my-input中
c: input内显示的value是浏览器内核中哪一个线程更新或者说显示上去的？
code-2
<body>
<input id="my-input" />
<button id="kill-btn"></button>
<script>
var killBtn = document.getElementById('kill-btn');
killBtn.addEventListener('click', function 
最低0.47元/天 解锁文章
7756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
