转载链接：🔥 连八股文都不懂还指望在前端混下去么 - 掘金 (juejin.cn)

1. HTTP 和 HTTPS

1.http 和 https 的基本概念

2.http 和 https 的区别及优缺点？

• http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。

• http 协议的默认端口为 80，https 的默认端口为 443。

• http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。

• https 缓存不如 http 高效，会增加数据开销。

• Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。

• SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。

3.https 协议的工作原理

1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。

2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。

3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。

4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

5. web 服务器通过自己的私钥解密出会话密钥。

6. web 服务器通过会话密钥加密与客户端之间的通信。

TCP三次握手

1. 第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。

2. 第二次握手：服务器收到syn包并确认客户的SYN（ack=j+1），同时也发送一个自己的SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

3. 第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

TCP 四次挥手

1. 客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。

TCP/IP / 如何保证数据包传输的有序可靠？

TCP和UDP的区别

1. TCP是面向链接的，而UDP是面向无连接的。

2. TCP仅支持单播传输，UDP 提供了单播，多播，广播的功能。

3. TCP的三次握手保证了连接的可靠性; UDP是无连接的、不可靠的一种数据传输协议，首先不可靠性体现在无连接上，通信都不需要建立连接，对接收到的数据也不发送确认信号，发送端不知道数据是否会正确接收。

4. UDP的头部开销比TCP的更小，数据传输速率更高，实时性更好。

HTTP 请求跨域问题

跨域的原理
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。 同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。 跨域原理，即是通过各种方式，避开浏览器的安全限制。

解决方案
最初做项目的时候，使用的是jsonp，但存在一些问题，使用get请求不安全，携带数据较小，后来也用过iframe，但只有主域相同才行，也是存在些问题，后来通过了解和学习发现使用代理和proxy代理配合起来使用比较方便，就引导后台按这种方式做下服务器配置，在开发中使用proxy，在服务器上使用nginx代理，这样开发过程中彼此都方便，效率也高；现在h5新特性还有 windows.postMessage()
JSONP： ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。
步骤：
1. 去创建一个script标签
2. script的src属性设置接口地址
3. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
4. 通过定义函数名去接受返回的数据
JSONP 的缺点: JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。
document.domain 基础域名相同 子域名不同
window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
CORS CORS(Cross-origin resource sharing)跨域资源共享 服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
proxy代理 目前常用方式,通过服务器设置代理
window.postMessage() 利用h5新特性window.postMessage()

Cookie、sessionStorage、localStorage 的区别

• 存储在客户端

• cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+

• cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除

• cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

粘包问题分析与对策

浏览器

从输入URL到页面加载的全过程

首先在浏览器中输入URL

查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
• 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
• 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)；
• 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
• ISP缓存：若上述均失败，继续向ISP搜索。

DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。

建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接

发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器

服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

关闭TCP连接：通过四次挥手释放TCP连接

浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：
• 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
• 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
• 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
• 布局（Layout）：计算出每个节点在屏幕中的位置
• 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

JS引擎解析过程：调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
• 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
• 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
• 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为'undefined'；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
• 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

浏览器重绘与重排的区别？

• 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

• 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

如何触发重排和重绘？

• 添加、删除、更新DOM节点

• 通过display: none隐藏一个DOM节点-触发重排和重绘

• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

• 移动或者给页面中的DOM节点添加动画

• 添加一个样式表，调整样式属性

• 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

集中改变样式，不要一条一条地修改 DOM 的样式。

不要把 DOM 结点的属性值放在循环里当成循环里的变量。

为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

尽量只修改position：absolute或fixed元素，对其他元素影响不大

动画开始GPU加速，translate使用3D变化

提升为合成层
将元素提升为合成层有以下优点：
• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint
提升合成层的最好方式是使用 CSS 的 will-change 属性：

介绍下304过程

• a. 浏览器请求资源时首先命中资源的Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，可以通过Cache-control: max-age指定最大生命周期，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。

• b. 强缓存失效，进入协商缓存阶段，首先验证ETagETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据客户端上送的If-None-Match值来判断是否命中缓存。

• c. 协商缓存Last-Modify/If-Modify-Since阶段，客户端第一次请求资源时，服务服返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间。再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

浏览器的缓存机制 强制缓存 && 协商缓存

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识

• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

强制缓存
强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是 Expires 和 Cache-Control，其中Cache-Control优先级比Expires高。
强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：
1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）。
2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存。
3. 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。协商缓存主要有以下两种情况：
1. 协商缓存生效，返回304
2. 协商缓存失效，返回200和请求结果结果

说下进程、线程和协程

HTML && CSS

HTML5 新特性、语义化

概念：
HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

语义化标签：
header nav main article section aside footer

语义化的优点:
• 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
• 代码结构清晰，易于阅读，
• 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

CSS 选择器及优先级

• id选择器(#myid)

• 类选择器(.myclass)

• 属性选择器(a[rel="external"])

• 伪类选择器(a:hover, li:nth-child)

• 标签选择器(div, h1,p)

• 相邻选择器（h1 + p）

• 子选择器(ul > li)

• 后代选择器(li a)

• 通配符选择器(*)

• !important

• 内联样式（1000）

• ID选择器（0100）

• 类选择器/属性选择器/伪类选择器（0010）

• 元素选择器/伪元素选择器（0001）

• 关系选择器/通配符选择器（0000）

position 属性的值有哪些及其区别

box-sizing属性

CSS 盒子模型

BFC（块级格式上下文）

• 内部的Box会在垂直方向，一个接一个地放置

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反

• BFC的区域不会与float box重叠

• BFC是一个独立容器，容器里面的子元素不会影响到外面的元素

• 计算BFC的高度时，浮动元素也参与计算高度

• 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

• 根元素，即HTML元素

• float的值不为none

• position为absolute或fixed

• display的值为inline-block、table-cell、table-caption

• overflow的值不为visible

• 去除边距重叠现象

• 清除浮动（让父元素的高度包含子浮动元素）

• 避免某元素被浮动元素覆盖

• 避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平垂直居中

水平居中
对于 行内元素 : text-align: center;
对于确定宽度的块级元素：
（1）width和margin实现。margin: 0 auto;
（2）绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
对于宽度未知的块级元素
（1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
（2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
（3）绝对定位+transform，translateX可以移动本身元素的50%。
（4）flex布局使用justify-content:center

垂直居中
1. 利用 line-height 实现居中，这种方法适合纯文字类
2. 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

隐藏页面中某个元素的方法

用CSS实现三角符号

页面布局

1.Flex 布局

• flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;

• flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow： .box { flex-flow: || ; }

• justify-content：对其方式，水平主轴对齐方式

• align-items：对齐方式，竖直轴线方向

• align-content

• order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

• flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

• flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小

• flex-basis 属性：定义了在分配多余的空间，项目占据的空间。

• flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

• align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖

• align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

2.Rem 布局

3.百分比布局

4.浮动布局

如何使用rem或viewport进行移动端适配

• 优点：没有破坏完美视口

• 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

• 在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设

• 缺点破坏完美视口

清除浮动的方式

• 添加额外标签

• 父级添加overflow属性，或者设置高度

• 建立伪类选择器清除浮动

JS、TS、ES6

JS中的8种数据类型及区别

JS中的数据类型检测方案

1.typeof

2.instanceof

3.Object.prototype.toString.call()

var && let && const

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。 const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，且不能修改。

2. var可以先使用，后声明，因为存在变量提升；let必须先声明后使用。

3. var是允许在相同作用域内重复声明同一个变量的，而let与const不允许这一现象。

4. 在全局上下文中，基于let声明的全局变量和全局对象GO（window）没有任何关系 ; var声明的变量会和GO有映射关系；

5. 会产生暂时性死区：

1. let /const/function会把当前所在的大括号(除函数之外)作为一个全新的块级上下文，应用这个机制，在开发项目的时候，遇到循环事件绑定等类似的需求，无需再自己构建闭包来存储，只要基于let的块作用特征即可解决

JS垃圾回收机制

项目中，如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。当某些代码操作不能被合理释放，就会造成内存泄漏。我们尽可能减少使用闭包，因为它会消耗内存。

浏览器垃圾回收机制/内存回收机制:
标记清除:在js中，最常用的垃圾回收机制是标记清除：当变量进入执行环境时，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收它们所占用的内存空间。 谷歌浏览器：“查找引用”，浏览器不定时去查找当前内存的引用，如果没有被占用了，浏览器会回收它；如果被占用，就不能回收。 IE浏览器：“引用计数法”，当前内存被占用一次，计数累加1次，移除占用就减1，减到0时，浏览器就回收它。

优化手段：内存优化 ; 手动释放：取消内存的占用即可。
（1）堆内存：fn = null 【null：空指针对象】
（2）栈内存：把上下文中，被外部占用的堆的占用取消即可。

内存泄漏
在 JS 中，常见的内存泄露主要有 4 种,全局变量、闭包、DOM 元素的引用、定时器

作用域和作用域链

闭包的两大作用：保存/保护

闭包的概念
函数执行时形成的私有上下文EC(FN)，正常情况下，代码执行完会出栈后释放;但是特殊情况下，如果当前私有上下文中的某个东西被上下文以外的事物占用了，则上下文不会出栈释放，从而形成不销毁的上下文。 函数执行函数执行过程中，会形成一个全新的私有上下文，可能会被释放，可能不会被释放，不论释放与否，他的作用是：

闭包的特性：
1、内部函数可以访问定义他们外部函数的参数和变量。(作用域链的向上查找，把外围的作用域中的变量值存储在内存中而不是在函数调用完毕后销毁)设计私有的方法和变量，避免全局变量的污染。
1.1.闭包是密闭的容器，，类似于set、map容器，存储数据的
1.2.闭包是一个对象，存放数据的格式为 key-value 形式
2、函数嵌套函数
3、本质是将函数内部和外部连接起来。优点是可以读取函数内部的变量，让这些变量的值始终保存在内存中，不会在函数被调用之后自动清除

闭包形成的条件：
1. 函数的嵌套
2. 内部函数引用外部函数的局部变量，延长外部函数的变量生命周期

闭包的用途：
1. 模仿块级作用域
2. 保护外部函数的变量 能够访问函数定义时所在的词法作用域(阻止其被回收)
3. 封装私有化变量
4. 创建模块

闭包应用场景
闭包的两个场景，闭包的两大作用：保存/保护。 在开发中, 其实我们随处可见闭包的身影, 大部分前端JavaScript 代码都是“事件驱动”的,即一个事件绑定的回调方法; 发送ajax请求成功|失败的回调;setTimeout的延时回调;或者一个函数内部返回另一个匿名函数,这些都是闭包的应用。

闭包的优点：延长局部变量的生命周期

闭包缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏

JS 中 this 的五种情况

1. 作为普通函数执行时，this指向window。

2. 当函数作为对象的方法被调用时，this就会指向该对象。

3. 构造器调用，this指向返回的这个对象。

4. 箭头函数 箭头函数的this绑定看的是this所在函数定义在哪个对象下，就绑定哪个对象。如果有嵌套的情况，则this绑定到最近的一层对象上。

5. 基于Function.prototype上的 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply接收参数的是数组，call接受参数列表，`` bind方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this指向除了使用new `时会被改变，其他情况下都不会改变。若为空默认是指向全局对象window。

原型 && 原型链

• 每个 class都有显示原型 prototype

• 每个实例都有隐式原型 _ proto_

• 实例的_ proto_指向对应 class 的 prototype

new运算符的实现机制

1. 首先创建了一个新的空对象

2. 设置原型，将对象的原型设置为函数的prototype对象。

3. 让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）

4. 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

EventLoop 事件循环

浏览器中的事件环（Event Loop)

eventLoop 是由JS的宿主环境（浏览器）来实现的；

事件循环可以简单的描述为以下四个步骤:
1. 函数入栈，当Stack中执行到异步任务的时候，就将他丢给WebAPIs,接着执行同步任务,直到Stack为空；
2. 此期间WebAPIs完成这个事件，把回调函数放入队列中等待执行（微任务放到微任务队列，宏任务放到宏任务队列）
3. 执行栈为空时，Event Loop把微任务队列执行清空；
4. 微任务队列清空后，进入宏任务队列，取队列的第一项任务放入Stack(栈）中执行，执行完成后，查看微任务队列是否有任务，有的话，清空微任务队列。重复4，继续从宏任务中取任务执行，执行完成之后，继续清空微任务，如此反复循环，直至清空所有的任务。

浏览器中的任务源(task):
• 宏任务(macrotask)： 宿主环境提供的，比如浏览器 ajax、setTimeout、setInterval、setTmmediate(只兼容ie)、script、requestAnimationFrame、messageChannel、UI渲染、一些浏览器api
• 微任务(microtask)： 语言本身提供的，比如promise.then then、queueMicrotask(基于then)、mutationObserver(浏览器提供)、messageChannel 、mutationObersve

Node 环境中的事件环（Event Loop)

• timers: 计时器，执行setTimeout和setInterval的回调

• pending callbacks: 执行延迟到下一个循环迭代的 I/O 回调

• idle, prepare: 队列的移动，仅系统内部使用

• poll轮询: 检索新的 I/O 事件;执行与 I/O 相关的回调。事实上除了其他几个阶段处理的事情，其他几乎所有的异步都在这个阶段处理。

• check: 执行setImmediate回调，setImmediate在这里执行

• close callbacks: 执行close事件的callback，一些关闭的回调函数，如：socket.on('close', ...)

setTimeout、Promise、Async/Await 的区别

setTimeout
settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行。

Promise
Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行。

async/await
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

Async/Await 如何通过同步的方式实现异步

介绍节流防抖原理、区别以及应用

简述MVVM

Vue底层实现原理

1. 在自身实例化时往属性订阅器(dep)里面添加自己

2. 自身必须有一个update()方法

3. 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

谈谈对vue生命周期的理解？

• create阶段：vue实例被创建 beforeCreate: 创建前，此时data和methods中的数据都还没有初始化 created： 创建完毕，data中有值，未挂载

• mount阶段： vue实例被挂载到真实DOM节点 beforeMount：可以发起服务端请求，去数据 mounted: 此时可以操作DOM

• update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染 beforeUpdate :更新前 updated：更新后

• destroy阶段：vue实例被销毁 beforeDestroy：实例被销毁前，此时可以手动销毁一些方法 destroyed:销毁后

组件生命周期

computed与watch

组件中的data为什么是一个函数？

为什么v-for和v-if不建议用在一起

React/Vue 项目中 key 的作用

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，更高效的更新虚拟DOM;
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。

为了在数据变化时强制更新组件，以避免“就地复用”带来的副作用。
当 Vue.js 用 v-for 更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。重复的key会造成渲染错误。

vue组件的通信方式

props/$emit 父子组件通信
父->子props，子->父 $on、$emit 获取父子组件实例 parent、children Ref 获取实例的方式调用组件的属性或者方法 父->子孙 Provide、inject 官方不推荐使用，但是写组件库时很常用

$emit/$on 自定义事件 兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 自定义事件

vuex 跨级组件通信
Vuex、$attrs、$listeners Provide、inject

nextTick的实现

1. nextTick是Vue提供的一个全局API,是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM；

2. Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启1个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中-次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用；

3. 比如，我在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行dom操作即可；

4. 我也有简单了解nextTick实现，它会在callbacks里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是Promise。这让我明白了为什么可以在nextTick中看到dom操作结果。

nextTick的实现原理是什么？

使用过插槽么？用的是具名插槽还是匿名插槽或作用域插槽

keep-alive的实现

mixin

Vuex的理解及使用场景

1. Vuex 的状态存储是响应式的；当 Vue 组件从 store 中读取状态的时候，

1. State：定义了应用的状态数据

2. Getter：在 store 中定义“getter”（可以认为是 store 的计算属性），

hooks用过吗？聊聊react中class组件和函数组件的区别

1. useState() //状态钩子

2. useContext() //共享状态钩子

3. useReducer() //action 钩子

4. useEffect() //副作用钩子

1.useCallback 记忆函数 一般把函数式组件理解为class组件render函数的语法糖，所以每次重新渲染的时候，函数式组件内部所有的代码都会重新执行一遍。而有了 useCallback 就不一样了，你可以通过 useCallback 获得一个记忆后的函数。
第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。

2.useMemo 记忆组件 useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。 唯一的区别是：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。 所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算得到一个确定的值，比如记忆组件。

3.useRef 保存引用值
useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用。useRef 返回的值传递给组件或者 DOM 的 ref 属性，就可以通过 ref.current 值访问组件或真实的 DOM 节点，重点是组件也是可以访问到的，从而可以对 DOM 进行一些操作，比如监听事件等等。

4.useImperativeHandle 穿透 Ref
通过 useImperativeHandle 用于让父组件获取子组件内的索引

5.useLayoutEffect 同步执行副作用
大部分情况下，使用 useEffect 就可以帮我们处理组件的副作用，但是如果想要同步调用一些副作用，比如对 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用会在 DOM 更新之后同步执行。
useEffect和useLayoutEffect有什么区别：简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount&componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。官方建议优先使用useEffect

React 组件通信方式

1. 父组件向子组件通信

1. 子组件向父组件通信

1. 跨级组件通信

1. 非嵌套关系的组件通信

1）父组件向子组件通信

2）子组件向父组件通信

3）跨级组件通信

• 使用props，利用中间组件层层传递,但是如果父组件结构较深，那么中间每一层组件都要去传递props，增加了复杂度，并且这些props并不是中间组件自己需要的。

• 使用context，context相当于一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深，都可以随意取用，对于跨越多层的全局数据可以使用context实现。

4）非嵌套关系的组件通信

1. 可以使用自定义事件通信（发布订阅模式），使用pubsub-js

1. 可以通过redux等进行全局状态管理

1. 如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。

1. 也可以new一个 Vue 的 EventBus,进行事件监听，一边执行监听，一边执行新增 VUE的eventBus 就是发布订阅模式，是可以在React中使用的;

setState 既存在异步情况也存在同步情况

生命周期

说一下 react-fiber

1）背景

2）实现原理

react内部运转分三层：
• Virtual DOM 层，描述页面长什么样。
• Reconciler 层，负责调用组件生命周期方法，进行 Diff 运算等。
• Renderer 层，根据不同的平台，渲染出相应的页面，比较常见的是 ReactDOM 和 ReactNative。

为了实现不卡顿，就需要有一个调度器 (Scheduler) 来进行任务分配。优先级高的任务（如键盘输入）可以打断优先级低的任务（如Diff）的执行，从而更快的生效。任务的优先级有六种：
• synchronous，与之前的Stack Reconciler操作一样，同步执行
• task，在next tick之前执行
• animation，下一帧之前执行
• high，在不久的将来立即执行
• low，稍微延迟执行也没关系
• offscreen，下一次render时或scroll时才执行

Fiber Reconciler（react ）执行过程分为2个阶段：
• 阶段一，生成 Fiber 树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。阶段一可被打断的特性，让优先级更高的任务先执行，从框架层面大大降低了页面掉帧的概率。
• 阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断。

Fiber树：React 在 render 第一次渲染时，会通过 React.createElement 创建一颗 Element 树，可以称之为 Virtual DOM Tree，由于要记录上下文信息，加入了 Fiber，每一个 Element 会对应一个 Fiber Node，将 Fiber Node 链接起来的结构成为 Fiber Tree。Fiber Tree 一个重要的特点是链表结构，将递归遍历编程循环遍历，然后配合 requestIdleCallback API, 实现任务拆分、中断与恢复。

Portals

何时要使用异步组件？如和使用异步组件

• 加载大组件的时候

• 路由异步加载的时候

React 事件绑定原理

webpack

webpack 做过哪些优化，开发效率方面、打包策略方面等等

• 使用高版本的 Webpack （使用webpack4）

• 多线程/多实例构建：HappyPack(不维护了)、thread-loader

• 缩小打包作用域：
• exclude/include (确定 loader 规则范围)
• resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
• resolve.extensions 尽可能减少后缀尝试的可能性
• noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
• IgnorePlugin (完全排除模块)
• 合理使用alias

• 充分利用缓存提升二次构建速度：
• babel-loader 开启缓存
• terser-webpack-plugin 开启缓存
• 使用 cache-loader 或者 hard-source-webpack-plugin 注意：thread-loader 和 cache-loader 兩個要一起使用的話，請先放 cache-loader 接著是 thread-loader 最後才是 heavy-loader

• DLL：
• 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。 2）使用webpack4-优化原因

• (a)V8带来的优化（for of替代forEach、Map和Set替代Object、includes替代indexOf）

• (b)默认使用更快的md4 hash算法

• (c)webpacks AST可以直接从loader传递给AST，减少解析时间

• (d)使用字符串方法替代正则表达式 ①noParse

• 不去解析某个库内部的依赖关系

• 比如jquery 这个库是独立的， 则不去解析这个库内部依赖的其他的东西

• 在独立库的时候可以使用

• 忽略掉某些内容 不去解析依赖库内部引用的某些内容

• 从moment中引用 ./locol 则忽略掉

• 如果要用local的话 则必须在项目中必须手动引入

• 不会多次打包， 优化打包时间

• 先把依赖的不变的库打包

• 生成 manifest.json文件

• 然后在webpack.config中引入

• webpack.DllPlugin Webpack.DllReferencePlugin ④happypack -> thread-loader

• 大项目的时候开启多线程打包

• 影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。 ⑤thread-loader thread-loader 会将您的 loader 放置在一个 worker 池里面运行，以达到多线程构建。 把这个 loader 放置在其他 loader 之前（如下图 example 的位置）， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。

• 不推荐使用 webpack-paralle-uglify-plugin，项目基本处于没人维护的阶段，issue 没人处理，pr没人合并。 Webpack 4.0以前：uglifyjs-webpack-plugin，parallel参数

• 推荐使用 terser-webpack-plugin

• 压缩代码

• 提取页面公共资源：

• Tree shaking

• Scope hoisting

• 图片压缩

• 动态Polyfill 3）speed-measure-webpack-plugin 简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。 开发阶段

Babel

简单描述一下 Babel 的编译过程

1. 解析（Parse） ：将源代码转换成更加抽象的表示方法（例如抽象语法树）。包括词法分析和语法分析。词法分析主要把字符流源代码（Char Stream）转换成令牌流（ Token Stream），语法分析主要是将令牌流转换成抽象语法树（Abstract Syntax Tree，AST）。

2. 转换（Transform） ：通过 Babel 的插件能力，对（抽象语法树）做一些特殊处理，将高版本语法的 AST 转换成支持低版本语法的 AST。让它符合编译器的期望，当然在此过程中也可以对 AST 的 Node 节点进行优化操作，比如添加、更新以及移除节点等。

3. 生成（Generate） ：将 AST 转换成字符串形式的低版本代码，同时也能创建 Source Map 映射。

Git

Git 常用命令

如何使用Git管理项目

功能分支 功能分支（或有时称为主题分支）用于为即将发布或遥远的未来版本开发新功能。在开始开发某个功能时，将包含该功能的目标版本在那时很可能是未知的。功能分支的本质在于，只要该功能处于开发阶段，它就存在，但最终会被合并回develop（明确将新功能添加到即将发布的版本中）或丢弃。功能分支通常只存在于开发者仓库中，而不存在于origin。

发布分支 发布分支支持准备新的生产版本。它们允许在最后一刻打点 i 和交叉 t。此外，它们允许修复小错误并为发布准备元数据（版本号、构建日期等）。通过在发布分支上完成所有这些工作，该develop 分支被清除以接收下一个大版本的功能。
• 从develop分支拉取，且必须合并回 develop 和 master
• 分支命名约定：release-*

修补程序分支
Hotfix 分支与发布分支非常相似，因为它们也旨在为新的生产版本做准备，尽管是计划外的。它们产生于需要立即对现场制作版本的不良状态采取行动。当必须立即解决生产版本中的关键错误时，可以从标记生产版本的主分支上的相应标记中分支出一个修补程序分支。

项目优化