前端遇到的面试题

1、浏览器渲染过程、渲染机制

2、宏任务、微任务

3、vuex刷新页面为什么会丢失数据，如何解决

4、vue双向绑定原理

5、计算属性和watch的区别

6、ssr和spa的区别

7、vue2与vue3的区别，以及3.0新增的特性

8、angular，react, vue的区别

9、前端储存方式

10、call,bind,apply的区别

11、箭头函数和function函数的区别

（

写法不同，箭头函数无法使用构造函数，this指向不同，箭头函数没有arguments 等）

12、this指向问题

（在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

如果该函数是一个构造函数，this指针指向一个新的对象

在严格模式下的函数调用下，this指向undefined

如果该函数是一个对象的方法，则它的this指针指向这个对象......

所以普通函数的this指向调用它的那个对象

箭头函数的this永远指向其上下文的 this

）

13、new的过程

（

1、首先创建了一个新对象（这个对象的类型是Object）

2、设置原型链: 将新对象的constructor属性设置为构造函数信息，设置新对象的__proto__属性指向构造函数的prototype对象

3、让构造函数的this指向新的对象并执行函数体

）

14、什么是闭包，闭包的使用场景

（

闭包就是能够读取其他函数内部变量的函数

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

使用场景：封装功能时(需要使用私有的属性和方法)，函数防抖、函数节流、函数柯里化、给元素伪数组添加事件需要使用元素的索引值

）

15、什么是原型、原型链

（

每一个实例对象都有一个私有属性__proto__，该私有属性总是指向实例构造函数的原型对象；

不同的原型对象”节点“通过__proto__ 指向进行串联连接，从而形成一条原型链。

原型链的终点为null对象，即无中生有。

）

16、js和ts区别

17、vue组件全局挂载，使用js调用组件的方法

18、keep-alive及对应的生命周期

19、vue mixin的作用

20、父子组件生命周期执行顺序

21、项目优化，webpack优化

22、组件 v-if 和 v-show 切换时生命周期钩子的执行

23、webpack与 vite 的区别

24、provide/inject通信父组件修改，子孙组件会变化吗?
 https://www.cnblogs.com/vickylinj/p/13368745.html

provide定义的属性通过函数return 返回，子组件定义计算属性去监听

25、react中setState是异步吗？（回答：有时候表现为异步，有时候表现为同步；在合成事件和钩子函数中变现为异步；在原生js绑定的事件，setTimeout/setInterval等中表现为同步。异步可以保证内部数据的统一，setState异步更新也使得并发更新组件成为可能。）

26、react如何实现类似vue中watch的功能？（componentDidUpdate，hook，通过定义get/set等）

27、react性能优化方案

28、什么是函数式编程

29、虚拟dom是如何工作的？（虚拟DOM只不过是真实的DOM的javascript对象表示。与更新真实的DOM相比，更新javascript对象更容易，更快捷。React将整个DOM副本保存为虚拟DOM。每次更新时，它都会维护两个虚拟DOM，比较之前的状态和当前的状态，并确定哪些对象已被更改。并将这些变化更新到实际的DOM上）

29、React如何在重新加载页面时保留数据（单页面应用程序首先在DOM中加载index.html，然后在用户浏览页面时加载内容，或者从同一index.html中后端API中获取任何数据。如果我们通过点击浏览器中的重新加载按钮 重新加载页面index.html，整个React应用程序将重新加载，我们将丢失应用程序的状态。所以每当重新加载应用程序时，我们使用浏览器localstorage来保存应用程序的状态。我们将整个存储数据保存在localstorage中，每当有页面刷新或重新加载时，我们从localstorage加载状态。）

30、state和props的区别（state是组件内部维护的一组用于反映组件ui变化的状态集合 是可变的；props一般存在于子组件 通过父组件的state变化传递给子组件作业propss来更新视图）

31、react祖孙组件之间的属性传值

32、react生命周期

33、什么是高阶组件？什么是受控组件?

34、react为什么类方法需要绑定?

绑定this,避免其上下文this丢失，

35、为什么浏览器不能读取JSX（浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。）

36、React 组件的何处发起 Ajax 请求

37、webpack中loader与plugin的区别

（loader 用于转换某些类型的模块，比如.txt文件类型的转换；而插件plugin则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量，插件目的在于解决 loader 无法实现的其他事）

38、简单描述一下webpack中的loader以及其特性

(loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。

特性：loader 支持链式调用，loader 可以是同步的，也可以是异步的等)

39、promise有哪些方法（特别要对all()，allsettle()，any()，race()进行了解）

40、BFC, 为什么会用到，怎么样才能实现 BFC

41、前端安全防御

42、浏览器强缓存和协商缓存

43、http 多路复用是什么，

44、https 和 http 的区别