各方收集的前端知识点，未完善。

1.js为什么是单线程

答：主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。（更多是和历史原因也应该有关系）

2.Web Worker 使用场景

答：1.解决页面卡死问题。2.发挥多核CPU的优势，提高js性能。

答：1.如果是很消耗主线程性能的程序。可以考虑使用Web Worker。可以防止页面卡死情况。

答：让js多线程，然而，使用web worker技术开的多线程有着诸多限制，例如：所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。另外，这些子线程并没有执行I/O操作的权限，只能为主线程分担一些诸如计算等任务。所以严格来讲这些线程并没有完整的功能，也因此这项技术并非改变了javascript语言的单线程本质。

3.一句话总结Web worker，Service worker和worklet

Worklet 是浏览器渲染流中的钩子，可以让我们有浏览器渲染线程中底层的权限，比如样式和布局。

Service worker 是浏览器和网络间的代理。通过拦截文档中发出的请求，service worker 可以直接请求缓存中的数据，达到离线运行的目的。

Web worker 是通常目的是让我们减轻主线程中的密集处理工作的脚本。

4.事件循环、EventLoop

答：在执行栈中遇到异步任务时，js会将这个事件加入事件队列，被放入事件队列不会立刻执行其回调，等待当前执行栈中的所有任务都执行完毕，取出事件队列第一个执行回调同步代码...。如此循环。

4.1宏任务与微任务

以下事件属于宏任务：

• setInterval()
• setTimeout()

以下事件属于微任务

• new Promise()
• new MutaionObserver()监视对 DOM 并执行回调

放入任务队列中的任务分为：宏任务队列和微任务队列。当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

5.JavaScript、Node.js与V8的关系

答：Node.js在服务器中使用，对GoogleV8引擎（应用于Google Chrome浏览器)进行了封装，使js在服务器执行

6.强缓存和协商缓存

浏览器先检查强缓存检查它的 cache-control 是否过期,

Cache-Control是什么？

• 存在于响应头Response Headers中；
• 控制强制缓存的逻辑；
• 例如：Cache-Control: max-age = 31536000（单位是秒）。

如果强缓存过期了，则命中协商缓存，协商缓存有时间戳和字符串两种：

request head： If-Modified-Since / If-None-Match

response head： Last-Modified / Etag

7.http和https区别

主要看下tcp的三次握手四次挥手，ssl/tls的加密过程

http可以使用udp协议 不一定都是tcp（知道）

8.观察者模式与发布订阅模式

观察者模式：使用需要引入目标者和目标者，

发布订阅模式：订阅和发布是解耦的，可自定义触发对应的发布事件

区别点

发布订阅模式更灵活，是进阶版的观察者模式，指定对应分发。

1. 观察者模式维护单一事件对应多个依赖该事件的对象关系；
2. 发布订阅维护多个事件（主题）及依赖各事件（主题）的对象之间的关系；
3. 观察者模式是目标对象直接触发通知（全部通知），观察对象被迫接收通知。发布订阅模式多了个中间层（事件中心），由其去管理通知广播（只通知订阅对应事件的对象）；
4. 观察者模式对象间依赖关系较强，发布订阅模式中对象之间实现真正的解耦。

9.ES6全方位总结

1. const let
2. 模板字面量
3. 箭头函数

4. 参数默认值

   function fun(params=1){}

5. spread/rest操作符

   let a = [1,2,3,4]
   
   function fun1(a){
   log(a)
   }
   fun1(...a)
   //[1,2,3,4]
   
   function fun2(...a){
       log(a)
   }
   fun2(1,2,3,4)//[1,2,3,4]

6. 28进制

   1. 0b 2 进制
   2. 0o 8 进制
7. 对象超类 可以在对象中使用super
8. For...of for...in
9. class
10. symbol
11. Map Set
12. 对象数组结构

10.React核心原理浅析

1. JSX与虚拟DOM

   1. 虚拟DOM是什么? 为何要使用虚拟DOM?
   2. 如何将JSX转换成虚拟DOM?
   3. 如何将虚拟DOM渲染出来?

2. React Diffing（O(n**3)=>O(n)）

   1. 不同类型(即标签名、组件名)的元素会产生不同的树;
   2. 通过设置 key 属性来标识一组同级子元素在渲染前后是否保持不变.

解决阻塞问题

​ 时间切片：

• 可暂停、可恢复的更新;
• 可跳过的重复性、覆盖性更新;
• 具备优先级的更新.

10.箭头函数普通函数区别

1. this指向，call,apply,bind无法改变其指向
2. 没有自己的arguments
3. 无法作为构建函数，没有自己的prototype