WEB学习进阶之路二

要熟练并深刻的掌握js，就必须对js的运行原理和机制了如指掌，本次就学习下js的运行原理和机制

• 现代浏览器都是多进程的，一个窗口就是一个进程。

• js是单线程运行的，主要是js可以操作dom，多线程运行时，一个删除，一个新增，算哪个，所以未来js依旧会是单线程运行。

• 浏览器打开一个窗口至少有4个进程

  1. 一个主进程，负责资源下载，界面展示等主要基础功能；

  2. 一个GPU进程，负责3D图示绘制；

  3. 一个网络进程，负责网络通信；

  4. 一个渲染进程，负责js执行，页面渲染等功能；

  5. 一个插件进程，如果有浏览器插件，可以有多个；

  不过需要注意一点，这些知识只是目前有效，后面随着技术的发展，这些知识可能就过期了，记住定期更新自己的知识

  比如我的电脑：

  
  

接下来学习下这几个进程中最主要的渲染进程，也是本章节的主要内容

GUI渲染线程

   打开浏览器，看到一个页面，操作如下

1. 解析html代码，生成dom tree

2. 解析css代码，生成cssom

3. 集合dom tree和cssom生成 rendering tree

4. 如果修改了颜色，背景等，gui就会repaint；如果改变了元素的尺寸，gui就会reflow；这里有个知识点，reflow的成本比repaint的成本要高

JS引擎线程

也就是常说的js内核，js引擎和gui线程只能同时一个工作，js优先执行，js执行时，gui停止渲染，js就阻塞了gui渲染，记住这点，优化页面于此息息相关。

JS定时器线程

由于js是单线程的，js就重新开一个计时器线程，等时间到了之后，js计时器线程就把任务放到任务队列尾部，等js引擎线程来执行

JS异步线程

异步线程执行异步的http请求，当请求完成后，就是收到响应（通过http状态来判断），将任务放到任务队列尾部，等js引擎线程来执行

事件循环线程

事件循环线程管理者task queue,当js执行过程中碰到事件绑定，异步操作，定时任务时；当期完成时，将其的回掉或者操作放到task queue的队尾，等js引擎线程空闲时执行。

对于event loop，这里用一张网络盗图看看执行过程，

关于setTimeout和setInterval

setTimeout是一次性的，setInterval是循环的；

时间累积，当使用setInterval时，任务执行的时间大于定时的时间，就会造成时间累积，累积会造成事件丢失。所以特殊情况下可以使用setTimeout代替setInterval

<script>
function foo() {
    setTimeout("foo", 1000);
    //todo something...
}

setTimeout("foo", 1000);
</script>

setTimeout("bar", 0); 表示尽快执行，就是说主线程的事件处理完成之后，第一时间或者最快执行bar

关于定时器执行时，并不是很准确，主要有以下几个原因，

第一，定时线程的时间到了，将任务放到任务队列，但是如果主线程被占用，那么这个任务就会一直等待，知道主线程任务完成

第二，定时器在各个浏览器实现时，有最小时间限制，比如在嵌套层数过深时，就会导致回掉阻塞

第三，未被激活的tabs，各个浏览器最小时间也不一样，比如firefox是1s