技术深度

[tiantingrui]

考察重点

• 非应用层面，深入到原理层面
• JS相关原理
• Vue、React等框架的原理

注意事项

• 技术深度，有 1-2方面即可。深，就不能广

[tiantingrui]

1. JS内存泄露如何检测？场景有哪些？

垃圾回收GC

Garbage collection

什么是垃圾回收？

JS垃圾回收用什么算法

1. 引用计数（之前，ie6-7）
   1. 缺陷：循环引用
2. 标记清除（现代）

【追问】JS闭包是内存泄露吗？

闭包是符合我们的预期内存使用，不算内存泄露，仅仅只是内部的数据不可以被垃圾回收！

JS内存泄露如何检测？

利用谷歌浏览器的 performance memory

• 泄露就是内存一直再上升

• 不泄露就是上升后会下降

内存泄露的场景（vue为例）

• 被全局变量、函数引用、组件销毁时未清除
• 被全局事件、定时器引用、组件销毁时未清除
• 被自定义事件引用，组件销毁时未清除

【扩展】WeakMap WeakSet

弱引用，不会影响垃圾回收

WeakMap 的 key 只能是引用类型，不能是字符串

[tiantingrui]

2. 浏览器和 nodejs事件循环

单线程和异步

• JS是单线程的（无论是浏览器还是nodejs）
• 浏览器中JS执行和DOM渲染共用一个线程
• 异步

宏任务和微任务

• 宏任务，settimeout setInterval 网络请求
• 微任务，promise async/await
• 微任务在下一轮DOM渲染之前执行，宏任务在之后执行

const p = document.createElement('p')
p.innerHtml = '111'
document.body.appendChild(p)
const list = document.getElementsByTagName('p')
console.log('length --', list.length)

console.log('start')
setTimeout(() => {
  const list = document.getElementsByTagName('p')
    console.log('length on timeout --', list.length)
  alert('阻塞 timeout')
})
Promise.resolve().then(() => {
  const list = document.getElementsByTagName('p')
    console.log('length on promise then --', list.length)
  alert('阻塞 timeout')
})

console.log('end')

Nodejs 异步

• Nodejs同样使用ES语法，也是单线程，也需要异步
• 异步任务也分：宏任务和微任务
• 但是，它的宏任务和微任务，分不同类型，有不同优先级

console.log('start')

setImmediate(() => {
  console.log('setImmediate')
})

setTimeout(() => {
  console.log('timeout')
})

Promise.resolve().then(() => {
  console.log('promise then')
})

process.nextTick(() => {
  console.log('nextTick')
})

console.log('end')

// start end  nextTick promise then timeout  setImmediate

nodejs 宏任务类型和优先级

• Timers - setTimeout setInterval
• I/O callbacks - 处理网络、流、TCP的错误处理
• Idle,prepare - 闲置状态（nodejs 内部使用）
• Poll 轮询 - 执行 poll 中的I/O队列
• Check 检查 - 存储setImmediate 回调
• Close callbacks - 关闭回调，如socket.on('close')

nodejs 微任务类型和优先级

• 包括： promise , async/await ，process.nextTock
• 注意，process.nextTock 优先级最高

nodejs event loop

1. 执行同步代码
2. 执行微任务（process.nextTock 优先级最高）
3. 按顺序执行6个类型的宏任务（每个结束时都执行当前的微任务）

总结

浏览器和node的eventloop流程基本相同，而nodejs宏任务和微任务分类型，有优先级

注意事项

• 推荐使用 setImmediate 代替 process.nextTick（node 低版本可能有所不同）

[tiantingrui]

3. 虚拟DOM真的很快么

vdom

• virtual DOM , 虚拟DOM
• 用JS对象模拟 DOM节点数据
• 由React 最先推广使用

Vue React 等框架的价值

• 组件化
• 数据视图分离，数据驱动视图 - 这是核心
• 只关注业务数据，而不用关注DOM变化

数据驱动视图，技术方案 - vdom

diff算法 vnode oldVnode (vdom)

注意

1. vdom并不快，JS直接操作DOM才是最快的
2. 但 “数据驱动视图“ 要有合适的技术方案，不能全部DOM重建
3. vdom就是目前最合适的技术方案（并不是因为它快，而是合适）

扩展：svelte 就没用 vdom