首先，我们确定的知道 JS 是单线程语言，但是现代浏览器大多是多进程的。
进程是啥？
进程是CPU资源分配的最小单位【独立运行且拥有自己的资源空间的任务程序】
进程包括运行中的程序和程序所使用到的内存
线程？
线程是CPU调度的最小单位【任务程序中的一个执行流】
现代浏览器进程
现代浏览器进程主要有四大进程（浏览器、渲染、插件、GPU），另外还包含 网络进程、音频进程 等。多进程能够让浏览器运行更稳定、更安全、更独立，能更好的利用计算机多核处理器，提高系统资源利用率。
作为我们主要需要了解的是 渲染进程
浏览器的渲染进程包括一个多线程，主要的线程有（GPU渲染线程、JS引擎线程、事件触发线程、定时器触发线程、异步HTTP请求线程等）
JS引擎线程理解
这里可以举个例子说明？
去银行排队办理业务，窗口一次服务一个人，后面的人理论上就会排队取号进入到队列中，先到先服务，这里先不说VIP那种特殊客户.....
如果当前线程空闲，并且队列为空，那每次加入队列的函数将立即执行。
这里待补充动画图
setTimeout与setInterval
setTimeout(func, delay)：设置超时调用。如对于setTimeout(func, 100)，js引擎会为func函数设置一个计时器，100毫秒后，将func添加到任务队列等待执行。
setInterval(func, interval)：设置循环调用。对于语句setInterval(func, 100)，js引擎每隔100毫秒就会把func添加到任务队列一次。
相同点：
-
两者都会加入同一个队列，等待线程空闲时执行。
-
两者都无法保证在何时执行回调，因为无法知道线程何时空闲。
不同点
-
setTimeout只会将函数添加到任务队列一次，而setInterval则是循环往队列中添加函数。
-
setTimeout可以保证函数在指定的时间间隔内不会执行，而setInterval无法保证（有可能出现接近连续执行的情况，后面会分析原因）。
console.log("Start ...1:",+new Date());
setTimeout(()=>{console.log("Stop ...2:",+new Date())},1000); //延迟一秒执行
console.log("End ...3",+new Date());
setTimeout(()=>{console.log("Stop ...4:",+new Date())},1000); //延迟一秒执行
setTimeout(()=>{console.log("Stop ...5:",+new Date())},0); //立即执行
setTimout 本身就是一种异步
应用场景：一般实现函数的节流防抖基本上使用的都是setTimeout。
利用setTimeout保证在指定的时间内不会执行的特点，我们可以在执行完上次的回调函数后，重置定时器，实现循环执行func的效果，并且从上次执行完毕到下次执行开始，至少会经过100毫秒。这在实际的编码中通常会带来较大的性能提升，同时函数的执行间隔也会相对稳定。
对于setTimeout来说浏览器本身的时间间隔限制 4ms 具体可在 timers 查看。
clearInterval 用于清除定时器
function testCall(msg){
console.log("函数方法有名称msg===",msg);
}
//param 回调方法名 、 延迟时间、方法参数
setTimeout(testCall,500,"财务线前端各位好")
//param 回调匿名方法名 、 延迟时间、方法参数
setTimeout(function(msg){console.log("匿名函数msg===",msg);},500,"财务线前端各位好")
//param 作为字符串回调方法 、 延迟时间
setTimeout("testCall('财务线前端各位好')",500)
eval
前面我们知道setInterval实际上就是每隔一定的时间，向任务队列中添加一个回调方法。但是：
setInterval 向队列添加回调的时候，如果队列中之前的回调还在，那么就会放弃本次添加回调，需要注意一点 一定的时间 这个计时没有被影响。所以可以这里理解，setInterval只会关注任务的添加，不关注任务的执行。
这里待补充图例
setTimeout与requestAnimationFrame
相同点：
-
都可以实现轮询操作
-
都可以实现动画功能
不同点：
-
setTimeout 的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器 UI 线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。requestAnimationFrame 采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
-
刷新频率受 屏幕分辨率 和 屏幕尺寸 的影响，不同设备的屏幕绘制频率可能会不同，而setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。从而会出现丢帧现象。
-
使用 setTimeout 实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，而且还浪费 CPU 资源。而 rAF 则完全不同，当页面处理未激活的状态下，该页面的屏幕绘制任务也会被系统暂停，因此跟着系统步伐走的 rAF 也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销。【CPU节能】
-
requestAnimationFrame执行会把每一帧中的所有DOM操作集中起来，在重绘、回流中一次完成。执行的时间点一般和浏览器的刷新频率保持一致。需要注意的是，这里的所有DOM操作在回流或者重绘中排除掉掉隐藏或者不可见元素。
var progress = 0;
//回调函数
function render() {
progress += 1; //修改图像的位置
console.log("进度：",progress);
if (progress < 100) {
//在动画没有结束前，递归渲染
window.requestAnimationFrame(render);
}
}
//第一帧渲染
window.requestAnimationFrame(render);
- setInterval
每隔一定的时间，就启动一次函数的执行
当有定时器中的代码正在执行时，会跳过这次插入，在定时器代码执行时间比设定的时间长时，依然会出现代码执行的间隔比预期的小，可以使用链式调用setTimeout来代替setInterval
let timer = null;
let iCount = 0;
clearInterval(timer);
timer = setInterval(()=>{
console.log("iCount=",iCount);
iCount+=5;
if(iCount>100){
clearInterval(timer);
}
},100);
- setTimeout
通过一个定时器，让函数在计时结束后再执行
此方法是浏览器window对象上的方法，所以理论上回调函数上默认的this指向是window。当然具体得看运行上下文。
let timer = null;
let iCount = 0;
clearTimeout(timer);
timer = setTimeout(function fn(){
console.log("iCount=",iCount);
iCount+=5;
if(iCount>100){
clearTimeout(timer);
}else{
timer = setTimeout(fn,100);
}
},100);
- requestAnimationFrame
请求动画帧，这是一个H5提供的API，现代浏览器基本都支持。
let timer = null;
let iCount = 0;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn{
console.log("iCount=",iCount);
iCount+=5;
if(iCount>100){
cancelAnimationFrame(timer);
}else{
timer = requestAnimationFrame(fn);
}
});
常见的应用场景
-
防抖（规定时间外执行一次）、节流（规定时间执行） 这个具体一般用于resize页面窗口变化、搜索框功能。
-
setTimeout(fn,0),当延迟时间设置为0，主要是改变一下代码执行顺序。
-
动画轮询等
事件流【任务、微任务、宏任务】队列、执行顺序
参考：
网友评论