实习面试总结

1. 登陆注册模块的jwt（token认证)

什么是JWT

在介绍JWT之前，先回顾一下利用token进行用户身份验证的流程:

1.客户端使用用户名和密码请求登录
2.服务端收到请求，验证用户名和密码
3.验证成功后，服务端会签发一个token，再把这个token返回给客户端
4.客户端收到token后可以把它存储起来，比如放到cookie中
5.客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带
6.服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就向客户端返回请求数据

这种基于token的认证方式相比传统的session认证方式更节约服务器资源，并且对移动端和分布式更加友好。其优点如下：

• 支持跨域访问：cookie是无法跨域的，而token由于没有用到cookie(前提是将token放到请求头中)，所以跨域后不会存在信息丢失问题

• 支持跨域访问：cookie是无法跨域的，而token由于没有用到cookie(前提是将token放到请求头中)，所以跨域后不会存在信息丢失问题

• 无状态：token机制在服务端不需要存储session信息，因为token自身包含了所有登录用户的信息，所以可以减轻服务端压力

• 更适用CDN：可以通过内容分发网络请求服务端的所有资料

• 更适用于移动端：当客户端是非浏览器平台时，cookie是不被支持的，此时采用token认证方式会简单很多

• 无需考虑CSRF：由于不再依赖cookie，所以采用token认证方式不会发生CSRF，所以也就无需考虑CSRF的防御

而JWT就是上述流程当中token的一种具体实现方式，其全称是JSON Web Token，官网地址：https://jwt.io/

通俗地说，JWT的本质就是一个字符串，它是将用户信息保存到一个Json字符串中，然后进行编码后得到一个JWT token，并且这个JWT token带有签名信息，接收后可以校验是否被篡改，所以可以用于在各方之间安全地将信息作为Json对象传输。JWT的认证流程如下：

1. 首先，前端通过Web表单将自己的用户名和密码发送到后端的接口，这个过程一般是一个POST请求。建议的方式是通过SSL加密的传输(HTTPS)，从而避免敏感信息被嗅探
2. 后端核对用户名和密码成功后，将包含用户信息的数据作为JWT的Payload，将其与JWT Header分别进行Base64编码拼接后签名，形成一个JWT Token，形成的JWT Token就是一个如同lll.zzz.xxx的字符串
3. 后端将JWT Token字符串作为登录成功的结果返回给前端。前端可以将返回的结果保存在浏览器中，退出登录时删除保存的JWT Token即可
4. 前端在每次请求时将JWT Token放入HTTP请求头中的Authorization属性中(解决XSS和XSRF问题)
5. 后端检查前端传过来的JWT Token，验证其有效性，比如检查签名是否正确、是否过期、token的接收方是否是自己等等
   验证通过后，后端解析出JWT Token中包含的用户信息，进行其他逻辑操作(一般是根据用户信息得到权限等)，返回结果

为什么要用JWT

传统Session认证的弊端

我们知道HTTP本身是一种无状态的协议，这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，认证通过后HTTP协议不会记录下认证后的状态，那么下一次请求时，用户还要再一次进行认证，因为根据HTTP协议，我们并不知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在用户首次登录成功后，在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie，以便下次请求时发送给我们的应用，这样我们的应用就能识别请求来自哪个用户了，这是传统的基于session认证的过程

然而，传统的session认证有如下的问题：

• 每个用户的登录信息都会保存到服务器的session中，随着用户的增多，服务器开销会明显增大
• 由于session是存在与服务器的物理内存中，所以在分布式系统中，这种方式将会失效。虽然可以将session统一保存到Redis中，但是这样做无疑增加了系统的复杂性，对于不需要redis的应用也会白白多引入一个缓存中间件
• 对于非浏览器的客户端、手机移动端等不适用，因为session依赖于cookie，而移动端经常没有cookie
• 因为session认证本质基于cookie，所以如果cookie被截获，用户很容易收到跨站请求伪造攻击。并且如果浏览器禁用了cookie，这种方式也会失效
• 前后端分离系统中更加不适用，后端部署复杂，前端发送的请求往往经过多个中间件到达后端，cookie中关于session的信息会转发多次
• 由于基于Cookie，而cookie无法跨域，所以session的认证也无法跨域，对单点登录不适用

jwt认证的优势

• 跨域认证

举例来说，A 网站和 B 网站是同一家公司的关联服务。现在要求，用户只要在其中一个网站登录，再访问另一个网站就会自动登录，请问怎么实现？

一种解决方案是 session 数据持久化，写入数据库或别的持久层。各种服务收到请求后，都向持久层请求数据。这种方案的优点是架构清晰，缺点是工程量比较大。另外，持久层万一挂了，就会单点失败。

另一种方案是服务器索性不保存 session 数据了，所有数据都保存在客户端，每次请求都发回服务器。JWT 就是这种方案的一个代表

• jwt的原理

JWT 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，就像下面这样。

{
“姓名”: “张三”,
“角色”: “管理员”,
“到期时间”: “2018年7月1日0点0分”
}

以后，用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名（详见后文）。

服务器就不保存任何 session 数据了，也就是说，服务器变成无状态了，从而比较容易实现扩展。

• jwt的结构

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。

JWT 的三个部分依次如下。

Header（头部）
Payload（负载）
Signature（签名）

1. Header
   Header 部分是一个 JSON 对象，描述 JWT 的元数据，通常是下面的样子。

{

“alg”: “HS256”,
“typ”: “JWT”
}
上面代码中，alg属性表示签名的算法（algorithm），默认是 HMAC SHA256（写成 HS256）；typ属性表示这个令牌（token）的类型（type），JWT 令牌统一写为JWT。

2. Payload
   Payload 部分也是一个 JSON 对象，用来存放实际需要传递的数据。JWT 规定了7个官方字段，供选用。

iss (issuer)：签发人
exp (expiration time)：过期时间
sub (subject)：主题
aud (audience)：受众
nbf (Not Before)：生效时间
iat (Issued At)：签发时间
jti (JWT ID)：编号
除了官方字段，你还可以在这个部分定义私有字段，下面就是一个例子。

{
“sub”: “1234567890”,
“name”: “John Doe”,
“admin”: true
}
注意，JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

3. Signature
   Signature 部分是对前两部分的签名，防止数据篡改。

首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

HMACSHA256(
base64UrlEncode(header) + “.” +
base64UrlEncode(payload),
secret)
算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。

• jwt的使用方式

客户端收到服务器返回的 JWT，可以储存在 Cookie 里面，也可以储存在 localStorage。

此后，客户端每次与服务器通信，都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送，但是这样不能跨域，所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。

Authorization: Bearer
另一种做法是，跨域的时候，JWT 就放在 POST 请求的数据体里面。

• jwt的特点

（1）JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次。

（2）JWT 不加密的情况下，不能将秘密数据写入 JWT。

（3）JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JWT，可以降低服务器查询数据库的次数。

（4）JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。

（5）JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证。

（6）为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输。

2.利用jsencrypt.js 进行前端RSA加密，java后端解密

RSA加密算法

RSA加密算法是一种非对称加密算法，RSA加密使用了"一对"密钥.分别是公钥和私钥,这个公钥和私钥其实就是一组数字!其二进制位长度可以是1024位或者2048位.长度越长其加密强度越大,目前为止公之于众的能破解的最大长度为768位密钥,只要高于768位,相对就比较安全.所以目前为止,这种加密算法一直被广泛使用

RSA加密与解密
使用公钥加密的数据,利用私钥进行解密
使用私钥加密的数据,利用公钥进行解密

前端使用jsencrypt进行加密

目前的应用场景是在用户注册或登录的时候，用公钥对密码进行加密，再去传给后台，后台用私钥对加密的内容进行解密，然后进行密码校验或者保存到数据库

3. vuex-persistedstate持久化存储数据

为什么要持久化存储

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

vuex localStorage sessionStorage区别

1. 存储位置

• vuex储存在内存
• localStorage和sessionStorage以文件的方式储存在本地，localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON.stringify(obj)将其转成字符串，取出来时使用 JSON.parse(str)重新转成对象。
• localStorage( 本地存储 )，永久存储
• sessionStorage（会话存储），临时保存

2. 应用场景

• vuex用于组件之间的传值
• localstorage，sessionstorage则主要用于不同页面之间的传值

3. 永久性

• 当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，
• sessionStorage 刷新数据不丢失，页面关闭后清除数据
• localStorage中的数据永久保存，除非手动删除

4. 是否支持响应式

• vuex支持响应式，一个组件的数据变化会映射到使用这个数据的其他组件
• sessionStorage、localStorage不支持响应式，修改之后不会触发View的响应式变化，localStorage修改没有记录，不利于调试和回溯

WebSocket

什么是websocket

WebSocket是一种在Web浏览器和服务器之间建立实时双向通信的技术。它不同于HTTP协议，因为HTTP是单向协议，只能客户端向服务器发送请求，服务器才能响应请求。而WebSocket可以实现双向通信，客户端和服务器可以随时互相发送消息，无需等待请求和响应。

WebSocket的优点

• 实时性：基于 WebSocket 协议的应用具有非常好的实时性，与HTTP协议相比能够更快地实现双向通信。
• 多协议：WebSocket 协议对底层传输协议并没有要求，它可以基于 TCP、UDP、SCTP 等协议，灵活性很高。
• 高效性：相较于轮询和 Comet 等技术，WebSocket协议可以降低数据交换的延迟，减少过多的头信息和降低网络带宽消耗率。
• 支持跨域：由于 WebSocket 是基于 TCP 协议的，较少受到同源策略限制，支持跨域使用。
• 减少服务端压力：相较于传统的 HTTP 请求，WebSocket 可以减少服务端的 CPU 和内存的开销，因为它的连接一旦建立就可以长期保持。
• 带有扩展特性：在协议的设计时，WebSocket 考虑的扩展特性比较多，例如可适应不同的压缩算法、消息编码方式等。
• 更好的二进制支持：在 WebSocket 中，字符串和二进制是等价的，非常方便处理二进制数据。

websocket的心跳机制和重连机制

心跳机制：客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期

断线重连：若某时间段内客户端发送了消息，而服务端未返回，则认定为断线；这个时候会触发到websocket中的onclose事件，需要重新连接服务

3.怎么快速渲染大量数据

• 虚拟滚动： 使用虚拟滚动技术，只渲染可见区域的数据，而不是一次性将所有数据都渲染出来。这样可以大大减少页面的渲染负担，提升页面的加载速度和性能。
• 分页加载： 将数据分页加载，每次只加载当前页的数据，而不是一次性加载所有数据。这样可以减少一次性加载大量数据所带来的性能压力，提升页面的响应速度。
• 使用合适的数据结构： 在前端使用合适的数据结构来存储和操作数据，例如使用数组、对象等。合理地组织数据结构可以提高数据的读取和操作效率。
• 性能优化技巧： 使用一些性能优化技巧，例如避免不必要的重新渲染、减少 DOM 操作次数、使用事件委托等，以提升页面的渲染性能。
• 懒加载： 对于页面中的图片、视频等资源，可以采用懒加载技术，只在它们进入可视区域时才进行加载，而不是一开始就加载所有资源。
• 使用缓存： 如果数据不经常变化，可以考虑在前端使用缓存技术，将数据缓存起来，减少对后端的请求次数，提高页面的加载速度。

4.授权认证登录之 Cookie、Session、Token、JWT

参考文章《一文搞明白Cookie、Session、Token、JWT》

5.axios拦截器interceptors实现路由守卫

关于axios的interceptors(拦截器)

（1）请求拦截

axios.interceptors.request.use() 请求拦截
axios.interceptors.request.use( function ( config ) { return config })
这个方法的参数是一个函数，发送请求之前就会执行这个函数，函数里面的参数就是执行这个函数拦截到的配置对象config

我们为什么要做请求拦截？
答：可以发起请求之前，做一个拦截，把数据（参数，配置…）做了处理再发送请求。

因为post请求传参需要用字符串的方式 axios.post(‘/type’,‘pageSize=2’).then(res=> {})
但是写对象的参数，对我们开发会友好一点 axios.post(‘/type’,{pageSize: 2}).then(res=> {}),可是这样会导致错误

（2）响应拦截

axios.interceptors.response.use() 响应拦截
axios.interceptors.response.use( function ( res ) { return res } )
这个方法的参数是一个函数，请求成功之前后就会执行这个函数，函数里面的参数就是执行这个函数拦截到的结果数据

我们为什么要做响应拦截？
答：在请求成功之后，对数据有固定处理方式，就可以在响应拦截里面做。比如直接返回data,减少返回数据获取的代码量；还有一些状态的固定处理，不同的后端，他们代码风格可能是不一样。有些可能是用code 表示状态 eg:20000代表成功 50002没有权限 …。还有些用status表示状态， eg: success 代表成功， fail代表失败，只能要是后端代码风格确定了，这些状态通常是不会变的了。比如： 返回的请求失败的状态码，那就可以做一个通用的处理，给一个弹框提示。

参考文章：《关于axios的两种拦截方式》

6.vue的生命周期

1. beforeCreate
   官网：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

详细：在这个阶段，数据是获取不到的，并且真实dom元素也是没有渲染出来的

2. created
   官网：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

详细：在这个阶段，可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来，在这个钩子函数里面，可以进行相关初始化事件的绑定、发送请求操作

3. beforeMount
   官网：在挂载开始之前被调用：相关的 render 函数首次被调用。

详细：代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来，这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作

4. mounted
   官网：实例被挂载后调用，这时 el 被新创建的 vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el 也在文档内。
   注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

详细：挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作

5. beforeUpdate
   官网：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

详细：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容

6. updated
   官网：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
   当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

详细：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。

7. beforeDestroy
   官网：实例销毁之前调用。在这一步，实例仍然完全可用。

详细：当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。

8. destroyed
   官网：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

详细介绍参考文章

7.vue的通信

详细参考文章

8.有很多人都保持登录状态，如何确保当前的用户是谁，也可以理解对于不同的用户需要展示不同的页面功能，那么如何确定该用户的身份？

服务端要为特定的用户创建了特定的Session，用于标识这个用户，并且跟踪用户，这个Session是保存在服务端的，有一个唯一标识。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了

9.前端路由用过吗？前端路由一种是hash路由，一种是history路由，这两种路由的原理是什么？

hash路由：www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过hashchange事件监听到url的变化，从而进行页面跳转，并且无论哈希值如何变化，服务端接收到的url请求永远是www.test.com
history路由：History 模式是 HTML5 新推出的功能，主要使用history.pushState和history.replaceState改变 URL。
通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录

10.Js将异步变为同步

JavaScript中可以使用async/await关键字将异步操作转换为同步的方式执行。async/await是ES2017（也称ES8）新增的语法，它可以让异步请求看起来像同步代码一样，更加简洁易懂。

async用于声明一个函数为异步函数，该函数执行时返回一个Promise对象，表示当前函数执行的结果。在函数中可以使用await关键字来等待异步操作的结果，直到异步操作完成后再继续执行下面的代码。需要注意的是，await只能在async函数中使用。

async function fetchData() {
  const response = await fetch('https://api.example.com/data'); // 等待fetch异步请求完成
  const data = await response.json(); // 等待解析JSON数据完成
  console.log(data); // 打印获取的数据
}

fetchData(); // 调用异步函数

在上面的代码中，我们定义了一个名为fetchData的异步函数，使用await关键字等待fetch请求和json解析操作完成后再打印获取的数据。

需要注意的是，虽然async/await可以让异步操作看起来像同步代码一样，但它并没有真正把异步代码变为同步执行，程序在执行过程中仍然是异步的。另外，使用async/await需要注意错误处理，可以使用try/catch语句来捕获异常。

11.js中常用的数组和字符串方法

详细参考文章

12.如何判断一个对象为空对象

详细参考文章

13.cookies、localStorage 、sessionStorage 的区别

cookie：主要用来保存登录信息，比如登录某个网站市场可以看到“记住密码”这就是通过cookie中存入一段辨别用户身份的数据来实现的
sessionStorage：会话，是可以将一部分数据在当前的会话中保存下来，刷新页面数据依旧存在。但是页面关闭时，sessionStorage中的数据就会被清空。
localStorage：是HTML5标准找那个新加入的技术，localStorage中的键值对总是以字符串的形式存储。localStorage类似sessionStorage，但其区别在于：存储在localStorage 的数据可以长期保留。

详细参考文章

详细参考文章

14.git

git常用命令

15.js中的浅拷贝和深拷贝

详细参考文章

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。

16.前端打包工具webpack和vite

webpack和vite的区别

详细参考文章

webpack和vite详解

详细参考文章

17.ES6常用知识

var定义的变量，变量提升，没有块的概念，可以跨块访问。
let定义的变量，只能在块作用域里访问，不能声明同名变量。
const用来定义常量，使用时必须初始化(即必须赋值)，不能声明同名变量，只能在块作用域里访问，而且不能修改，但是在定义的对象时对象属性值可以改变。
他们都不能跨函数访问
es6
ES6常用知识总结

18.CSS常见的 9 个单位

em：相对于元素的字体尺寸，如果用于字体大小，则相对于父元素的字体大小。
rem：相对于根元素（html）的字体大小。
vw（视口宽度的 1%）和vh（视口高度的 1%）：相对于可视窗口的大小，常用于响应式设计。不是相对于页面，而是可见的当前屏的大小。
%（百分比）：相对于父元素的宽度或高度。
详细参考文章

19.JavaScript 二维数组转一维数组

详细参考文章

20.js中箭头函数和function函数的区别

详细参考文章

1.箭头函数的this只与代码块上下文有关，function函数的this才与调用者有关。
2.箭头函数不能使用arguments对象，是可以使用剩余参数语法来获取函数的参数。普通函数声明可以使用arguments对象来获取函数的参数。
3.箭头函数不能使用yield关键字，因此不能用作生成器函数。普通函数声明可以使用yield关键字来定义生成器函数。
4.箭头函数是匿名的，function函数可以有名称。

21.前端跨域解决方式

跨域问题的出现是因为浏览器的同源策略限制了Web页面脚本只能访问与自己同源的资源，即协议、域名和端口号都相同的资源。当一个网页试图访问不同源的资源时，就会遇到跨域问题
三种解决方法：（CORS、JSONP、代理跨域）
六种解决方法

22.react跟vue的区别

react跟vue的区别

详细参考文章

23.vue双向绑定原理

1、vue双向数据绑定是 通过 数据劫持 并结合 发布-订阅模式 的方法来实现的。 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
2、其中 数据劫持 是通过 Object.defineProperty() 方法实现的。vue 在内部会把定义在 data 中的属性通过这个方法全部转为 getter/setter。

双向绑定原理

MVVM模型

24.RESTful风格

RESTFUL是一种网络应用程序的设计风格和开发方式，基于HTTP，可以使用 XML 格式定义或 JSON 格式定义。最常用的数据格式是JSON。由于JSON能直接被JavaScript读取，所以，使用JSON格式的REST风格的API具有简单、易读、易用的特点。
接口的一个规范

25.GET和POST的区别

最大的区别其实是语义上的区别
get用来获取数据，post用来提交数据

GET和POST的区别

26.HTTP和HTTPS

HTTP和HTTPS

HTTPS是HTTP协议的安全版本，HTTP协议的数据传输是明文的，是不安全的，HTTPS使用了SSL/TLS协议进行了加密处理，相对更安全
HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP是80，HTTPS是443
HTTPS 由于需要设计加密以及多次握手，性能方面不如 HTTP
HTTPS需要SSL，SSL 证书需要钱，功能越强大的证书费用越高

27.js中setInterval和setTimeout

setTimeout() 和 setInterval() 主要有以下区别:
setTimeout() 只执行一次,setInterval() 会重复执行
setTimeout() 延时时间到了就执行,setInterval() 是从开始时间每隔一段时间就执行
setInterval() 可能出现累积延迟的问题
不同场景使用:
只需要延迟执行可以使用 setTimeout()
需要循环执行就使用 setInterval()
详细参考文章

28.HTTP中常见的状态码

类别 含义
1XX 信息类
2XX 成功
3XX 重定向
4XX 客户端错误
5XX 服务器错误

100 Continue 继续。客户端应继续其请求
200 OK 请求成功。一般用于GET与POST请求
401 Unauthorized 该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证） 的认证信息。
404 Not Found 服务器上无法找到请求的资源

29.vue中computed和watch属性的区别

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 num和num2还没有发生改变，多次访问 total 计算属性会立即返回之前的计算结果，而不需要重新计算

watch叫做侦听器，当侦听的值发生改变时，其他变化会跟着改变或者有些操作会被触发，
当需要在数据变化时执行异步或开销较大的操作时，使用watch是最有用的

30.vue中mixin

Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

详细参考文章

31.图片懒加载

大型网站如常用的淘宝，京东等页面，需要展示大量的商品图片信息，如果打开网页时让所有图片一次性加载完成，需要处理很多次网络请求，等待加载时间比较长，用户体验感很差。

有一种常用的解决方式是：随着滚动动态加载，即图片的惰性加载。视图之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示。

图片懒加载

32.vue中函数式组件

特点:
没有管理任何状态
没有监听任何传递给它的状态
没有生命周期方法
只接收一些prop的函数
详细参考文章

33.JS中的闭包

闭包让你可以在一个内层函数中访问到其外层函数的作用域

任何闭包的使用场景都离不开这两点：

创建私有变量
延长变量的生命周期
一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的

详细参考文章

34.协商缓存和强缓存

详细参考文章

35.HTML的缓存过程

浏览器是一个边解析边渲染的过程：

DOM > CSSOM > 渲染树 > 布局 > 绘制

① 浏览器解析HTML文件构建DOM树，然后解析CSS文件构建CSS规则树

② DOM树和CSS规则树解析完成后，合成渲染树（Render Tree）

③ 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上（重排和重绘）

详细参考文章

36.JS继承

第一种：原型链继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。
可以看到，原型对象上的方法和属性都可以被实例对象访问，但是存在一个问题，多个实例对象共享一个原型对象，也就是说实例对象获取的原型对象上的属性和方法的内存空间是共享的，其中一个实例对象改变了它的原型对象，另外的实例对象获取原型对象身上的属性和方法也会发生改变，这是使用原型链继承的一个缺点

二、构造函数继承（借助call方法）

为了解决原型共享问题，构造函数继承方式借助call方法来解决
可以看到，构造函数继承能够解决原型链继承的弊端，但同时也产生了新的问题，子类只能继承父类实例对象的属性和方法，无法继承父类原型上的属性和方法

三、组合继承（原型链继承+构造函数继承）

37.instanceof和typeof

两者都是用于判断数据类型，
区别在于typeof返回值为一个基本数据类型，这里typeof null 的值为 object 为js的bug
而instanceof 返回的是一个布尔值

38.vue中keep-alive

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存

39.vue中v-if和v-show的区别

1、主要区别

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

2、本质区别

（1）vue-show本质就是标签display设置为none，控制隐藏
（2）vue-if是动态的向DOM树内添加或者删除DOM元素

40.前端如何处理后端一次性传来大量的数据（1w条？）

一、直接渲染（12s不行）
二、通过 setTimeout 进行分页渲染
三、requestAnimationFrame来代替setTimeout
requestAnimationFrame
四、文档片段
五、延迟加载

详细参考文章

41. 浏览器从输入URL到页面加载的全过程及优化

浏览器从输入URL到页面加载的全过程
从输入URL到页面加载的主干流程如下：

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL的DNS缓存记录。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）。

浏览器从输入URL到页面加载的全过程及优化

js16：从输入url开始，前端如何优化