1. vue组件为什么只能有一个根元素？
这是因为Vue组件的渲染是通过模板编译来实现的，模板编译器需要将模板编译成一个render函数，这个函数需要返回一个虚拟DOM树。而虚拟DOM树是通过一个根节点来包裹所有子元素的, 如果一个组件有多个根元素，那么在编译模板时，Vue就无法确定哪个元素应该作为根节点，这会导致编译错误, 而且querySelector只会返回第一个匹配的dom元素，因此就算你写了两个顶层元素也默认只会选择第一个dom作为入口
在 Vue3版本中，一个 Vue 实例不再需要一个单一的根元素，而是将多个根元素封装在一个特殊的组件中，这个组件被称为 Fragment。使用 Fragment 可以在一个组件中包含多个根元素，而不需要额外添加不必要的包裹元素。
2. render函数封装有什么特别的，或者用到比较巧妙的东西吗？
3. 浏览器缓存的方式有哪些？
- 强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。
- 协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程 返回304
区别:
强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。 大部分web服务器都默认开启协商缓存。
刷新对于强缓存和协商缓存的影响
1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。
2. 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。
3. 浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）
4. 正向代理和反向代理的区别？
正向代理
由客户端发送对目标服务器的请求，代理服务器在中间将请求转发给该目标服务器，目标服务器将结果返回给代理服务器，代理服务器再将结果返回给客户端。使用正向代理时，客户端是需要配置代理服务的地址、端口、账号密码（如有）等才可使用的
反向代理
服务器根据客户端的请求，从其关系的一组或多组后端服务器（如Web服务器）上获取资源，然后再将这些资源返回给客户端，客户端只会得知代理服务器的IP地址，而不知道在代理服务器后面的服务器集群的存在。
正向代理是代理客户端 反向代理是代理服务器。
5、域名解析过程是怎样的？
浏览器通过域名发起一个网络请求的时候, 会有DNS服务器将域名解析成ip地址
1. 浏览器缓存检查中有没有域名对应的ip地址，
2.那么就检查操作系统的本机hosts文件
3.本地区DNS域名服务器（LDNS）发起请求
4.如果LDNS也不能解析，那么就直接到根域名服务器请求解析。
5. 根域名服务器会给本地域名服务器LDNS一个所**查询的主域名服务器（gTLD）**地址，gTLD是国际顶级域名服务器，比如.com,.cn,.org等。
6. gLTD服务器查询并返回域名对应的Name Server域名服务器的地址，通常是你注册的域名服务器，例如你在某个域名服务器提供商申请的域名，那么这个域名解析任务就由这个域名服务提供商来完成。
7.Name Server域名服务器会查询存储的域名和ip的映射关系表，将ip连同一个TTL值返回给DNS Server域名服务器。
8.把解析的结果返回给用户，用户根据TTL值缓存在本地系统缓存中，域名解析过程结束。
6、TCP协议三次握手、四次挥手的过程，为什么挥手要4次？
三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实质上其实就是连接服务器指定端口，建立TCP连接，并同步连接双方的序列号和确认号，交换TCP窗口大小信息。
刚开始客户端处于 Closed 的状态，服务端处于 Listen 状态。 进行三次握手：
第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN(c)。此时客户端处于 SYN_SEND 状态。
第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN(s)。同时会把客户端的 ISN + 1 作为ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_RCVD 的状态。
第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方已建立起了连接。
6.1为什么需要三次握手，两次不行吗？
两次握手, 服务器并不能确认客户端的接收能力是否正常。三次握手的主要目的是确认自己和对方的发送和接收都是正常的，
6.2 什么是半连接队列？
服务器第一次收到客户端的 SYN 之后，就会处于 SYN_RCVD 状态，此时双方还没有完全建立其连接，服务器会把此种状态下请求连接放在一个队列里，我们把这种队列称之为半连接队列。
当然还有一个全连接队列，就是已经完成三次握手，建立起连接的就会放在全连接队列中。如果队列满了就有可能会出现丢包现象。
6.3 三次握手过程中可以携带数据吗？
第一次、第二次握手不可以携带数据
6.4 SYN攻击是什么？
检测 SYN 攻击非常的方便，当你在服务器上看到大量的半连接状态时，特别是源IP地址是随机的，基本上可以断定这是一次SYN攻击。
- 缩短超时（SYN Timeout）时间
- 过滤网关防护
6.5 XSS攻击 跨站脚本攻击
反射型（非持久型）XSS、把用户输入的数据 “反射” 给浏览器
存储型（持久型）XSS、存储型 XSS 会把用户输入的数据 "存储" 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。
DOM型XSS、通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。
通用型XSS、突变型XSS。
攻击的防范
1. 对于用户的任何输入(用户输入, URL参数,POST请求参数)要进行检查、过滤和转义,，如果输入带 script 标签的内容，会直接过滤掉,
2. 服务端的输出也会存在问题, 除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击。
3. cookie设置http-only, 不允许通过js脚本读取cooike
6.6 CSRF 跨站请求伪造
和xss不同的是，CSRF攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
攻击的防范
1. 尽量使用post
2. 加入验证码
3. 验证Referer
6.7 四次挥手
建立一个连接需要三次握手，而终止一个连接要经过四次挥手（也有将四次挥手叫做四次握手的）。这由TCP的半关闭（half-close）造成的。所谓的半关闭，其实就是TCP提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力。
因为建立一旦连接，双方既是发送方，又是接收方，为了保证在最后断开的时候，客户端发送的最后一个ACK报文段能够被服务器接收到。如果客户端在收到服务器给它的断开连接的请求之后，回应完服务器就直接断开连接的话，服务器就会因为一直没得到客户端响应而一直等待，所以客户端要等待两个最长报文段寿命的时间，以便于服务器没有收到请求之后重新发送请求。
7.你基于你的脚手架做了哪些优化？
1. 利用vue.config.js修改webpack的默认配置（自定义入口文件）利用chainWebpack配置不同环境设置不同的入口文件（在vue.config.js中写以下代码）
2. 路由懒加载（路由按需加载）
我们可以通过路由懒加载来进一步优化我们的项目，当匹配某个路由时才去加载对应的资源文件。如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
3.通过cdn加载外部资源 通过import导入包的方式，最终都会打包到同一个js文件中，所以导致文件体积过大，所以我们可以配置需要排出的包, 不进行打包
8. less和sass区别
1.两者之间的区别
编译环境： Sass是在服务端上面处理的，之前是Ruby,现在是Dart-Sass或者是Node-Sass，但是Less在编译时，需要引入less.js来处理Less代码输出CSS到浏览器上，也可以在开发服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址。
变量符 Less是@，而Sass是$,示例代码如下
//Less-变量定义
@color: #008c8c;
#footer {
border: 1px solid @color;
}
//scss-变量定义
$color: #008c8c;
#footer {
border: 1px solid $color;
}
2.3 输出设置 Less没有输出设置，而Sass有4种输出选项，如下 nested：嵌套缩进的css代码 expanded：展开的多行css代码 compact：简洁格式的css代码 compressed：压缩后的css代码
2.4 Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持，其中if(){}else{}示例代码如下
3.总体优点 3.1 提供CSS缺失的样式层复用机制 3.2 减少冗余代码 3.3 提高样式代码的可维护性 3.4 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异 3.5 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。
9. 路由懒加载
一开始进入页面时不需要一次性把资源都加载完，需要时再加载对应的资源
路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候，才会加载对应组件的代码块。
vue实现路由懒加载的三种方式：
- Vue异步组件
- ES6的import()
- webpack的require.ensure()
10 单页面应用
11.首屏加载优化
1. 资源压缩- 体积优化
打包分析,去除一些没必要的引入, 一些组件库或者插件库按需引入, 压缩图片,优化SVG图片
2. 传输优化
路由懒加载, 托管至OSS + CDN加速, 开启HTTP2
HTTP/2在性能、安全性和可用性方面都有显著的改进，可以使 Web 应用更加快速、高效和可靠。
-
多路复用：HTTP/2 允许同时发送多个请求和响应，而不是像 HTTP/1.1 一样只能一个一个地处理。这样可以减少延迟，提高效率，提高网络吞吐量。
-
二进制传输：HTTP/2 使用二进制协议，与 HTTP/1.1 使用的文本协议不同。二进制协议可以更快地解析，更有效地传输数据，减少了传输过程中的开销和延迟。
-
改进的安全性：HTTP/2 默认使用 TLS（Transport Layer Security）加密传输数据，提高了安全性。
-
兼容 HTTP/1.1：HTTP/2 可以与 HTTP/1.1 共存，服务器可以同时支持 HTTP/1.1 和 HTTP/2。如果客户端不支持 HTTP/2，服务器可以回退到 HTTP/1.1
3. 感知优化
loading动画, 骨架加载, 图片懒加载,
长列表虚拟滚动
虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的不渲染，在滚动时动态更新可视区域，该方案在优化大量数据渲染时效果是很明显的
12. 你的readme文档一般怎么写
-
项目介绍
-
代码实现了什么功能?
-
该如何使用? (系统环境参数，部署要素，操作说明等)
-
代码组织架构是什么样的?（目录结构说明等）
-
版本更新内容摘要（这个非常重要）
