王海艳技术文档

# html 相关

# 1. 浏览器

浏览器可以分为两部分，shell 和 内核。

  1. shell：是指浏览器的外壳，例如菜单，工具栏等。
  2. 内核：才是浏览器的核心。内核是基于标记语言显示内容的程序或模块，浏览器内核又可以分成两部分，
    • 2.1 渲染引擎：渲染页面，Trident（IE）、Gecko(Firefox)、 Presto(Opera)、Webkit(Safari)
    • 2.2 JS 引擎：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

# 2. 浏览器的渲染原理

  1. html 文档--》DOM 树
  2. Css 样式--》cssom 规则树
  3. DOM 树+cssom 规则树--》渲染树，渲染树的节点为渲染对象，对应关系非一对一（不可以见的 dom 节点）
  4. 根据渲染树来进行布局（回流，自动重排）
  5. 布局结束后，就是绘制阶段
  • 其他：
  1. js 文件不仅会阻塞 dom 的构建，还会导致 cssom 阻塞 dom 的构建
  2. 重绘:dom 节点更新属性，只是更新外观和风格，不会影响布局
  3. 回流：改变了元素的尺寸，布局，需要重新构建，回流必定会发生重绘，重绘不一定会引发回流
  4. 操作 dom 慢：dom 是渲染引擎，js 是 js 引擎，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。

# 3. 浏览器内多标签之间的通信

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者， 让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

# 4. js 进程，线程，宏任务，微任务

# 概念

  • 进程：是 cpu 资源分配的最小单位（是能拥有资源和独立运行的最小单位）
  • 线程： 是 cpu 调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
  • GUI 渲染线程与 js 引擎线程是互斥的，当 JS 引擎线程执行时 GUI 渲染线程会被挂起，GUI 更新则会被保存在一个队列中等待 JS 引擎线程空闲时立即被执行。

# 浏览器渲染进程

  • GUI 渲染线程

    • 负责渲染页面，布局和绘制
    • 页面需要重绘和回流时，该线程就会执行
    • 与 js 引擎线程互斥，防止渲染结果不可预期

  • JS 引擎线程

    • 负责处理解析和执行 javascript 脚本程序
    • 只有一个 JS 引擎线程（单线程）
    • 与 GUI 渲染线程互斥，防止渲染结果不可预期

  • 事件触发线程

    • 用来控制事件循环（鼠标点击、setTimeout、ajax 等）
    • 当事件满足触发条件时，将事件放入到 JS 引擎所在的执行队列中

  • 定时触发器线程

    • setInterval 与 setTimeout 所在的线程
    • 定时任务并不是由 JS 引擎计时的，是由定时触发线程来计时的 计时完毕后，通知事件触发线程

  • 异步 http 请求线程

    • 浏览器有一个单独的线程用于处理 AJAX 请求 当请求完成时，若有回调函数，通知事件触发线程

# 宏任务和微任务的执行

  • 宏任务：由于 JS 引擎线程和 GUI 渲染线程是互斥的关系，浏览器为了能够使宏任务和 DOM 任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI 渲染线程开始工作，对页面进行渲染。
// 宏任务-->渲染-->宏任务-->渲染-->渲染．．．
// setTimeout，setInterval等
  • 微任务: 微任务可以理解成在当前宏任务执行后立即执行的任务，当宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完
// 宏任务-->微任务-->渲染-->宏任务-->微任务-->渲染-->渲染．．．
//Promise，process.nextTick

# 线程参考链接

← javascript基础 →