前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)

防抖

节流

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

补充补充一个get和post在缓存方面的区别：

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：

创建map函数

遍历寻找

在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

具体实现步骤如下：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

常用的一般为三种 .clearfix , clear:both , overflow:hidden ;

比较好是 .clearfix ,伪元素万金油版本,后两者有局限性.

clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷

overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

缺点：

block 元素特点：

1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align

inline 元素特点

1.水平方向上根据 direction 依次布局

2.不会在元素前后进行换行

3.受 white-space 控制

4. margin/padding 在竖直方向上无效，水平方向上有效

5. width/height 属性对非替换行内元素无效，宽度由元素内容决定

6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效

GIF :

JPEG ：

PNG ：

七种数据类型

(ES6之前)其中5种为基本类型: string , number , boolean , null , undefined ,

ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值

Object 为引用类型(范围挺大),也包括数组、函数,

输出结果是：

工厂模式

简单的工厂模式可以理解为解决多个相似的问题;

单例模式

只能被实例化(构造函数给实例添加属性与方法)一次

沙箱模式

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

1.字面量

2.Object构造函数创建

3.使用工厂模式创建对象

4.使用构造函数创建对象

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡 。

获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。

我们发现Function的原型也是Function。

我们用图可以来明确这个关系：

这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。

则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:

这里我们可以来看出三者的关系:

在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。

在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？

函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。

call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。

除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。

bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。

如何实现一个 bind 函数

对于实现以下几个函数，可以从几个方面思考

如何实现一个call函数

如何实现一个apply函数

箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。

关于 let 的是否存在变量提升，我们何以用下面的例子来验证：

let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。

变量的赋值可以分为三个阶段：

关于 let 、 var 和 function ：

依次输出：undefined -> 10 -> 20

答案: D

colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。

1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined

undefined {n:2}

首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。

在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。

我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。

这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。

所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（'1'） 也返回 true 。

上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（'1'） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。

这题考察的是对象的键名的转换。

catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。

之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。

在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。

史上最全前端vue面试题！推荐收藏

1.为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3.vuex是什么？怎么使用？

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：

4.vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为

6.深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用

8. keep-alive: 组件缓存

router.js中:

meta: {keepAlive:true} // 需要被缓存

钩子执行顺序：created -> mounted -> actived

include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。

应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9.vue传值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值

$attrs a->b->c

$listeners 监听

12.vue事件修饰符有哪些？

.stop .prevent .self .once .passive .sync

13.箭头函数中的this？

不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数？

如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16.v-if 和 v-show区别？

v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；

v-if 是惰性的；v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？

npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;

特性：可以用变量，可以用混合器，可以嵌套等。

20.vue获取dom？

ref

21.vue初始化页面闪动问题？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23.vue路由传参，接收？

传： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和节流？

节流是一定时间内执行一次函数，多用在scroll事件上；

防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25.如何让scss只在当前组件中起作用？

2021上海中级前端面试常问问题整理

金九银十的时间到了，又是适合跳槽的时间，我之前是在郑州工作，然后九月来上海这边，面了一周左右，找到了还算满意的工作，现在整理一下面试中遇到的问题，给要在上海找工作的小伙伴一个参考，也给自己下次换工作做一个参考，哈哈

我是主要做vue的还没有学vue3所以面试中大多是vue2的问题，但是上海挺多公司开始转vue3了，这个还是要抓紧学习

先把问题记录下来，有时间会更新答案

在mvvm架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 View 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理

computed是vue的计算属性，可以用于一些复杂的运算，有缓存性，依赖的值不变的情况下不会重新计算

1.是计算值，

2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值

3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch是监听属性，没有缓存，deep(深度监听，用于数组，对象)，handler，immediate（立即执行）

1.是观察的动作，

2.应用：监听props，$emit或本组件的值执行异步操作

3.无缓存性，页面重新渲染时值不变化也会执行

组件实例对象data必须为函数，目的为了防止多个组件实例直接共用一个data，产生数据污染

在组件复用时，data作为函数，有自己的存储空间，每次都能返回一个新的data，其中一个组件中data的值变化，不会影响其他组件中的data

pc：elementui，avue，Ant Design of Vue

移动：vantui，mint ui

不能，v-for优先级比v-if高，放在一起使用的时候，v-if要在每个循环中创建销毁dom，浪费资源

onLoad(option)

上传--->提审--->发布

wx.navigateToMiniProgram

可配置跳转版本（开发版，体验版，正式版)

配置合法域名，新建web-view页面

wx-open-launch-weapp 小程序原始id

可参考

计算宽度不一致

ie：content+padding+border

标准：content

box-sizing：content-box ( 标准 )

box-sizing：border-box ( ie )

flex布局可以更好的适配移动端

1.flex布局

2.不知道子元素宽高：position:absolute;top:50%;left50%; transform:translate(-50%,-50%)

3.已知子元素的宽高：position:absolute;top:50%;left50%;margin-left:宽的一半,margin-top:高的一半

1.flex布局，左侧固定宽，右侧flex:1

2.左侧浮动，右侧margin-left:左侧的宽

3.左侧定宽，右侧绝对定位，left:左侧的宽

4.左侧绝对定位，右侧margin-left:左侧的宽

上下宽高固定，下用绝对定位定在底部，中间绝对定位，top：上高，bottom：下高；height：auto

相当于一个完全封闭的盒子，元素布局不受外界影响

生成BFC的条件：float(除none)、overflow、

可以解决浮动布局造成的父元素塌陷

解决外边距重合的问题

可以计算浮动的高，

前端面试题（十五）

已知高度和宽度的元素：

设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

未知高度和宽度的元素：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%);

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%);

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。

for of：

支持 return ，并且是值 of 数组（不能遍历对象）

1. 可以避免所有 for-in 循环的陷阱

2. 不同于 forEach()，可以使用 break, continue 和 return

3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象

4. 它也支持字符串的遍历

5. for-of 并不适用于处理原有的原生对象

for in：

forEach：

assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

生命周期函数： activated（ 组件激活时调用 ）、deactivated（ 组件停用时调用 ）

常见的使用场景可以分为三类:

当频繁执行条件时，不适合使用 v-if ,用 v-show ;

反之执行条件的次数很少，使用 v-if 即可。

v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是编辑器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，

2021-11-10.Vue前端面试题及答案

const vm = new Vue({

...

methods: {

handlerEvent(event) {

console.log(event) // 鼠标点击时，获取到事件对象

}

}

})

1、如果只是事件函数的调用，函数名称后面不要添加括号

好处：函数执行时，第一个形式参数会被系统自动注入

一个事件对象，提供给函数使用

@click="handlerEvent"

2、如果事件函数调用执行时，需要传递参数，函数名称后面

必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)

@click="handlerEvent($event)"

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制

原生JS中通过兼容性语法阻止事件冒泡

event.stopPropagation?event.stopPropagation():event.cancelBubble=true

Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为

固定语法：标签对象的事件属性上，添加 @事件对象.stop="处理函数"

.self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！

.lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率！

Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的操作机制就是数据双向绑定机制；Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的！

数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，我们可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染！