20230626前端大佬的面试筛出的问题，做了份答案。希望各位能用的上。顺祝各位早日上岸。

正则

涉及正则的 函数

1. search(yourRegexpOrString);

    定义：检索字符串中与指定的子字符串或正则表达式相匹配的子字符串。

    其他说明：该方法将忽略"g"标志和正则对象的lastIndex属性（即总是从开头找起），返回找到的第一个字符的位置，如果未找到返回-1。

2. match(yourRegexpOrString);

    定义：在字符串内查找一个或多个与正则表达式匹配的字符串，返回一个对象。（忽略laseIndex属性）

    其他说明：若没开启"g"标志，将只查找第一个匹配的字符串，返回一个对象，包含下标0、index、input，其中下标0等价于index，input是String的引用；开启"g"，返回一个数组，数组的length是匹配的字符串个数，每个元素是每个匹配的起始字符位置。

3. replace(yourRegexpOrString,placementString);

    定义：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

    其他说明：如果没有"g"标志只会替换一次，并且如果参数是字符串而不是正则对象始终替换一次。

4. split(yourRegexpOrString[,howMany]);

    定义：把一个字符串分割成字符串值的数组。

    其他说明：是arr.join(separatorString)反操作，如果传入""，则每个字符都将会被分隔到数组。howMany指定返回数组的个数。

HTML、CSS、JS

1、浏览器页面渲染流程，说完后会问到重排重绘区别

1.1 浏览器页面渲染流程

0. 渲染引擎首先通过网络获得所请求文档的内容
1. 解析HTML文件，构建 DOM Tree
2. 解析CSS，构建 CSSOM Tree(CSS规则树)
3. 将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)
4. reflow(重排)：根据Render tree进行节点信息计算（Layout）
5. repaint(重绘)：根据计算好的信息绘制整个页面（Painting）

1.2 重排重绘区别

1.2.1 定义

重绘: 重绘是一个元素外观的改变导致的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素新的属性呈现新的外观；
重排：重排是DOM元素被js触发某种变化，渲染树需要重新计算。浏览器对DOM 树进行重新排列；这便是重排。排列完成之后重新绘制元素则是重绘。

1.2.2 操作

常见的触发重排的操作：

DOM元素的几何属性变化

DOM树的结构变化（例如节点的增减、移动）

获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）

改变元素的一些样式（例如调整浏览器窗口大小）

1.2.2 两者的区别

重绘不会带来重新布局,并不一定伴随着重排.

1.3 为什么要使用 虚拟 DOM

1、操作 DOM 会导致浏览器频繁的出现页面的回流和重绘，⾮常耗性能
2、手动操作 DOM 还是比较麻烦的，要考虑浏览器兼容性问题

3、相对于 DOM对象，js对象处理起来更快，而且更简单，通过 diff算法 对比 新旧vdom 之间的差异，可以 批量的、最⼩化的执行 dom操作，从而提高性能
4、虚拟DOM 进行频繁修改，最终一次性比较并修改 真实DOM 中需要改的部分，最后在 真实DOM中 进行排版与重绘，减少过多 DOM节点 回流与重绘损耗
5、使用 虚拟DOM 改变了当前的状态不需要立即的去更新 DOM 而且更新的内容进行更新，对于没有改变的内容不做任何操作，通过前后两次差异进行比较
6、虚拟DOM 可以实现跨平台渲染，服务器渲染 、小程序、原生应用都使用了 虚拟DOM
7、虚拟 DOM 可以维护程序的状态，跟踪上一次的状态

总之: 
虚拟DOM 就是为了解决浏览器性能问题而被设计出来的
若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM 而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中
最终将这个 JS 对象一次性 attch 到 DOM 树上，再进行后续操作，避免大量无谓的计算量

所以:
用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上
操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制

2、CSS动画，transform与animate的区别等

2.1 动画状态不同

1.transform过渡只有开始和结束两种状态；
2.animation有开始，过程，结束多种状态；

2.2 动画触发方式不同:

1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 。
2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。

2.3 功能点（属性）不同

animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。

2.4 transform和animation的相同点

1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。

2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。

3、上下居中、flex、栅格化、定位、BFC及应用、主题切换

3.1 水平居中

1. 水平居中：
    text-align:center

2. flex 布局

3.1 上下居中

1. 上下居中文字
    line-height: 容器高度

2. 非文字的上下居中
    top: 50%
    margin: 容器一半高度 0 0 容器一半宽度;

3. 使用浮动
    float:left;
    clear:both;

4. 上下垂直居中
    padding:10px 0

5. flex
    display:flex;
    align-items:center;

6. transform：translate（）；加一半减一半居中 与第二条相似
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

3.2 Grid

3.2 Flex

3.2.1 定义

flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。
flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 

3.2.2 总结

用于容器的属性:
    display：flex 指定flex布局                       

    flex-direction 主轴的排序（主轴方向），默认值row                        

    flex-warp：nowarp 项目在容器中是否换行显示，常用之warp                        

    justify-content 主轴的对齐方式                        

    align-items交叉轴的对齐方式（一般用于单轴线）                        

    align-content多轴线对齐方式

用于项目的属性:
    order：0项目的排序                       

    flex-grow：0放大规则，默认0，不放大                      

    flex-shrink：1 收缩规则，默认1，缩小；0，不缩小。                        

    flex-basis：200px 指定主轴长度尺寸，不允许负值，默认值auto，优先级比主轴的尺寸高    

    flex集合写法，放大，缩小，初始尺寸，默认0  1  auto。flex：1指放大，flex：0  0不放大不缩小    

3.3 栅格化

1. 容器
2. 行
3. 列

3.4 定位

一、静态定位：static
    静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。

    特点：按照标准流特性摆放位置，它没有边偏移,在布局时我们几乎不用。

二、相对定位：relative
    特点：相对于自己原来在标准流中位置来移动的，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

三、绝对定位：absolute
    特点：绝对定位是元素依据最近的已经定位的父级元素来进行移动，不占用原来在标准流的位置

    若父元素没有定位，则以浏览器为准定位(Document 文档)

四、固定定位：fixed
    固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形那么固定定位就类似于正方形

    特点：
        1. 不占位置
        2、跟父元素没有任何关系，单独设置位置
        3、不随滚动条滚动

五、定位要点——子绝父相
    子级元素是绝对定位，父级元素要用相对定位，即所谓的子绝父相

3.5 BFC及应用

3.5.1 BFC

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display 为 inline-block、table-cells、flex、grid...
overflow 值不为 visible 的块元素（hidden、auto、scroll）

3.5.2 应用

1. 可以避免外边距重叠 （ 把两个div包裹在两个不同container容器中，用over-hidden触发container的BFC）
2. 清除浮动
2. 避免重叠

3.6 主题切换

方法1：定义全局的CSS变量
方法2：切换已定义好的css文件
方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)

4、深浅拷贝、promise、防抖节流、es6新特性、事件循环、websocket长链接、闭包、数据存储、es6数组新方法 等这些都是目前js的基本问题，一般公司都会拿出来几个

4.1 深浅拷贝

1. 浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址
2. 深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
手搓深拷贝-递归、type of 判定引用数据类型、for循环、回调function

function deepClone(obj) {
    //判断obj是数组还是对象.
    var objClone = Array.isArray(obj) ? [] : {};
    //进行深拷贝的不能为空，并且是对象或者是"object"
    if (obj && typeof obj === "object") {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
                objClone[key] = deepClone(obj[key]);
            } else {
                objClone[key] = obj[key];
            }
        }
    }
    }
    return objClone;
}

4.2 promise

4.2.1 定义

是异步编程的一种解决方案，注意一下三点
1. 链式操作减低了编码难度
2. 代码可读性明显增强

3. 状态一旦修改将不或改变。（即 resolve() reject()，先执行先生效，后续不改变）

4.2.1 状态

. pending（进行中）
. fulfilled（已成功）
. rejected（已失败）

4.2.2 实例

. then()
. catch()
. finally()

4.2.3 构造方法

. all()  当所有Promise任务是resolve结果才是resolve--也就是执行then里面的回调，只要有一个任务reject则就会执行catch里面的回调，执行时间是所有任务中执行时间最长的那个任务所对应的时间
. race() 执行结果就是最先改变状态的promise任务的状态，无论是resolve还是reject，那个先改变状态，整个任务的执行时间就是对应的那个成功任务所对应的时间
. any() 捕获任意一个先成功执行的Promise任务，那个先成功，整个任务的执行时间就是对应的那个成功任务所对应的时间
. allSettled() allSettled方法接收一组promise实例作为参数，包装成一个新的实例。只有等所有的实例都返回结果，才会结束。返回的结果不论成功失败，状态总是fulfilled，不会是失败。
. try()
. reject()
. resolve()
. catch()

4.3 防抖节流

定义
    节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。场景：验证码，防点击按钮，王者技能
    防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。场景：获取输入框内容，王者回城

一个经典的比喻:
    想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
    假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
    电梯第一个人进来后，15秒后准时运送一次，这是节流
    电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

4.3.1 防抖

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

4.3.2 节流

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

4.4 es6新特性

4.5 前端常用的存储数据的方式有2种

1.本地存储：(localstorage、sessionstorage、cookie)

2.Vuex存储：(state、getter、mutations、action、modules)

1. vuex存储在内存；
2. localstorage（本地存储）则以文件的方式存储在本地,永久保存；
3. sessionstorage( 会话存储 ) ,临时保存。
4. localStorage和sessionStorage只能存储字符串类型，

( 对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。)

4.5.1 Vuex和本地存储的区别：

1、实质的区别
vuex存的是状态，存储在内存，localstorage是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地

2、应用场景
vuex用于组件之间的传值，localstorage则主要用于页面之间的传值

3、永久性
当刷新页面时，vuex存储的值会丢失，localstorage不会

4、响应式

localstorage无法做到响应式，vuex可以绑定数据响应式。

使用vuex容器存储数据时，可以配合localstorage（sessionStorage）来存储到本地，实现持久化数据

注意： localStorage.setItem(key, String), set的值必须是字符串，如果你的数据是对象都需要先行转换（JSON.stringify(xxx)）,取出时localStorage.getItem(key)，取出后的字符串可以通过JSON.parse(xxx) 转回对象。

4.5.2 Cookie，localStorage，sessionStorage区别？

特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右 一般为5MB 与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

4.6 事件循环

4.6.1 Event Loop

 是JavaScript或Node为解决单线程代码执行不阻塞主进程一种机制

4.6.2 同步任务、异步任务（宏任务、微任务）

整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

同步任务会直接进入主线程依次执行；

异步任务会再分为宏任务(进入宏任务队列) 和 微任务(进入微任务队列)。

当主线程内的任务执行完毕（主线程为空时），会检查微任务的任务队列，如果有任务，就进入主线程全部执行，如果没有就从宏任务队列读取下一个宏任务执行；

每执行完一个宏任务就清空一次微任务队列，此过程会不断重复，这就是Event Loop；

4.6.3 栗子

new Promise((res)=>{
    console.log(1)
    setTimeout(()=>{
        console.log(2)
    })
    res()
}).then(()=>{
    console.log(3)
})

//输出结果： 1 -> 3 -> 2

// setTimeout的定时器回调函数是异步执行的，而Promise中的resolve函数res()是同步执行的。
// 当Promise的状态变为resolved后，.then中的回调函数会被添加到微任务队列中等待执行。由于
// 微任务队列中的任务会在主线程的同步任务执行完毕后立即执行，所以数字3会在数字2之前被打印出来。

5、还有一些更简单的比如基本数据类型，let const var区别（或者说变量提升），改变this指针，跨域，作用域等等

5.1 基本数据类型

1. 引用数据类型 Function、Array、Object
2. 基本数据类型 Number、String、Boolean、Undefined、null、symbol

3. Undefined、Null 的区别
主要区别在于undefined表示尚未初始化的变量的值,而null表示该变量有意缺少对象指向。

5.2 let const var区别

var声明的变量既是全局变量，变量提升，允许重复；
let命令所在的代码块内有效，块级作用域，不允许重复；
const声明一个只读的常量，块级作用域，不允许重复，不允许修改；

变量提升： 变量提升的作用是在代码执行之前提前声明变量，避免变量在代码执行时被意外修改

5.2 修改 this 指向

call  参数列表 立即执行
apply 参数数组 立即执行
bind  参数列表 返回函数

5.3 跨域

1. devServer proxy
2. nginx 反向代理

5.4 作用域

1. 全局作用域 var
2. 函数作用域
3. 块级作用域 let  const

6 function 与 箭头函数 区别

1. 字面意思：function  箭头
2. this指向：function的 this指向调用该函数的对象，如果没有直接指定就是window；箭头函数不会创建自己的 this ，始终指向箭头函数声明时所在作用域下的 this 值，也就是从箭头函数所在作用域的父层继承this。
3. 箭头函数：没有constructor, 不能用作构造器（不能被new）
4. 箭头函数：没有__proto__，
5. 箭头函数：不绑定arguments。普通函数中可以使用 arguments 对象获取函数的所有参数。
6. apply、call、bind中使用箭头函数，不能改变this指向

VUE相关

1、vue2与vue3区别以及vue3的组合式api好处

v2/v3区别

1.数据劫持方式不同

1.vue2的底层原理是基于 Object.defineProperty封装的一种发布订阅模式，利用它的get和set方法对对象的属性进行监听
2.vue3是基于es6的proxy封装的发布订阅模式

数据劫持方式的不同是的v2和v3有何区别
Object.defineProperty只能监听对象的属性并且不能监听动态添加的属性。es6的proxy可以监听一切。

2.v-if和 v-for优先级问题 (不会就别说这条)

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯

3.vue3中废除了filter

4.生命周期钩子函数的不同

v2 beforeDestroy 废弃了 v3 beforeUnmount
v2 destroyed 废弃了 v3 用 unmounted

6.router (不会就别说这条)

7.API

vue2是选项api 需要什么选项就直接写什么选项    vue3是组合api 所有的代码都写在setup里边  需要什么就要import引入什么

8.Vue3默认使用懒加载

9.重构虚拟DOM

2、v2/v3生命周期、watch与computed区别、slot插槽、v2/v3的vif与vfor优先级区别、nextTick

2.4 nexTick

2.4.1 定义

在下次 DOM 更新循环结束之后执行延迟回调。

2.4.2 场景

1. 在 Vue 的数据变化后，想要执行一些操作，确保操作在 DOM 更新后执行，例如在数据变化后操作 DOM 元素、触发子组件的方法等。
2. 在 Vue 的生命周期钩子函数或自定义的方法中，需要等待 DOM 更新完成后执行一些操作。

3、权限控制 —— 这问题很多，一般都是问按钮权限的控制，我一般都是答全局指令

钩子函数: 指令定义函数提供了几个钩子函数（可选）：

    bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

    inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

    update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

    unbind: 只调用一次， 指令与元素解绑时调用。

4、axios封装、用过的ui组件，用过的echarts图表等

5、v2/v3 diff算法、v2/v3 双向绑定原理、动态添加路由（addRoute，也是和权限相关一起问）

5.1 diff 算法

5.1.1 diff定义

diff 算法是一种通过同层的树节点进行比较的高效算法

虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

5.1.1 diff整体策略为：深度优先，同层比较

5.2 vue双向数据绑定

vue双向数据绑定是 通过 `数据劫持` 并结合 `发布-订阅模式` 的方法来实现的。 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

示例：

<input type="text">
  <p></p>
  <script>
    window.onload = function () {
      const input = document.querySelector('input')   // 发布者
      const p = document.querySelector('p')   // 订阅者
      window.data = ''  // 要双向绑定的数据

      Object.defineProperty(window, 'data', {
        get: function() {
          return data
        },
        set: function(value) {  // 数据劫持，订阅者函数，更新 DOM
          p.innerText = value
        }
      })

      input.onkeyup = (e) => {   // onkeyuo与setter 共同形成事件中心 broker
        window.data = input.value // 发布数据
      }
    }
  </script>

6、组件通信 —- 基本必问

7、性能优化 —- 基本必问

1.cdn、懒加载、各类loader压缩、gzip压缩、精灵图、icon转font、接口合并等等

8、xxs攻击以及预防（这个问题济南本地的公司没有问的，只有啥啥济南分公司可能问道）

写在最后的话

鸡儿的济南今年真热。
写的不全凑活着看吧，这次收获颇丰。
面试题仓库地址自己fork看着改就行，个人学习系列 20230626面试题 https://gitee.com/yiyanghuayigai/personal-learning-notes.git
先声明下不是我自己的库，我拿别人的库改的。原始库：https://github.com/febobo/web-interview
被人问的最多的就是项目经历，还好出彩的地方能说的过去。面试题要背，项目经历也要梳理一下。比如说，权限控制等等啥的，以及你做过的出彩的技术之处和项目经历。
学历加专业筛人太狠了，有公司现在都招聘985211的。
市场好转后也不知道从北上广回来的铁子们，还要不要回去？