浏览器相关知识

更新于

事件循环

浏览器的进程

  1. 浏览器进程
  2. 网络进程
  3. 渲染进程
  4. 其他

渲染进程

主要工作
  1. 解析html、css
  2. 计算样式
  3. 布局
  4. 处理图层
  5. 页面渲染
  6. js
  7. 执行事件函数
  8. 执行定时器回调
  9. 其他…
渲染主线程
  1. 渲染进程会创建一个渲染主线程
  2. 消息队列(message queue 谷歌内部实现)或者叫event loop(w3c规范)里面放对应的任务
  3. 同类型的消息在同一个队列里面,所以,有多个队列
QA
  1. 如何理解js的异步 js是一门单线程语言,这是因为它运行在浏览器的渲染主线程上,而渲染主线程只有一个。

渲染主线程承担着诸多工作:渲染页面,执行js…

如果使用同步的方式极大概率会造成阻塞。给用户造成卡死的感觉

所以浏览器采用异步的方式来避免这个问题,比如:定时器、网络、事件监听,主线程将任务给其他线程去处理,自身立即结束异步的任务,转而执行后续代码。当其他线程执行完成时,将回调函数包装成任务的形式,加入到对应的消息队列末尾中,等待主线程调度。

  1. js为何会阻碍渲染? 因为他们都在渲染主线程上面执行。渲染是一个任务,只有在当前执行的js执行完成之后再执行渲染任务
  2. 任务优先级? w3c抛弃了宏任务的说法。其他任务由浏览器自行决定优先级
  • 微任务队列:w3c规定微任务具有最高优先级

  • 用户点击事件队列:浏览器实现用户点击的相应在微任务之后的次优先级

  • 定时器队列:其次是定时器之类的

  1. js事件循环? 事件循环或者称为消息循环。chrome的实现中,开启一个for死循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务放到对应消息队列的末尾即可 w3c的描述是:每个任务有不同的类型,同类型的任务必须放在同一个队列中,浏览器必须要有一个微队列,并且执行的优先级最高。其他的任务队列的执行顺序由浏览器自行决定

  2. 浏览器的定时器能做到精确记时吗? 不能

计算机没有原子钟,硬件上就不支持

浏览器对不同的操作系统有不同的实现方式,调用不同的api。本身就有差异

w3c的标准:定时器超过5层嵌套,会自带4ms的偏差

受事件循环的影响,定时任务的回调函数执行,有带有偏差