2024前端面试题归纳总结 （持续更新~）

前言：个人觉得面试题b站的pink老师讲的不错

0.1自我介绍

0.5职业规划

未来一年：踏实做事，融入企业，熟悉业务，积累经验， 成为同事眼中的“贴心人”

未来三年：精进业务，丰富自己的技能，向后端和三维方便发展，在岗位中独当一面，成为工作上的带领人

未开五年：我会紧随公司的发展，不断突破自我，努力成为公司不可或缺的人

1.为什么离职

上家公司加班制度不合理，更看重工作时长而不是工作效率。即使工作做完了，晚上九点前走了，领导第二天还要找谈话，到最近不加班还要写申请为什么不加班。单休而且加班，导致我下班回到家就累的躺床上，没剩余的精力去学习提升自己。

1.1项目中的难点和项目中的亮点

前端被问到项目亮点和项目难点_前端项目亮点-CSDN博客性能优化前端被问到项目亮点和项目难点_前端项目亮点-CSDN博客

项目中的亮点：

        1.响应式设计：

                1.使用媒体查询

@media (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }

  .container {
    padding: 20px;
  }
}

                2.使用flex布局

        2.性能优化

                1.路由懒加载

                2.组件懒加载 defineAsyncComponent或者箭头函数引入

        3.动画

        4.vue2中v-for的优先级大于v-if，所以如果有渲染整个list，再判断actived开销就很大，可以使用计算属性处理数据，过滤出list中actived状态的给v-for渲染

        5.事件代理        

vue - 常见的性能优化_vue3网页占用内存 除了重加载网页,还有什么方法-CSDN博客

        6.拖拽组件、冷冻列

Animista - On-Demand CSS Animations Library

2.es6新特性 （自己总结吧 重要的有let、const、var和promise等等）

3.原型和原型链（推荐pink老师的讲解）

原型：每个函数都有prototype属性，称之为原型

原型对象：因为属性的值是对象，所以称之为原型对象

构造函数：比如数组的原型上的方法是挂载到构造函数身上

__proto__:对象都有的属性，指向了原型

4.闭包->节流、防抖（推荐pink老师的讲解）

闭包=内存函数引用外层函数变量

优点：减少了全局变量的数量，降低了全局变量被误用或意外修改的风险。

缺点：内存泄漏

5.数组的常用方法

改变数组的方法：shift()，unshift()，pop()，push()，reverse()，sort()，splice()

JavaScript数组方法（最全）-CSDN博客

6.字符串的常用方法

JS中字符串常用方法总结_js字符串方法-CSDN博客

7.js的基本类型 ->怎么判断数据的基本类型->怎么判断对象、数组的基本类型

JavaScript判断数据类型的方法及封装函数判断数据类型_js类型判断封装函数-CSDN博客

typeof 基本类型

instanceof 引用类型

8.vue2和vue3的区别

基本回答点：

一，用组合式api替换选项式api，方便逻辑更加的聚合

二，一些细节改变

具体细节：1，因为改成组合式api所以没有this

2，生命周期没有create，setup等同于create，卸载改成unmount

3，vue3中v-if高于v-for的优先级

4，根实例的创建从new app变成了createApp方法

5，一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是vue类调用

6，新增了传送门teleport组件

7，template模板可以不包在一个根div里

三，响应式原理改成了用proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除的问题。也提升了响应式的效率

深入回答：vue3并不是完全抛弃了defineProperty，通过reactive定义的响应式数据使用proxy包装出来，而ref还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式

四：支持按需引入，可以更好tree-shaking

五，性能优化，增加了静态节点标记。会标记静态节点，不对静态节点进行比对。从而增加效率

深入回答：文本内容为变量会标记为1，属性为动态会标记为2，如果静态则不标记跳过比对

进阶回答点：

1，vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hook

2，v-model应用于组件时，监听的事件和传递的值改变

3，ts更好地配合

9.重绘和重排

什么是重绘和重排？-CSDN博客

10.浏览器输入url会发生什么

浏览器输入url到页面展示过程_怎么在地址栏输入中文变成网页-CSDN博客