前端2021最新面试题

Html语义化标签：
Header footer main h1~h6 ul li a small

H5新特性:
Canvas video audio web存储 定位 drag(拖拽)
webworker(多线程) websocket(长连接)

Css3新特性：
rgba background word-wrap text-shadow font-face
border-radius border-image box-shadow 媒体查询

元素的显示方式
行内元素
块级元素
行内块元素
table

与其它行内元素或者行内块元素共用一行
单独成行
与其它行内元素或者行内块元素共用一行
一种十分特殊的显示方式，独占一行

span b strong i em
u sup sub s
h1~h6 p div
hr pre
input
table

html中允许设置尺寸的元素
块级元素
行内元素
行内块

设置尺寸有效
设置宽高无效
设置尺寸有效

默认宽，父元素宽度100%
不设置高度，默认高度
①没有内容，高度为0
②有内容，高度正好被内容撑开
默认宽高靠内容撑开
浏览器会分配默认尺寸给行内块
问题，不同浏览器给行内块默认分配的尺寸，差异较大
这里一定统一

盒子模型：
标准盒子模型
width + padding（左右） + border（左右） + margin（左右）怪异盒子模型
width 为 content + padding（左右） + border（左右），因此整个盒子的宽度为 width + margin（左右）
弹性布局：
容器：
flex-direction主轴的方向
flex-wrap 换行
justify-content定义了项目在主轴上的对齐方式
align-items定义项目在交叉轴上如何对齐
项目属性
order定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self允许单个项目有与其他项目不一样的对齐方式

水平居中：
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
4. 子元素相对定位，子元素top，left值为50%，transform:translate(-50%，-50%)
5.子元素相对父元素绝对定位，子元素top，left值为50%，transform:translate(-50%，-50%)
6.父元素设置弹性盒子
display:flex;justify-content:center;align-item:center;

媒体查询：
@media….
超大屏1200px
大屏 992px
中屏 768px
小屏 576px
超小屏 576px

响应式布局：
设置meta标签
媒体查询media
百分比
Rem
栅格布局
Rpx
前端性能调优
Css样式放head顶部
Javascript放body最下面
使用外部javascript和css
避免重定向
减少http请求
精灵图，图片懒加载
Iconfont
压缩
缓存
Dns
内容分发网络（cdn）

Js
面向对象
什么是？
用对象保存现实中一个事物的属性和功能，然后按需访问对象中的属性和功能
三种
封装：创建一个对象结构，保存现实中一个事物的属性和功能
继承：父对象中的成员，子对象无需重复创建就可直接使用。
多态：一个函数，在不同的情况下，表现出不同的状态
多态（2种）
重载（overload）: 一个函数，根据传入的实参值不同，执行不同的逻辑！
重写（override）: 在子对象中定义一个和父对象中已有成员同名的新成员。导致子对象，今后都使用子对象自己写的新成员，不再使用父对象的同名成员。

闭包：
什么时候？
希望给一个函数保护一个可反复使用的专属变量，又防止这个变量被外界篡改时，都用闭包
一句话概括闭包是如何形成的/什么是闭包？
外层函数调用后，外层函数的函数作用域对象，被内层函数的作用域链引用着，无法释放！形成了闭包对象！
闭包缺点？怎么解决？
比一般的函数多占用一块存储空间——外层函数的函数作用域对象
用完闭包后，应该尽快释放都要将保存内层函数的外部变量赋值为null

作用域链：
当前作用域没有查到值，就会向上级作用域去查，直到查到全局作用域，这个查找过形成的链条就叫做作用域

作用域：
全局作用域，函数作用域

原型链：
什么是？
由一个对象的多级父对象的原型对象串联组成的链式结构
如果当前对象内部找不到，则js引擎会延_ proto _属性继续去父对象查找。直到找到位置。
如果在整个原型链上都没有，才返回undefined。

构造函数：
什么是？
专门描述同一类型所有对象的统一结构的函数。
何时？
只要想创建多个相同结构，不同属性值的对象时，都用构造函数来创建

Es5：
严格模式“use strict”
不允许this指Window
Array增加方法（every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight）

Es6：
参数默认值 模板字符串 … 箭头函数 promise let const
解构赋值 class
Map + Set + WeakMap + WeakSet

事件代理：
什么是？
又称事件委托，把原本需要绑定的事件委托给父元素，让父元素负责事件监听原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能

宏任务微任务:
宏任务：
SetTimeout setInterval Ajax Dom事件
微任务：
Promise async/await
微任务执行时比宏任执行早（微任务 es6语法规定的，宏任务是浏览器规定的）

事件模型：
当事件发生时会经历三个阶段
1.事件捕获
1）由外向内的捕获阶段：从dom树根节点开始，到点击当前的元素位置，记录当前元素各级父元素上绑定的事件处理函数，只是记录
2）目标触发阶段：优先触发当前点击的元素上的处理函数
目标元素(target)：实际想点击的那个触发事件的元素
2.事件冒泡
冒泡执行阶段：按捕获阶段记录的各级父元素上的处理函数的顺序，由内向外触发各级父元素上的事件

事件对象：
什么是？
当时事件发生时浏览器自动创建的，保存事件信息的对象，同事还提供了改变实现默认特征的功能和函数
何时？
只要希望获得事件信息，或改变事件默认特征是只能用事件对象
如何？
获取：事件对象总是默认作为事件处理函数的是一个实参值自动传入
只要给事件函数定义一个形参即可接住事件对象
作用？
停止冒泡：event.stopPropagation()
停止捕获stopImmediatePropagation
阻止默认事件event.preventDefault()

Promis
当多个一部任务必须顺序执行时，就可以用promise
异步编程的一种解决方法
避免了层层嵌套的回调函数，解决了回调地狱

排序算法：
冒泡排序
选择排序
插入排序
Shell排序

Vue

Vue全家桶：
Vue-cli vue-router vuex vue-devtool调试工具 ul组件库

Mvvm：
M:模型对象（model）专门替界面保存所需的变量和事件处理函对象
V：界面（view）界面
Vm：视图模型（viewModel）是v,m的桥梁，专门负责将模型对象中的变量与界面同步的特殊对象（当模型数据修改时，会检测到并通知视图模型进行修改）

Mvc：
M（model）数据模型 表示业务数据，并提供数据给视图
V（view）视图 用户看到的并与之交互的界面
C（controller）控制器 接受用户的输入并调用数据模型和视图去完成用户的需求
流程：
所有的终端用户请求被发送到控制器
控制器依赖请求去选择加载哪个模型，并把模型附加到对应的视图
附加了模型数据的最终视图作为响应发送给终端用户

MVVM与MVC的区别有：
mvvm各部分的通信是双向的，而mvc各部分通信是单向的；
mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。

数据绑定原理
访问器属性+虚拟don树

Vue双向绑定原理：
采用数据劫持结合发布者模式，通过object. defineProperty()来劫持各个属性set，get，在数据变动时发布消息给订阅者，触发相应的监听回调

Vuex：
专门为vue.js应用程序开发的状态管理模式
5个核心属性
State：数据存放
Mutation：同步操作，专门修改state的数据
Action：异步操作
Getters：相当于计算属性
modules ：模块化 vuex很复杂的时候可以使用

生命周期：
（4）个生命周期，8个钩子函数
创建（create）
BeforeCreate(创建前)
Created（创建后）
挂载（mount）
BeforeMount（挂载之前）
Mounted（挂载后）
更新（update）
BeforeUpdate（更新前）
Updated（更新后）
销毁（destroy）
Beforedestroy（销毁前）
destroyed(销毁后)

this.nexttick：
数据更新了，在dom渲染后自动执行该函数

虚拟DOM树：
是vue中专门保存会改变元素
好处？
小: 只保存受影响的元素，其余元素都不保存
快: 因为元素个数少，所以遍历快
修改效率高: 只更新受影响的元素，不受影响的元素不更新
避免重复操作: 虚拟DOM树天生封装了原生DOM的增删改查方法

组件化开发
把一个页面拆分成多个组件，每个组价依赖template，script，style，图片等资源放在一起开发和维护

SPA应用：
是什么?
Single-Page Application是一种特殊的web应用，将所有的活动局限于一个web页面中，仅在页面初始化加载相应Html，Javascript，Css，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用Javascript动态变换html（采用的是div切换显示和隐藏ROUTER-VIEW）从而实现UI的交互
如何？
1)创建唯一页面
2)创建组件
3)创建路由器对象
4)创建子组件
优点？
前后端分离，内容改变不需要重新加载整个页面
缺点？
首次加载慢（浏览器一开始就要加载html css，js ，所有的页面内容都包含在主页面中），
页面复杂度提高
导航不可用

首次加载慢：
路由懒加载
UI框架按需加载
Gzip压缩
Cdn引入第三方库
关闭sourceMap

Router和route的区别
router是VueRouter的一个对象，通过Vue.use(vueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

vue的路由钩子函数/路由守卫有哪些
全局守卫：
Router.beforeEach（导航守卫）进入之前 （前置）
afterEach进入之后 （后置）
组件内的守卫：路由进入/更新/离开之前
beforeRouterEnter/update/leave
路由独享守卫：beforeEnter

Axios拦截器
使用axios的interceptors(拦截器)
response(响应)
request（请求）

Vue指令：
v-for：循环数组，对象，字符串，数字
v-on：绑定事件监听
v-bind：动态绑定一个或者多个属性
v-model：表单控件或者组件上创建双向绑定
v-if：v-else v-else-if 条件渲染
v-show：根据表达式真假，切换元素的display
v-html：更新元素的innerhtml
v-text：更新元素的textcontent
v-pre：跳过这个元素和子元素的编译过程
v-clock：这个指令保持在元素上知道关联实例结束编译

v-model是什么，怎么实现，语法糖是什么
v-model就是vue的双向绑定的指令，
view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化
1). new Vue()扫描到v-model后，会根据所在的表单元素的不同，自动为元素绑定oninput或onchange事件。
a. oninput 当用户在文本框中输入新内容时自动触发
b. onchange 当用户改变了表单元素中的内容，并失去焦点时才自动触发
2). 并自动添加事件处理函数。并在事件处理函数中自带修改data中变量的语句。
a. 先获得当前元素的新内容
b. 再将新内容修改到data中的变量里
手写v-model

语法糖：
<input :value=“price” @input=“price=$event.target.value”>
$event.target.value 就是把input的值赋值给 price
V-model只是简写方式

v-show和v-if区别：
v-show 用display:none隐藏元素，不改变DOM树结构，效率略高
v-if 用删除元素方式隐藏元素，改变DOM树结构，效率略低

v-for为什么必须加🔑
添加唯一标识，避免重建整个列表，提高修改效率

传参：
this.$emit父级在子组件标签上定义自定义事件（@自定义:要触发的方法）子级触发this.$emit(父级自定义事件，参数)事件进行传参
this.$parent获取父级组件的实例，如果多个父级通过切换路由，会动态获取这个父级路由的实例this.$child
获取子级组件的实例，如果多个子级会在components定义子组件的顺序来定义下标，通过（this.$child[下标]）来获取实例this.$refs
获取子级实例，在使用子级的标签上写上ref=自定义名称，在父级用（this.$refs.自定义名称）来获取实例
Vuex（看上面）
Props
父传子，父级在子组件标签上定义名称（自定义名称：参数）
子级通过props:[“父级的自定义名称”]

computed计算属性和methods：
methods: 结果不会被缓存，如果反复调用，会导致重复计算
computed: 结果会被vue缓存，即使反复调用，也不会反复计算。只在首次加载时计算一次！

methods、computed和watch
调用方式:
methods: 必须主动调用，自由调用，且必须加()
computed: 通常不会被自由调用，只用于绑定语法中，计算一个值，且不用加()
watch: 不会被自由调用，只有当被监视的变量值改变时，才自动执行，通常不需要有返回值
目的:
methods: 专门执行一项任务，比如: 登录，注册等
computed: 专门计算一个值，比如: 计算购物车总价
watch: 专门监视一个变量，比如: 一边输入一边执行搜索

v-for与v-if优先级
v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。

Axios的特点：
Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
它可以拦截请求和响应
它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
安全性更高，客户端支持防御 XSRF

this指向：

1. obj.fun() this->obj
2. fun() 或 (function(){ … })() 或 多数回调函数 或 定时器函数 this->window
3. new Fun() this->new正在创建的新对象
4. 类型名.prototype.共有方法=function(){ … } this->将来谁调用指谁，同第一种情况
5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象
6. 箭头函数中的this->箭头函数外部作用域中的this
7. jQuery.fn.自定义函数=function(){ … } this->将来调用这个自定义函数的.前的jQuery子对象，不用再$(this)
8. new Vue()中methods中的函数中的this->当前new Vue()对象

防抖：
频繁操作输入，到没有操作再触发

节流：
不管操作的速度多快，每隔几秒触发一次

动态绑定class的类名：
对象和数组

页面跟组件的生命周期：
页面中引用全局注册的组件时， 加载的顺序是：
页面beforeCreate
页面created
页面beforeMount
全局组件beforeCreate
全局组件created
全局组件beforeMount
全局组件mounted
页面mounted
页面beforeCreate> 页面created> 页面beforeMount> 全局组件beforeCreate> 全局组件created> 全局组件beforeMount> 全局组件mounted> 页面mounted

混编开发phoneagp/cordova:
Cordova也叫phoneagp，可以用来打包生成android或ios或其他平台App,提供了native api可以让网页调用本地函数，极大增强了网页的功能
微信小程序
生命周期
应用
应用生命周期
onLaunch: 初始化小程序时触发，全局只触发一次
onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
onHide: 用户从前台切换到后台隐藏时触发

页面生命周期
onLoad：首次进入页面加载时触发
onShow：加载完成后、后台切到前台或重新进入页面时触发
onReady：页面首次渲染完成时触发
onHide：从前台切到后台或进入其他页面触发
onUnload：页面卸载时触发

组件
Show 组件所在的页面被展示时执行
Hide 组件所在的页面被隐藏时执行
Resize 组件所在的页面尺寸变化时执行

跳转方式：
wx.navigateTo：
该方法保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo：
该方式关闭当前页面，跳转到应用内某个页面wx.switchTab：
wx.reLanch：
该方式关闭所有页面，跳转到应用内某个页面
wx.switchTab
wx.switchTab只能跳转到tabBar配置页面
wx.navigateBack
关闭当前页面，返回上一级

本文章请勿抄袭，违者必究，本文章自写，有问题可以说，立马改，答案不一定