2022前端面试题整理

面试题整理

HTML/CSS

1.HTML语义化：

语义化标签利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读

2.媒体查询：

@media screen and(){}

3.回到顶部实现方法：

设置一个按钮position属性为fixed，固定到页面右下角，点击按钮时
document.documentElement.scollTop=0
document.body.scrollTop = 0;

4.图片加载失败显示默认图片：

onerror

5.盒模型：

分为标准盒模型和怪异盒模型
标准盒模型：所设置的宽高即为content内容的宽高.
怪异盒模型：所设置的宽高包含content、padding和border.
（p和b的高度只会挤压内容区不会撑大盒子）

6.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素（内联元素）：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级元素： <div>、<p>、<h1>…<h6>、<ol>、<li>、<ul>、<dl>、<dd>、<dt>、<table>、<address>、<blockquote> 、<form>
空元素(没有内容)： <br> <hr> <img> <input> <link> <meta> <area><base> <col> <embed> <keygen> <param> <source> <track> <wbr>
行内块元素： <img>、<input>
块级元素特点：
1、独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素宽度一致）
内联元素特点：
1、不独占一行
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
inline-block 元素特点：
1、不独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。

7.什么是雪碧图（精灵图）？如何实现？

把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
优点： 1、减少网页的HTTP请求，提高页面性能2、图片命名上的困扰
缺点：1、必须限定容器大小，符合背景图片元素的位置，需要计算 2、维护比较麻烦
实现步骤：
1.制作一张具有多状态的拼合图片，按照一定规律处理
2.给要显示背景的盒一个固定宽高，一杯酒的方式加载，让其局部显示
3.通过背景图定位控制不同的显示状态

8.页面大量图片，如何优化？

图片懒加载、图片预加载（幻灯片或相册）、CSSsprite、SVGsprite（css图片）

9.清除浮动：

1.父级定义高度height
2.clear：both；
3.伪元素清除浮动；
4.父元素使用overflow：hidden
5.br标签清除浮动

10.函数防抖和节流：

防抖：将一段时间内连续的多次触发转化为一次触发。
节流：减少一段时间内触发的频率

11.跨域问题及如何解决：

a页面获取b页面的资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
解决方法：
1.设置document.domain解决无法读取非同源网页的 Cookie问题
2.跨文档通信 API：window.postMessage()
3.JSONP：服务器与客户端跨源通信的常用方法
4.CORS ：跨域资源分享

12.前端性能优化：

网页内容：减少http请求、避免页面跳转、延迟加载、提前加载、避免404
服务器：使用CDN、避免空的图片src、尽早flash输出
cookie：减少cookie大小
避免CSS表达式、用替代@Import
优化图像等

13.重绘和回流：

重绘：由于节点的集合属性发生改变或者由于样式发生改变但不会影响布局
回流：布局或几何属性需要改变

14.减少重绘和回流：

1.使用 transform 替代 top
2.使用 visibility 替换 display: none
3.避免使用table布局
4.尽可能在DOM树的最末端改变class
5.避免设置多层内联样式
6.避免使用CSS表达式
7.避免频繁操作样式
8.避免频繁操作DOM
9.避免频繁读取会引发回流/重绘的属性

15.样式优先级：

！important
行内样式>嵌入样式>外链样式
id选择器>（类选择器|伪类选择器|属性选择器）>（后代选择器|伪类选择器）>（子选择器|相邻选择器）>通配符选择器
继承样式
浏览器默认样式

16.CSS尺寸设置的单位：

px：绝对长度单位，大小取决于屏幕的分辨率
rem：相对长度单位，相对根元素的字体大小
em：相对长度单位，font-size中相对父元素的字体大小，其他属性中相对自身的字体大小
vw：相对长度单位，相对于视窗宽度的1%
vh：相对长度单位，相对于视窗高度的1%

17.BFC：

块级格式化上下文，是web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
形成条件：flaot、position、overflow、display
布局规则：局域内box从上到下排列；box垂直方向的距离由margin决定；同一个BFC内box 和 margin会重叠；BFC不会与float重叠；BFC计算高度也会计算float元素

18.水平垂直居中的方法：

flex布局：display:flex; align-items:center; justify-content:center;
定位1：position:absolute; top0; left0; right0; bottom0; margin:auto;
定位2：position:absolute; top:50%; left:50%; 再减去当前元素宽高的一半

19.三栏布局的实现方案：

1.左右浮动，设置宽高，中间设置高度自适应
2.BFC：左右浮动，中间overflow：hidden
3.flex布局：父元素设置flex，中间元素设置flex-grow：1

JS

1.JS的数据类型及区别：

1.基本数据类型（简单数据类型）：Number 、String、Boolean、Null、Undefined。
2.引用数据类型（复杂数据类型）：通常用Object代表，普通对象、数组、正则、日期、Math数学函数都属于Object

2.遍历对象的几种方法：

1.for循环
2.for in: 通常用来遍历对象而不是数组(因为索引取出是字符串)
访问一个没有的变量 默认取值为undefined 遍历的是key 得到value

遍历数组的几种方法：

forEach:遍历数组 三个参数(value,index,array)用来遍历数组中的每一项 没有返回值 不影响原数组
map:映射 原数组被映射成对应的新数组 支持return 相当于 把原数组克隆了一份 把克隆的每项改变了 不影响原数组
for of： 遍历的是value
filter：过滤出符合条件的数组元素
some:数组中只要有一个元素符合给定的条件 返回true
every:数组中所有的元素符合给定的条件才会返回true

原型链：

每个构造函数都有一个原型对象，prototype
原型对象都包含一个指向构造函数的指针，constructor
而实例都包含一个指向原型对象的内部指针__proto__.
原型对象上的属性和方法能被实例访问到.
如此层层递进，就构成原型链.

get和post区别：

get一般用来取数据 post用来提交数据
get请求传递的参数在url地址中 有长度限制 参数可见 安全性不高 会被缓存，留下历史记录
post请求传递参数的时候参数在请求体中 参数不可见 安全性较高 不能被缓存 不会留下历史记录
get请求可以加入收藏夹

null和undefined的区别：

undefined：全局对象的一个属性，当一个变量没有被赋值或者一个函数没有返回值等情况都是undefined
null：代表对象的值未设置，相当于一个指针没有设置指针地址就是null
用typeof访问null时会返回object，因为null是空对象的指针

JS有几种方法判断变量的类型：

4种方法：typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、constructor（用于引用数据类型）

如何判断一个对象是否为数组：

1.Array.isArray直接判断。
2.toString（）
3.typeof（）

数组去重的方法：

利用对象属性key排除重复项
利用set类型数据无重复项：new set（推荐使用）
filter+indexof去重
遍历数组
reduce+include去重

伪数组和数组的区别：

伪数组类型是Object，不能使用数组方法，有长度，可以 for in
数组类型是Array，能使用数组方法

堆和栈：

js内存分为堆和栈
堆：存放的是引用类型的值
栈：存放的是基本类型的值 变量名 函数名还有引用类型在堆中的地址

深浅拷贝：

浅拷贝拷贝的是地址 Object.assign()实现
深拷贝拷贝的是值 JSON.stringify JSON.parse实现
(stringify 对象转成字符串 parse 字符转转成对象)

同步和异步：

同步是阻塞模式：代码从上往下走 ，走到耗时的操作时会停下来等待操作完成
异步是非阻塞模式：代码走到耗时的操作时会跳过这段等待过程，当操作成功之后通过回调函数执行返回结果

async和await：

async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值.

宏任务微任务：

宏任务指执行栈中待执行的任务（主线程上的同步任务）。
宏任务包括 script(整体代码)、setTimeout、UI交互事件
微任务指当前任务执行之后立即执行的任务。
微任务包括 Promise.then。
事件运行机制：
1.执行一个宏任务；
2.遇到微任务，放到微任务列队；
3.宏任务执行完毕，执行微任务列队中的任务；
4.微任务执行完毕后，GUI 线程接管，开始渲染页面；
5.渲染完成后，JS线程继续接管，开启下一个宏任务。

map和for Each的区别：

map创建新数组，map有返回值
for Each() 不能修改原数组，无返回值，返回undefined

箭头函数：

没有自身的this，需从外部获取，不能作为构造函数，不能被new，没有argumengts对象，不能作为genrator函数，不能使用yied命令，没有prototype属性

var、let、const之间的区别：

var:
1.存在全局作用域和函数作用域两种
2.没有块级作用域
3.存在变量提升。
let:

1. 存在块级作用域
2. 不存在声明提升
   3.不允许重复声明变量
3. 不能当成window的属性
   const:
   声明常量 初始值不能为空且不能更改

闭包：

一个函数和词法环境的引用捆绑在一起； 函数嵌套函数，内部变量能访问外部变量；通过作用域链，当前作用域可以访问上级作用域中的变量；会造成内存泄漏问题，防抖节流

this指向（普通函数、箭头函数）：

this存在的场景：全局执行上下文、函数执行上下文、eval执行上下文
普通函数中this指向函数调用者，箭头函数中this继承自函数所在执行上下文中的this

call apply bind作用及区别：

call：改变this指向直接调用，用于对象的继承
apply：改变this指向直接调用，接收第二个参数为数组，用于找出数组中的最大值和最小值以及数组合并
bind：改变this指向不直接调用，只接受一个参数，用于vue或react框架中改变函数的this指向

Promise：

解决回调地狱问题即异步多层嵌套回调的问题，增加可读性
有三种状态：pending、resolve、reject，初始状态为pending；resolve将状态有等待变为成功、reject将状态由等待变为失败
缺点：状态一经改变无法逆转，内部无法捕捉错误（需借助try/catch），无法监听内部执行状态

对This对象的理解：

this的指向：this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象
全局环境中（指

事件绑定与普通绑定的区别：

普通绑定：不支持添加多个事件，最下面的时间会覆盖上面的

阻止冒泡和默认行为：

冒泡：stopPropagation（）
默认行为：preventDefault（）

axios的使用：

在mounted生命周期中使用
this.$axios.all请求数据this.$axios.spread 处理请求
请求拦截是在发送 http 请求之前
响应拦截是在服务器返回响应之后

JS继承的方法：

原型链继承、借用构造函数继承、组合继承（原型+借用构造）、原型式继承、寄生式继承、寄生组合式继承

浏览器：

localStorage cookie区别：

localStorage 永久存储 可手动清除 内存较大
cookie 有实效时间 内存较小
(应用场景–cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等 -localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据）

XSS攻击:

指浏览器中执行恶意脚本, 拿到用户的信息进行操作.
主要分为存储型、反射型和文档型.
防范措施:对输入内容转码或者过滤，让其不可执行.
两个利用: 利用 CSP，利用 Cookie 的 HttpOnly 属性.

http请求步骤：

建立TCP连接
浏览器向服务器发送请求命令
浏览器发送请求头信息
服务器应答
服务器发送应答头信息
服务器向浏览器发送数据
服务器关闭TCP连接
输入URL到页面展示经历哪些过程：
1.DNS域名解析
2.建立tcp连接
3.发送http请求
4.服务器处理相关请求
5.返回响应结果
6.关闭tcp连接
7.浏览器解析html
8.浏览器进行渲染

获取URL地址中的参数项：

1、设置或获取 href 属性中在井号“#”后面的分段：window.location.hash
2、设置或获取 URL 的协议部分：window.location.protocol
3、设置或获取对象指定的文件名或路径：window.location.pathname
4、设置或获取整个 URL 为字符串：window.location.href
5、设置或获取与 URL 关联的端口号码：window.location.port
6、设置或获取 href 属性中跟在问号后面的部分：window.location.search
7、设置或获取 location 或 URL 的 hostname 和 port 号码：window.location.host
8、获取url地址中？后面的值：window.location.search

常见的状态码：

200请求成功
301 资源被转移到其他url
404网页不存在
500服务器错误 有可能传参错误

http和https的区别：

http是超文本传输协议(应用层)
https是超文本传输安全协议
在http基础上加入ssl/tls进行加密 更加安全

如何判断用户使用的浏览器：

navigator.userAgent()方法 返回的是字符串

如何判断设备来源:

navigator.userAgent

如何解决网络超时：

setTimeout方法 设置一个超时时间

VUE

Vue两大核心特点：

数据驱动 模块化开发

MVVM模式：

M: Model层，用于存放数据和处理业务逻辑
V: View层，视图层，数据展示
VM： 监听模型数据的改变和控制视图行为、处理用户交互
(M和V没有直接联系 通过VM进行交互)

MVVM双向绑定原理：

采用数据劫持结合发布者-订阅者模式的方式，
主要使用了js中的Object.defineProperty()方法来劫持各个属性
在数据变动时发布消息给订阅者，触发相应的监听回调。

基础指令：

v-clock: 解决闪烁
v-modle: 实现数据和表单的双向绑定
v-for: 列表循环 需要绑定key值 提高渲染性能避免数据混乱
v-on: 事件绑定 简写为@
v-bind：数据绑定 简写为:
v-if：动态的创建或删除元素
v-show: 动态的控制展示或隐藏(控制display属性是否可见)

生命周期：

beforCreate（）。组件创建前。
created（）。组件创建完成。主要用来获取api接口数据。
beforMount（）。组件挂载前执行。
mounted（）。组件挂载完成。可获取当前组件的dom元素。
beforUpdate（）。组件更新前。
更新阶段的函数之外的其他函数，在组件存在的生命周期里只执行一次。
updated（）。组件更新完成。data里的变量改变并且要在页面重新渲染完成之后
beforDestroy（）。组件销毁前。可以执行优化操作，清空定时器，解绑事件
destroyed（）。组件销毁完成。

组件传参：

父传子：从外往里传 子组件使用props进行接收
( props里是所传值的验证类型)
子传父：从里往外传 通过$emit将想要传递的值以函数的形式传出(再在父组件接收这个函数它会带一个返回值这个返回值就是我们需要从子组件传的值this.$emit(arg1,arg2) arg1:方法名字，arg2:要传出的值. 父组件里接收的方法名要和子组件里定义的命名一致.)
非相关组件：事件总线
this.bus.$emit传出this.bus.$on 接收
bus是一个中间值
(在第二个子组件里面通过beforeCreate生命周期来获得传过来的值，这时候需要用this.bus.$on来接收，第一个参数是this.bus.$emit定义的方法名，第二个参数是一个方法，此方法带一个返回参数。这里用了箭头函数).

组件定义分为两种：全局和局部

全局组件只需要定义一次 所有页面都能使用
局部组件每使用都需要注册
data：表示组件中的数据 必须是一个function，返回一个对象
data不能是对象，因为组件在复用的时候如果是对象的话，那么修改一个组件的数据，其他组件的数据也会跟着改变。
component：叫动态组件。is表示当前显示的组件。

$nextTick的使用：

当你修改了 data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使⽤ $nextTick 这个
回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。

在ui组件上绑定事件无法生效怎么办：

使⽤ @click.native
原因：router-link会阻⽌click事件，.native指直接监听⼀个原⽣事件。

vue中怎么重置data：

使用Object.assign():
vm.data可以获取当前状态下的data.
vm.options.data可以获取到组件初始化状态下的data.

vue中的虚拟dom是什么：

虚拟dom是相对于真实dom而出的，js中操作dom会大量消耗资源，引起卡顿。虚拟dom是在执行dom操作后，不会立刻更新dom，而是通过js计算，然后把计算好的数据一次性发送给dom树，避免了dom操作产生的一系列没必要的一算。

$route 和 $router 的区别：

$route是“路由信息对象”，包括 path，params， hash，query，fullPath，matched，name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

watch和computed区别：

computed：计算属性 所依赖的属性值改变时才会改变，不支持异步，有异步操作时默认走缓存，多对一。（注意computed和data中的属性不能重复，computed中的属性也相当于声明，data也是声明，一个属性不能重复声明）.
watch：监听 不支持缓存，支持异步，当依赖的data的数据改变时触发对应的代码，一对多。

filter过滤器：

过滤器分为全局过滤器和局部过滤器，全局过滤器用的比较多。多用在图片，时间，日期等方面
keep-alive：
保持活性 提供缓存 保证页面刷新后当前组件页面数据还在
路由守卫（导航钩子）：
全局守卫：router.beforeEach(to,from,next)
router.afterEach(to,from,next)
组件内守卫：
beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave 写在具体组件中
路由独享守卫： beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是将其写进其中一个路由对象中，只在这个路由下起作用。写在router.js中
webpack：前端资源构建工具 静态模块打包器 最终打包好是一个dist文件

子组件调用父组件的方法：

1.this.$parent.event()2.子组件中使用：$emit
3.父组件把props传入子组件中

VueX是什么：是状态管理工具，数据管理工具

vuex有哪几种属性

有五种，State、 Getter、Mutation 、Action、 Module
state： 基本数据(数据源存放地)
getters： 从基本数据派生出来的数据
mutations ： 提交更改数据的方法，同步！
actions ： 像一个装饰器，包裹mutations，使之可以异步。
modules ： 模块化Vuex

权限管理：

不同的用户登录成功之后 服务器端会返回当前的角色信息，
根据不同的角色信息展示相对应的功能菜单.

路由变化页面数据不刷新

依赖路由的params参数获取写在created生命周期里面，使用watch监听路由是否变化

后续可能还会更新~~