前端基础面试题

1. Local storage 和 Session storage 的区别，以及跨页面之后是否可以共享？
2. Vue中，为了提升首屏加载性能，可以采用哪些优化方案？
3. 箭头函数和普通函数有什么区别？
4. obj对象作用域的调用？
5. 闭包没有被垃圾回收，那怎么手动回收呢？
6. 节流与防抖是什么，以及他们的区别？
7. 浏览器的宏任务与微任务是什么？
8. 如果一个 Promise进行了两次 then，那 then是一个微任务还是两个微任务？
9. Promise函数调用？
10. 如何使用 TS 来定义 interface？ TS泛型是什么？
11. TS如何定义函数返回数据类型？
12. Vue2.0和Vue3.0的区别？
13. 为什么 Vue2 嵌套的深层数据没法响应？为什么 vue3 可以实现对象数据的深度响应？
14. Vue2.0和Vue3.0中父组件与子组件间传参值的变化？
15. Vue2.0 中如何使用Vue3 的语法？
16. Vue2.0 自定义指令是什么？
17. Monorepo应用场景有哪些?
18. yarn 和 pnpm 有什么区别?
19. 在 package.json中未定义的包，在 yarn 和 pnpm 中能引用吗?
20. 如果 pnpm 的 package.json 注册了 A 包，A 包内又引用了 B 包，那我能在项目中直接使用B包吗？如果不能， 为什么 pnpm 不可以引用未定义的包?
21. 如何实现网页布局设计模式-瀑布流布局(Waterfall Layout)？如何实现加载瀑布流用户体验优化？
22. Cache和Session跨域如何处理？

1. Local storage 和 Session storage 的区别，以及跨页面之后是否可以共享？。

Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。
Web Storage API 相关页面，属性描述：
window.localStorage 允许在 Web 浏览器中保存键/值对。存储没有到期日期的数据。
window.sessionStorage 允许在 Web 浏览器中保存键/值对。存储一个会话的数据。

Storage 对象属性和方法

属性/方法	描述
key(n)	返回存储中第 n 个键的名称。
length	返回存储在 Storage 对象中的数据项数。
getItem(keyname)	返回指定的键名的值。
setItem(keyname, value)	将键添加到存储中，或者如果键已经存在，则更新该键的值。
removeItem(keyname)	从存储中删除该键。
clear()	清空所有键。

localStorage 对象提供对特定网站的本地存储的访问。
它允许您存储、读取、添加、修改和删除该域的数据项。
存储的数据没有到期日期，并且在浏览器关闭时不会被删除。
这些数据将在几天、几周和几年内均可用。
不同之处在于 sessionStorage 对象存储会话的数据。
当浏览器关闭时，数据会被删除。

实例
localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

实例
sessionStorage.setItem("name", "Bill Gates");
sessionStorage.getItem("name");

2. Vue中，为了提升首屏加载性能，可以采用哪些优化方案？。

• 代码拆分 (Code Splitting):

使用Webpack等构建工具的代码拆分功能，将应用分割为多个小块（chunk）。这样，只有在需要时才加载相应的块，减少初始加载时间。

• 懒加载 (Lazy Loading):

对于不是首屏必须的组件或路由，可以使用懒加载，将它们按需加载。Vue的路由懒加载可以通过动态导入组件实现。

• 按需导入第三方库:

如果使用了一些较大的第三方库，可以考虑按需导入（Tree-shaking）。例如，使用import { someFunction } from ‘some-library’;，而不是直接导入整个库。

• 图片优化:

对于图片资源，使用适当的格式和大小，避免不必要的高分辨率图像。可以使用工具如ImageMin来压缩图片。

• 服务端渲染 (SSR):

使用Vue的服务端渲染（SSR）可以加速首屏加载。SSR可以在服务器端渲染初始HTML，并在客户端激活Vue，提供更快的首屏加载时间。

• Vue-Router的预加载 (Preload):

对于Vue-Router，可以使用的prefetch属性来预加载一些异步组件，以提前加载相关资源。

• 使用CDN:

将一些常用的第三方库，如Vue、Vue Router等，通过CDN（内容分发网络）加载，减少服务器负担，提高加载速度。

• SSG (静态站点生成):

对于不经常变化的内容，可以使用静态站点生成（SSG）的方式，将Vue应用预渲染成静态HTML文件。这可以提高加载速度并降低服务器压力。

• 缓存策略:

合理使用浏览器缓存策略，确保不经常变化的资源被缓存，从而减少请求时间。

• 组件优化:

在组件中使用keep-alive来缓存组件状态，避免重新渲染。优化组件的mounted生命周期钩子，确保只有必要的操作在首次渲染时执行。

3. 箭头函数和普通函数有什么区别？