开搞，裸辞半年后2024复习面试之路（今年难搞啊！）

小三_
92 阅读7分钟

一、 介绍一下自己？

突出自己的优势

二、 介绍一下你最近的项目？

哪个拿手就说哪个

三、 说一下项目遇到的难点，如何解决？

哪个拿手就说哪个

四、 你为什么离开公司？ xxx

五、 你是如何优化你的项目的？

  1. 优化代码
  2. 性能优化
  3. 项目文件清晰归类

六、 从输入url到页面加载的全过程？

输入URL —— 浏览器预解析 — 建立tcp三次连接 — 发送HTTP请求 — 浏览器解析渲染页

七、 说一下http缓存？浏览器缓存？

  1. http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。 HTTP 1.0协议中的。 简而言之，就是告诉浏览器在约定的这个时间前，可以直接从缓存中获取资源（representations），而无需跑到服务器去获取。

  2. 浏览器缓存：在浏览器中把访问过的页面资源进行缓存，备份。

    （1）页面缓存：在本地调试只能手动清除缓存，可以通过浏览器设置清楚 （2）资源缓存：在请求一些静态资源，可以在url后面加个时间戳

    缓存机制形成:

    （1） cookie：存储量小，只有4Kb；一旦创建成功，无法修改；无法跨域； 应用场景：用来统计页面的访问量

    （2）localStorage:存储量较大，5MB；可持久性存储数据，数据不会随页面关闭而消失，除非手动清除

    缺点：不兼容IE8以下浏览器；浏览器设置为隐私模式将无法获取；同源策略限制； 应用场景：配置个人设置（比如肤色，字体）；保存一些不经常变动的个人信息或用户浏览器信息

    （3）sessionStorage:用于临时保存同一窗口的数据，刷新页面时不会删除，关闭窗口后将会删除这些数据； 应用场景：网站的游客登录；临时性的浏览记录信息

八、 什么是跨域，如何解决跨域？

在浏览器中，当前页面与请求页面的域名，协议，端口不一致会导致跨域，这是浏览器为了安全限制跨域资源访问，阻止恶意跨站点攻击。

解决：在vue.config.js文件中的proxy代理属性配置跨域或者叫后台处理

九、 flex的属性都有哪些？

  1. flex-direction(设置主轴方向)
  2. flex-warp(设置子元素是否换行)
  3. justify-concent(设置主轴的子元素排列方式)
  4. align-items(设置侧轴的子元素排列方式，单行)
  5. align-concent(设置侧轴的子元素排列方式，多行)

十、 打断forEach的循环？

在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，效果与 for 中 continue 一样，但是该方法无法一次结束所有循环

十一、 什么是进程，线程，队列，栈，宏任务，微任务？

  1. 队列：限定只能在表的一端插入和另一端删除操作的线性表（如unshift，shift）
  2. 栈：限定只能在表的一端插入和删除的线性表（如push，pop）
  3. 进程与线程：一个进程会有多个线程（如渲染线程，js引擎线程，HTTP请求线程等）。当发起一个请求，其实就是创建一个线程，当请求结束后，该线程可能就会销毁。js是单线程。
  4. 宏任务：异步AJAX请求，settimeOut，setInterval，文件操作等
  5. 微任务：.then，.catch，.finally，.nexTick
  6. 同步任务：new promise

(注意：同步任务 > 微任务 > 宏任务)*

十二、 常用的伪元素？

after，before

十三、 闭包是什么？如何实现？

闭包是指有权访问另一个函数作用域中的变量的函数，会形成一个不销毁的私有作用域。

function fun(){
    var a= 1,b=2
    funtcion colse(){
        return a+b
    }
    return colse
}

十四、 v-if和v-show的区别？

  1. v-if：条件渲染。视图显示隐藏，动态删除dom元素，v-show：条件展示只是设置display:none来进行视图显示隐藏，dom元素还存在
  2. v-if有更高的切换开销，v-show有更高的初始渲染开锁
  3. v-if适合运营条件不大可能改变，v-show适合频繁切换

十五、 0.1+0.2等于0.3吗？为什么？如何解决？

不等于。在计算机中是浮点小数，转换成二进制会出现无线循环导致精度损失

解决：使用toFixed()

十六、 如何判断是否是数组？是否是对象？

Array.isArray，Object.prototype.toString，typeof

十七、 var,let const之间的区别？

  1. var: 声明的变量属于函数作用域，可以重复声明，存在变量提升的问题；；
  2. let: 声明的变量属于块级作用域，不能重复声明，不存在变量提升的问题；
  3. const: 声明的变量也属于块级作用域，不能重复声明，，也不能修改值，除非是对象的属性或数组的内容。

十八、 常见的状态码？

  1. 200 服务器请求成功
  2. 401 服务器未授权登入
  3. 403 服务器拒绝请求
  4. 404 服务器找不到请求页面
  5. 500 服务器错误
  6. 301 永久重定向
  7. 302 暂时重定向

十九、 说一下seestionStroage,localstorage和cookie之间的区别？

  1. cookie：存储量小，只有4Kb；一旦创建成功，无法修改；无法跨域；

    应用场景：用来统计页面的访问量

  2. localStorage:存储量较大，5MB；可持久性存储数据，数据不会随页面关闭而消失，除非手动清除

    缺点：不兼容IE8以下浏览器；浏览器设置为隐私模式将无法获取；同源策略限制；

    应用场景：配置个人设置（比如肤色，字体）；保存一些不经常变动的个人信息或用户浏览器信息

  3. sessionStorage:用于临时保存同一窗口的数据，刷新页面时不会删除，关闭窗口后将会删除这些数据；

    应用场景：网站的游客登录；临时性的浏览记录信息

二十、 浏览器如何渲染页面的？

解析html构建dom树 —— 解析css构建cssom树 —— 构建渲染树 —— 布局 —— 绘制 —— 页面合成

二十一、 vue的响应式原理，双向绑定原理？

  1. 响应式：vue的响应式原理是基于数据劫持的，使用Object.defineProperty方法去劫持对象的getter和setter属性访问。这些属性被访问和修改时可以触发相对应的更新操作
  2. 双向绑定：利用了vue的响应式原理。vue实现双向数据绑定方式使用v-modle。然后通过触发对应的数据修改操作实现数据更新

二十二、 vue2和vue3的区别？

  1. 源码层面：

    vue2: javascript使用flow进行类型检测

    vue3： 使用typescript进行重构，更加友好的支持typescript

  2. 性能层面：

    vue2: 使用object.defineProperty来劫持数据的setter和getter方法，对象改变需要借助api去深度监听

  3. api方面：

    （1）vue2只能支持一个根节点，vue3可以支持多个根节点

    （2）vue3当内部有异步函数需要使用await的时候不需要在setup前面加asyc

    （3）生命周期：

    vue2: beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroty，destrotd

    vue3: setup，onBeforeMount， onMounted，onBefroeUptate， onUpdated，onBefroeUnmount，onUnmount

（注意：vue3详解）

二十三、 es6的新特性？

let、const，箭头函数，模板字符串，结构赋值，模块化（import，export），promise等

（注意：promise详解） 二十四、 vue的生命周期？

beforeCreate，created，beforeMount，mounted，beforeUpdata，updata，beforeDestroy，destroed

二十五、 vuex的属性？

stae，getter，actions，muations，modules

（注意：vuex详解）

二十六、 如何封装组件？

把相同的方法，页面功能封装成一个，用oop方式调用

二十七、 组件通讯方法常见的有那些？

emit，props，emit，props，ref，$bus

二十八、 nextTick的作用？

延迟回调，在dom元素渲染后再执行回调函数

二十九、 vue的缺点？

  1. 首屏加载速度慢
  2. 在函数对象新增删除属性时，需要手动更新

三十、 iframe使用的场景有哪些？

微前端，在大型的多模块合作项目

三十一、 对MVC和MVVM的理解？

  1. MVC:
  • model：模型层，后端，包含了所有数据逻辑
  • view：视图层，前端界面或 GUI
  • controller：控制层，控制数据如何展示

控制层负责编写接口并且调用逻辑方法，调用方法后返回数据给视图层，视图层获取到数据后可以进行对数据做动态渲染。

  1. MVVM：
  • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
  • View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
  • ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的

三十二、 webpack是怎么打包的？

  1. 安装 webpack 和相关依赖
  2. 编写 webpack 配置文件，指定入口文件和输出文件的路径
  3. 在命令行中执行 webpack 命令，或者使用 npm 脚本
  4. 查看打包后的文件，是否符合预期 （注意：webpack详解）

三十三、 BFC是什么？

BFC全称：“Block Formatting Context”， 名为 "块级格式化上下文"。

三十四、 如何更新对象类型的数组？

$set

三十五、 数据类型有哪些？

  1. 基本数据类型：unddfined、null、boolean、string、number、symbol、bight
  2. 引用数据类型：object（数组，函数、对象）
avatar
文章
阅读
粉丝