前端面试整理5

目录

1.父子组件生命周期执行顺序？

2.localstorage.sessionstorage,cookie的区别？

3.js截取字符串方案？

4.Webpack的优化流程？

5.协商缓存和强缓存？

6.静态资源是强缓存，会不会向服务器发请求？

7.自动化构建工具vite的优势有哪些？

8.动态路由是如何解析的？

9.React中如何封装组件？流程？

10.高阶组件？使用场景？

11.Ts和js的区别？

12.如何清除浮动？

13.Ts中的枚举和元组？怎么使用？

14.组件内部前置守卫beforeRouteEnter没有this如何使用？

15.Ts的函数重载？

17.Vue的路由如何携带参数？多个参数如何携带？

18.Js的内置对象有哪些？

19.组件如何进行递归使用？

20.Promise的方法分别有哪些？分别怎么使用？

---

1.父子组件生命周期执行顺序？

• 父组件 beforeCreate
• 父组件 created
• 父组件 beforeMount
• 子组件 beforeCreate
• 子组件 created
• 子组件 beforeMount
• 子组件 mounted
• 父组件 mounted
• 父组件 beforeUpdate
• 子组件 beforeUpdate
• 子组件 updated
• 父组件 updated
• 父组件 beforeDestroy
• 子组件 beforeDestroy
• 子组件 destroyed
• 父组件 destroyed

2.localstorage.sessionstorage,cookie的区别？

①存储大小：cookie不能超过4kb;sessionStorage和localStorage存储空间较大，可达到5M或更大。

②保存时间：cookie在设置的有效期内一直有效；sessionStorage在会话关闭时自动删除；localStorage永久存储，除非手动删除。

③数据与服务器的交互：cookie会主动将数据传递给服务器；sessionStorage和localStorage不会主动把数据传递给服务器，它保存在本地。

3.js截取字符串方案？

①subString();

②slice();

③subStr()。

4.Webpack的优化流程？

1. 减少文件搜索范围：通过配置resolve.modules和resolve.extensions来缩小Webpack搜索模块的范围，减少文件搜索时间。

2. 使用DLLPlugin：将复杂的依赖关系打包成静态资源，加快构建速度。

3. 使用HappyPack：多线程处理loader，加快构建速度。

4. 懒加载：尽可能地延迟模块加载，减少首次加载时间。

5. 使用Tree Shaking：只打包使用到的代码，减少打包体积。

6. 代码分割：将代码分割成多个小块，按需加载，提高页面加载速度。

7. 使用缓存：使用HashedModuleIdsPlugin和NamedChunksPlugin来提高缓存效率。

8. 优化图片：使用url-loader和image-webpack-loader来优化图片，减小打包体积。

5.协商缓存和强缓存？

协商缓存：浏览器向服务器发送请求，服务器会根据请求的参数来判断是否命中协商缓存，如果命中，则返回状态码304并带上新的响应数据通知浏览器从缓存中读取资源。

强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取并返回状态码200。

区别：强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求以此来确认是否使用缓存。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

6.静态资源是强缓存，会不会向服务器发请求？

不会，强缓存不会向服务器发送任何