2022年最新前端面试题、高频面试题、面试题总结

文章目录

html面试题
js面试题
css面试题
vue面试题
react面试题
浏览器、项目优化、等其他类型高频面试题

html面试题

Doctype 作用

声明文档类型

HTML5 新增的内容有哪些

新增语义化、标签、新增表单类型、表单元素、表单属性、表单事件、多媒体标签

Html5 新增的语义化标签有哪些

语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护Header 页面头部 main 页面主要内容 footer 页面底部Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容Section 相当于 div figure 加载独立内容（上图下字）figcaption figure 的标题 Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须配合 open 属性） Embed 加载插件的标签 video 加载视频audio 加载音频（支持格式ogg，mp3，wav）

对 HTML 语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav 表示导航条，类似的还有article、header、footer等等标签。

行内元素/块级元素有哪些

行内元素：相邻的行内元素会排列在同一行，不会独占一行设置宽高无效 span
块级元素：会独占一行可以设置宽高等属性div
可变元素：根据上下文预警决定该元素为块元素还是内联元素
块级元素：div h1-h6 hr p ul ol table address blockquotedir frommenu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins

视频/音频标签的使用

视频： <video src=“”>
视频标签属性：
src 需要播放的视频地址
width/height 设置播放视频的宽高，和img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了autoplay属性，perload 属性会失效。
muted 静音模式
音频:
<source src=”" 11/1 type=“” />
音频属性和视频属性差不多，不过宽高和poster 属性不能用。

说一下 HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

js面试题

ES6 新特性

const 和 let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of 和 for…in、ES6 中的类

Let 与 var 与 const 的区别

Var 声明的变量会挂载在 window 上，而let 和const 声明的变量不会
Var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以声明同名变量，let 和const、不可以
Let 和 const 声明会形成块级作用域 Let 暂存死区
Const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性

Js 基本数据类型有哪些字符串

String 数值 Number 布尔 boolean null undefined对象数组

数组方法有哪些请简述

push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值 start 到索引值end 的数组，不包含end索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无 return 即使有return，也不会返回任何值，并且会影响原来的数组 a
rr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
arr.filter(callback) 过滤数组，返回一个满足要求的数组

普通函数和构造函数的区别

1.构造函数也是一个普通函数，创建方式和普通函数一样，但是构造函数习惯上首字母大写
2.调用方式不一样，普通函数直接调用，构造函数要用关键字new来调用
3.调用时，构造函数内部会创建一个新对象，就是实例，普通函数不会创建新对象
4.构造函数内部的 this 指向实例，普通函数内部的this 指向调用函数的对象（如果没有对象调用，默认为 window）
5.构造函数默认的返回值是创建的对象（也就是实例），普通函数的返回值由 return 语句决定 6.构造函数的函数名与类名相同

Ajax 如何使用一个完整的 AJAX 请求包括五个步骤：

创建 XMLHTTPRequest 对象
使用 open 方法创建 http 请求，并设置请求地址xhr.open（get/post，url，async，true（异步），false（同步））经常
使用前三个参数
设置发送的数据，用 send 发送请求
注册事件（给 ajax 设置事件）
获取响应并更新页面

如何判断一个数据是 NaN

NaN 非数字但是用 typeof 检测是 number 类型
利用 NaN 的定义用 typeof 判断是否为number 类型并且判断是否满足 isnan
利用 NaN 是唯一一个不等于任何自身的特点n！== n 利用 ES6 中提供的 Object.is()方法（判断两个值是否相等）n==nan
Js 中 null 与 undefined 区别
相同点：用 if 判断时，两者都会被转换成false
不同点： number 转换的值不同 number（null）为0 number（undefined）为 NaN Null 表示一个值被定义了，但是这个值是空值Undefined 变量声明但未赋值

闭包是什么？有什么特性？对页面会有什么影响

闭包可以简单理解成：
定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
特点：
1.函数嵌套函数。
2.函数内部可以引用外部的参数和变量。
3.参数和变量不会被垃圾回收机制回收。
使用：
1.读取函数内部的变量；
2.这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
优点：
1:变量长期驻扎在内存中；
2:避免全局变量的污染；
3:私有成员的存在；缺点：会造成内存泄露

Js 中常见的内存泄漏

1.意外的全局变量
2.被遗忘的计时器或回调函数
3.脱离 DOM 的引用
4.闭包

事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）

JS 高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
事件委托，称事件代理，是 js 中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，事件委托的原理是 DOM 元素的事件冒泡

什么是事件冒泡？

一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段：
捕获阶段 、从 window 对象传导到目标节点（从外到里），这个阶段不会响应任何事件
目标阶段、在目标节点上触发
冒泡阶段、从目标节点传导回 window 对象（从里到外）
事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层

本地存储与 cookie 的区别

cookie
cookie 确实非常小，它的大小限制为 4KB 左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在，Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持IE6+，那以 userData 作为你方案是种不错的选择。
sessionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道Session这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
区别
1.cookie在浏览器与服务器之间来回传递。sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
2.cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
3.数据有效期不同：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效。
localStorage 始终有效，长期保存。
4.存储大小也不同：
cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
5.作用域不用：
sessionStorage不在不同的浏览器窗口中共享；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的；
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

什么是面向对象请简述

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，这是对数据一种优化，操作起来更加的方便，简化了过程。
Js 本身是没有 class 类型的，但是每个函数都有一个prototype属性，prototype 指向一个对象，当函数作为构造函数时，prototype就起到类似于 class 的作用
面向对象有三个特点：
封装（隐藏对象的属性和实现细节，对外提供公共访问方式）
继承（提高代码复用性，继承是多态的前提）
多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）

请简述原型/原型链/（原型）继承

什么是原型：
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有 prototype。
什么是原型链：
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object 时，就没有_proto_指向了。
因为_proto_实质找的是 prototype，所以我们只要找这个链条上的构造函数的 prototype。其中 Object.prototype 是没有_proto_属性的，它==null。
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象（1）等于另一个原型对象的实例（2）, 此时原型对象（2）将包含一个指向原型对象（1）的指针，再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念
（原型）继承
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(proto)。如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另一个原型的指针(proto)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。也叫原型链原型继承是 js 的一种继承方式，原型链作为实现继承的主要方法,其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法,原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方式，就叫做原型继承.

Promise 的理解

什么是 Promise
我们都知道，Promise 是承诺的意思，承诺它过一段时间会给你一个结果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。从语法上讲，promise 是一个对象，从它可以获取异步操作的消息；
promise 有三种状态
pending 初始状态也叫等待状态，fulfiled成功状态，rejected 失败状态；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
Promise 的两个特点
1、Promise 对象的状态不受外界影响 2、Promise 的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，
Promise 的三个缺点
无法取消 Promise,一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise 内部抛出的错误，不会反映到外部
当处于 pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成

我们用 Promise 来解决什么问题？

promise 是用来解决两个问题的：
1.回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
2.promise 可以支持多并发的请求，获取并发请求中的数据
这个 promise 可以解决异步的问题，本身不能说promise 是异步的

请简述 async 的用法

Async 就是 generation 和 promise 的语法糖，async 就是将generator的*换成 async，将 yiled 换成 await
函数前必须加一个 async，异步操作方法前加一个await 关键字，意思就是等一下，执行完了再继续走，注意：await 只能在async 函数中运行，否则会报错
Promise 如果返回的是一个错误的结果，如果没有做异常处理，就会报错，所以用 try…catch 捕获一下异常就可以了

get 请求传参长度的误区

我们经常说 get 请求参数的大小存在限制，而post 请求的参数大小是无限制的。实际上 HTTP 协议从未规定GET/POST的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或web服务器，浏览器或 web 服务器限制了 url 的长度。
为了明确这个概念，我们必须再次强调下面几点:
1.HTTP 协议未规定 GET 和 POST 的长度限制
2.GET 的最大长度显示是因为浏览器和 web 服务器限制了URI 的长度不同的浏览器和 WEB 服务器，限制的最大长度不一样要支持IE，则最大长度为 2083byte，若只支持Chrome，则最大长度8182byte。

** get 和 post 请求在缓存方面的区别**

post/get 的请求区别
1.GET把参数包含在URL中，POST通过request body传递参数。
2.GET在浏览器回退时是无害的，而POST会再次提交请求。
3.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
4.GET请求在URL中传送的参数是有长度限制的，而POST没有。
5.GET比POST更不安全，因为参数直接暴露在URL上。
get 和 post 在缓存方面的区别：
get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

什么是闭包

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放

说说前端中的事件流

HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点击事件 onclick、页面的滚动事件 onscroll 等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流： 事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个阶段。
事件捕获阶段处于目标阶段事件冒泡阶段
addEventListener： addEventListener 是 DOM2 级事件新增的指定事件处理程序的操作，这个方法接收 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
IE 只支持事件冒泡。

说一下事件委托

简介：事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。
举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在ul 父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

JS 的 new 操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

通过 apply 和 call 改变函数的 this 指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1,arg2…这种形式。
通过 bind 改变 this 作用域会返回一个新的函数，这个函数不会马上执行。

JS 的各种位置，比 clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop 的区别？

clientHeight：表示的是可视区域的高度，不包含 border 和滚动条
offsetHeight：表示可视区域的高度，包含了 border 和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框 border 的厚度，在未指定的情况下一般为
0scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属
性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。

JS 中的垃圾回收机制

必要性：
由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
这段话解释了为什么需要系统需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript 的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：
var a=“hello world”; var b=“world”;
var a=b;
//这时，会释放掉"hello world"，释放内存以便再引用垃圾回收的方法：
标记清除、计数引用。
标记清除
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。
垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。
引用计数法
另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值没引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为 1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为 0 的这些值。
用引用计数法会存在内存泄露，下面来看原因：
function problem() {
var objA = new Object(); var objB = new Object();
objA.someOtherObject = objB; objB.anotherObject = objA;
}
在这个例子里面，objA 和 objB 通过各自的属性相互引用，这样的话，两个对象的引用次数都为 2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为 0，这样的相互引用如果大量存在就会导致内存泄露。
特别是在 DOM 对象中，也容易存在这种问题： var
element=document.getElementById （ ’‘ ）； var myObj=new
Object();
myObj.element=element; element.someObject=myObj;
这样就不会有垃圾回收的过程。

css面试题

Css3 新增的特性

边框：
border-radius：添加圆角边框
border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影）
border-image：设置边框图像
border-image-source：边框图片的路径
border-image-slice：图片边框向内偏移
border-image-width：图片边框的宽度
border-image-outset：边框图像区域超出边框的量
border-image-repeat：图像边框是否平铺（repeat 平铺round铺满stretch 拉伸）
背景：
Background-size：背景图片尺寸
Background-origin：规定background-position属性相对于什么位置定位
Background-clip：规定背景的绘制区域（padding-box，border-box，content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（x，y）指定元素在二维空间的位移scale（n）定义缩放转换
3D 转换方法：
Perspective（n）为 3D 转换 translate rotate scale
过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

请简述 css 盒子模型

一个 css 盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。
默认情况下，盒子的width 和 height 属性只是设置 content（内容）的宽和高。
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框。
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框。

清除浮动的方式有哪些？请说出各自的优点

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
1：给父元素单独定义高度
优点：快速简单，代码少缺点：无法进行响应式布局
2：父级定义 overflow：hidden；zoom：1（针对ie6的兼容）
优点：简单快速、代码少，兼容性较高缺点：超出部分被隐藏，布局时要注意
3：在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden
优点：简单快速、代码少，兼容性较高。缺点：增加空标签，不利于页面优化
4：父级定义 overflow：auto
优点：简单，代码少，兼容性好缺点：内部宽高超过父级 div 时，会出现滚动条
5：万能清除法：给塌陷的元素添加伪对象 .father：after{ Content：“随便写”； Clear：both； display：block； Height：0； Overflow：hidden； Visibility：hidden }
优点：写法固定，兼容性高缺点：代码多

定位的属性值有何区别

Position 有四个属性值：relative absolute fixed static
Relative 相对定位不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
Static 默认值，元素出现在正常的流中

子元素如何在父元素中居中

水平居中：
1）子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效。
2）子父元素宽度固定，父元素设置 text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效水平
垂直居中：
1.子元素相对于父元素绝对定位，子元素top，left 设置50%，子元素margin-top 和 margin-left 减去各自宽高的一半
2.子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto
3.父元素设置 display：table-cell vertical-align：middle，子元素设置margin：auto 子元素相对定位，子元素 top，left 值为50%，transform：translate（-50%，-50%）
4.子元素相对父元素绝对定位，子元素 top，left 值为50%，transform：translate（-50%，-50%）
5.父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；justfy-content：center

Border-box 与 content-box 的区别？

Content-box 标准盒模型 width 不包括padding 和border
Border-box 怪异盒模型 width 包括 padding 和border

元素垂直居中

1.设置子元素和父元素的行高一样
2.子元素设置为行内块，再加 vertical-align：middle
3.已知父元素高度，子元素相对定位，通过transform：translateY（-50%）
4.不知道父元素高度，子绝父相，子元素top：50%，transform：translateY（-50%）
5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
6.给父元素 display：table，子元素 display：table-cell，vertical-align：middle
7.给父元素添加伪元素
8.弹性盒，父元素 display：flex，子元素align-self：center

如何让 chrome 浏览器显示小于12px 的文字

本来添加谷歌私有属性-webkit-text-size-adjust ：none，现在-webkit-transform：scale（）

Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些？

Css2 选择器： 元素选择器，id 选择器，群组选择器，类选择器，*通配符选择器，后代选择器
Css2 伪类选择器：a:link/visited/hover/active
Css3 选择器：
空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
结构伪类选择器：
查找第几个 nth-child（n）
查找同一类型第几个 nth-of-type
查找唯一类型 only-of-type
属性选择器：根据标签属性查找 [attr=value]
: root 查找根元素 html 标签
: empty 查赵空标签
目标伪类选择器：（表单）
：enabled 查找可以使用的标签
：disabled 查找禁止使用的标签
：checked 查找被选中的标签
伪元素选择器：：selection 设置选中文本内容的高亮显示（只能用于背景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）
优先级（权重）：
元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
包含选择器权重为权重之和
继承样式权重为 0
那些属性可以继承：
Css 继承特性主要是文本方面
所有元素可继承：visibility 和 cursor
块级元素可继承：text-indent 和 text-align
列表元素可继承：list-style，list-style-type，list-style-position，list-style-image
内联元素可继承：letter-spacing，word-spacing，line-height，color，font，font-family，font-size
Font-style ， font-variant ， font-weight ，text-decoration，text-transform，direction
字母间距段落间距行高字体颜色字体种类字体大小字体样式字体粗细小型大写字母文本文本修饰转换不同元素中的文本文本方向

浏览器的标准模式和怪异模式区别？

标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式
区别：
在怪异模式下，盒模型为怪异盒模型而在标准模式下为标准盒子模型图片元素的垂直对齐方式对于行内元素和table-cell 元素，标准模式下vertical-align 属性默认值是 baseline，而在怪异模式下，table单元格中的图片的 vertical-align 属性默认值是bottom，因此在图片底部会有几像素的空间
元素中的字体css中font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是font-size属性
内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸。
元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异迷失下，百分比被准确应用。
元素溢出的处理标准模式下，overflow 取值默认值为visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。

Margin 和 padding 在什么场合下使用

Margin 外边距自身边框到另一个边框之间的距离
Padding 内边距自身边距到自身内容之间的距离
当需要在 border 外侧添加空白时用 margin，当需要在border 内侧添加空白时用 padding

弹性盒子布局属性有那些请简述?

Flex-direction：弹性容器中子元素排列方式（主轴排列方式）
Flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
Flex-flow：是 flex-direction 和 flex-wrap 简写形式
Align-item：设置弹性盒子元素在侧轴上的对齐方式Align-content：设置行对齐
Justify-content：设置弹性盒子元素在主轴上的对齐方式

怎么实现标签的禁用

添加 disabled 属性

Flex 布局原理

就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

Px，rem，em 的区别

Px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的
em 相对长度单位，相对于当前对象内文本的字体尺寸 em 的值并不是固定的 em 会继承父级元素的字体大小（参考物是父元素的font-size） em 中所有的字体都是相对于父元素的大小决定的
rem 相对于 html 根元素的 font-size 1em=1rem=16px 在 body 中加入 font-size：62.5%这样直接就是原来的 px 数值除以 10 加上 em 就可以

Rem缺点

比如：小说网站，屏幕越小的移动设备如果用了rem肯定文字就越小，就会导致看文章的时候特别费眼

三栏布局方式两边固定中间自适应

1.margin 负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为 100%的浮动元素包起来
2.自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
3.绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离。
4.flex 左右固定宽中间 flex：1
5.网格布局
6. table 布局

画一条0.5px的线

采用meta viewport的方式 < meta name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>
采用border-image的方式
采用 transform: scale() 的方式

关于 JS 动画和css3动画的差异性

渲染线程分为 main thread 和 compositor thread，如果css动画只改变 transform 和 opacity ，这时整个CSS 动画得以在compositor trhead 完成（而 JS 动画则会在main thread执行，然后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者paint 的。
区别：
功能涵盖面，JS 比 CSS 大实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定对帧速表现不好的低版本浏览器，css3 可以做到自然降级 css 动画有天然事件支持 css3 有兼容性问题

双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

浮动清除

方法一：使用带 clear 属性的空元素
在浮动元素后使用一个空元素如<divclass=“clear”>< /div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用< br class=“clear” />或< hr class=“clear” />来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear 属性。
方法五：使用CSS的:after 伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

CSS 选择器有哪些，优先级呢

CSS 选择器：
标签选择器：div
类选择器：.container
id选择器：#child1
后代选择器：.container div，表示container类里面的所有div标签
子选择器：.container>div，表示container类里面下一代的所有div标签
相邻同胞选择器：.child1+.child2，表示所有紧接在.child1后面的一个.child2（二者必须是兄弟）
群组选择器：.child1,.child2，表示所有的.child1和.child2
伪类选择器：比如 :hover :link :active :first-child ::nth-child(n)
伪元素选择器：比如 ::after ::before ::first-letter
属性选择器：[attribute]选择带有attribute属性的标签，[attribute=value]选择attribute=value属性的标签
层次选择器：p~ul，表示p后面的所有ul，二者必须有相同的父标签
优先级：
!important > 内联样式 > ID选择器 > 类选择器/伪类选择器/属性选择器 > 标签选择器/伪元素选择器>兄弟选择器/子选择器/后代选择器/通用选择器（权重为0）

css 动画如何实现

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现，具体情况参见使用keyframes 定义动画序列小节部分。transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画。

如何实现元素的垂直居中

1.父元素 display:flex,align-items:center;
2.元素绝对定位，top:50%，margin-top：（高度/2）
3.高度不确定用 transform：translateY（-50%）
4.父元素 table 布局，子元素设置vertical-align:center;

CSS3 中对溢出的处理

cnkOhu
text-overflow 属性，值为 clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪的文本。

对 CSS 的新属性有了解过的吗？

CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了例如 first-of-type,nth-child 等选择器，在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了 animation，2d 变换，3d变换等，在颜色方面添加透明，rbga 等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等。

请简述媒体查询

媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的css样式，达到自适应的目的。

vue面试题

vue2.0组件通信⽅式有哪些

⽗⼦组件通信：
props 和 event、v-model、 .sync、 ref、 $ parent 和 $ children
非⽗⼦组件通信：
$attr 和 $ listeners、 provide 和 inject、eventbus、通过根实例 $ root访问、
vuex、dispatch 和 brodcast

v-model是如何实现双向绑定的

vue 2
v-model 是⽤来在表单控件或者组件上创建双向绑定的，他的本质是 v-bind 和 v-on 的语法糖，在
⼀个组件上使⽤ v-model ，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。
Vue3
在 3.x 中，⾃定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的
update:modelValue 事件

Vuex和单纯的全局对象有什么区别

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发⽣变
化，那么相应的组件也会相应地得到⾼效更新。
2.不能直接改变 store 中的状态。改变 store 中的状态的唯⼀途径就是显式地提交 (commit)mutation。这样使得我们可以⽅便地跟踪每⼀个状态的变化，从⽽让我们能够实现⼀些⼯具帮助我们更好地了解我们的应⽤。

Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么

渲染过程：
⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件挂载完，所以⽗组件的mounted在⼦组件mouted之后
⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount
-> ⼦mounted -> ⽗mounted
⼦组件更新过程：
影响到⽗组件：⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
不影响⽗组件：⼦beforeUpdate -> ⼦updated
⽗组件更新过程：
影响到⼦组件：⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
不影响⼦组件：⽗beforeUpdate -> ⽗updated
销毁过程：
⽗beforeDestroy -> ⼦beforeDestroy -> ⼦destroyed -> ⽗destroyed
不管是哪种情况，都⼀定是⽗组件等待⼦组件完成后，才会执⾏⾃⼰对应完成的钩⼦

v-show 和 v-if 有哪些区别

v-if 会在切换过程中对条件块的事件监听器和⼦组件进⾏销毁和重建，如果初始条件是false，则什么都不做，直到条件第⼀次为true时才开始渲染模块。
v-show 只是基于css进⾏切换，不管初始条件是什么，都会渲染。
所以， v-if 切换的开销更⼤，⽽ v-show 初始化渲染开销更⼤，在需要频繁切换，或者切换的部分dom很复杂时，使⽤ v-show 更合适。渲染后很少切换的则使⽤ v-if 更合适。

Vue 中 v-html 会导致什么问题

在⽹站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使⽤ v-html，且永远不能⽤于⽤户提交的内容上。

v-for 中 key 的作⽤是什么

key 是给每个 vnode 指定的唯⼀ id ，在同级的 vnode diff 过程中，可以根据 key 快速的对⽐，来判断是否为相同节点，并且利⽤ key 的唯⼀性可以⽣成 map 来更快的获取相应的节点。
另外指定 key 后，就不再采⽤“就地复⽤”策略了，可以保证渲染的准确性。

为什么 v-for 和 v-if 不建议⽤在⼀起

当 v-for 和 v-if 处于同⼀个节点时， v-for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复运⾏于每个 v-for 循环中。如果要遍历的数组很⼤，⽽真正要展示的数据很少时，这将造成很⼤的性能浪费。
这种场景建议使⽤ computed ，先对数据进⾏过滤

vue-router hash 模式和 history 模式有什么区别

1.url 展示上，hash 模式有 “#”，history 模式没有
2.刷新⻚⾯时，hash 模式可以正常加载到 hash 值对应的⻚⾯，⽽ history 没有处理的话，会返回404，⼀般需要后端将所有⻚⾯都配置重定向到⾸⻚路由。
3.兼容性。hash 可以⽀持低版本浏览器和 IE

vue-router hash 模式和 history 模式是如何实现的

hash 模式：
后⾯ hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新⻚⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化，然后根据 hash 变化来实现更新⻚⾯部分内容的操作。
history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个 API， pushState 和 replaceState ，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新⻚⾯部分内容的操作。

vue3.0 相对于 vue2.x 有哪些变化

1.监测机制的改变（Object.defineProperty —> Proxy）
2.模板
3.对象式的组件声明⽅式（class）
4.使⽤ts
其它⽅⾯的更改：⽀持⾃定义渲染器、⽀持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件、基于 treeshaking 优化，提供了更多的内置功能

MVVM

MVVM是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel 。
Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并⾃动将数据渲染到⻚⾯中，视图变化的时候会通知viewModel层更新数据

vue 中组件 data 为什么是 return ⼀个对象的函数，⽽不是直接是个对象

如果不是一个函数，每个组件实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变，如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了。
注释：
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，这就造成了数据污染。如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了

Vue响应式原理

vue 作为一种MVVM模式的框架，其数据绑定的底层原理为： 数据劫持 + 发布订阅者模式 。
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

Vue的性能优化

编码阶段
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连⽤
如果需要使⽤v-for给每项元素绑定事件时使⽤事件代理
SPA ⻚⾯采⽤keep-alive缓存组件
在更多的情况下，使⽤v-if替代v-show
key保证唯⼀
使⽤路由懒加载、异步组件
防抖、节流
第三⽅模块按需导⼊
⻓列表滚动到可视区域动态加载
图⽚懒加载
SEO优化
预渲染
服务端渲染SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
使⽤cdn加载第三⽅模块
多线程打包happypack
splitChunks抽离公共⽂件
sourceMap优化
⽤户体验
骨架屏
PWA
还可以使⽤缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

作者：CoderBin
链接：https://juejin.cn/post/7135251623864958984
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue的优缺点

**vue两大特点：**灵活的组件应用，高效的数据绑定
**vue的优势：**轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。
vue的缺点：
1、Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
2、VUE不支持IE8
3、生态环境差不如angular和react
4、社区不大

vuex的工作（执行）流程是什么

Vuex提供数据（state），来驱动视图（这里指的是Vue组件），视图通过Dispatch派发Action，在Action中可以进一步做一些异步的操作（例如通过ajax请求后端的接口数据），然后通过Commit提交给Mutations，由Mutations去最终更改state。那么为什么要经过Mutations呢？这是因为我们要在Vue调试工具(Devtools)中记录数据的变化，这样可以通过插件去进行进一步的调试。所以说Mutations中只能是纯同步的操作，如果是有异步操作，那么就需要在Actions中进行处理。如果说没有异步操作，那么可以直接由组件进行Commit操作Mutations。

vue 中的事件修饰符

.stop 阻止事件冒泡
.cpture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转
.once 事件只能触发一次
.native 触发js原生的事件
.number 把文本框的内容转换为数字
.trim 去除文本框左右空格

vue 中$nextTick()作用

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
this.$ nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
可以根据打印的顺序看到，在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$ nextTick()可以等待dom生成以后再来获取dom对象，而通过this.$ nextTick()获取到的值为dom更新之后的值

vue 中 mixins(混入)的使用

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项
在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。
在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

react面试题

浏览器、项目优化、等其他类型高频面试题

网页中有大量图片加载很慢你有什么办法进行优化？

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载
2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
3.使用 csssprite 或者 svgsprite

网页的三层结构有哪些

结构（html 或 xhtm 标记语言）
表现（css 样式表）
行为（js）

web 性能优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip压缩，webP，lazyLoad。加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。缓存：HTTP 协议缓存请求，离线缓存manifest，离线数据缓存localStorage。渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

浏览器缓存机制

缓存分为两种：强缓存和协商缓存，根据响应的header 内容来决强缓存相关字段有 expires，cache-control。如果cache-control 与expires 同时存在的话， cache-control 的优先级高于expires。协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

浏览器输入网址到页面渲染全过程

DNS 解析 TCP 连接发送HTTP请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面连接结束

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为 4 个步骤：
1.当发送一个 URL 请求时，不管这个 URL 是Web 页面的URL还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2.浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个
TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，然后服务器响应并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3.一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送HTTP 的 GET 请求。远程服务器找到资源并使用HTTP 响应返回该资源
4.此时，Web 服务器提供资源服务，客户端开始下载资源。

如何实现拖拽功能

首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行mousemove 里面的具体方法。clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top等等值。补充：也可以通过 html5 的拖放（Drag 和 drop）来实现