前端面试题整理

看到很多前端面试题总结，总结的真的只有题哈哈哈哈，可能为了让我自己去探索吧，但是我要不是这么菜，我至于上来搜前端面试题吗，好吧，无奈之下只能一个个去找答案，这里就当我自己的一个记录吧，前面先给出题目目录，点击可以跳转到相应答案，有些答案还没有的，可能是我还没弄明白，欢迎各位大佬给我小抄并鼓励鞭策我弄明白。

1.前端页面由哪三层构成，作用是？

结构层（HTML），实现页面结构
表示层（CSS），完成页面的表现与风格
行为层（JavaScript），实现客户端的功能与交互
2.typeof返回的数据类型？

2.typeof返回的数据类型？

‘undefined’、‘object’、‘string’、‘function’、‘number’、‘boolean’

typeof(aaa)/typeof(undefined)  
==> 'undefined'
typeof([])/typeof({})/typeof(null)/typeof(/,/g)
==>'object'
typeof("124")/typeof("aaa")
==>'string'
typeof(function(){})  
==>'function'
typeof(123)/typeof(NaN)    
==> 'number'
let bbb=124;typeof(bbb)  
==>'number'
typeof(true)/typeof(false)/typeof('12'==12)  
==>'boolean'
typeof(typeof(true))  
==>'string'
> typeof返回的是字符串，所以两个typeof及以上都是string

3.css的基本语句构成？css选择器有哪些？优先级如何计算？

// 选择器 { 属性：属性值 }   整个{}是一个声明
div { color:red } 

css选择器有：元素选择器、id选择器、类选择器、属性选择器、组合选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器、伪元素选择器

元素选择器：html{ margin:0;padding:0; }  div{ font-size:12px; }
id选择器：#app{ color:red }
类选择器：.item{ width:200px }
属性选择器：
*[title]{color:red}   //把所有带标题的元素颜色设置为红色
a[href] {color:red;}   //把带有href属性的a标签设置为红色
a[href][title] {color:red;}    //把同时带有href属性和title属性的a标签设置为红色
组合选择器：h2,p{ color:red }    //把h2和p的颜色都设置为红色
后代选择器：div p{color:red}     //div下的p标签设置为红色
子元素选择器：div>p{color:red}    //div的子元素设置为红色，孙元素不会被设置
相邻兄弟选择器：h1 + p{color:red} //选择紧接在h1后面的p，h1和p属于同一个父级
伪类选择器：a:active{color:red}  //选定的链接为红色
伪元素选择器：
h3:before { background:url() }
h1:first-letter{color:red}    //向文本第一个字母设置红色

优先级：!importent > 行内样式 > id选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
同一级别css，后写的会覆盖先写的
引入方式不同，优先级不同：行内样式 > 内部样式表 > 外部样式表 > 导入样式（@import）
参考大佬的总结：css优先级总结

4.行内元素有哪些？块状元素有哪些？css的盒子模型？

行内：b, big, i, small, tt，abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var，a, bdo, br, img, map, object, q, script, span, sub, sup，button, input, label, select, textarea
块元素：address、div、video、audio、p、footer、header、form
盒子模型包括：padding、margin、border、content
W3C标准盒模型：只包含content
IE盒模型：content+padding+border
box-sizing：border-box/content-box/inherit
border-box：在已设定好的宽高内绘制 内 边距和边框
content-box（默认）：在已设定好的宽高 外 绘制内边距和边框
inherit：继承父级box-sizing属性

5.< DOCTYPE html >的作用

声明文档的解析类型，使浏览器统一使用W3C标准渲染页面

6.css引入的方式有哪些？link和@important有什么区别？href与src的区别？

css引入的方式：①外部样式表②内联样式表③行内样式
link和@important的区别：
A.语法不同：
link写在HTML中

<link href="./url" rel="stylesheet" type="text/css" >
//rel 属性指示被链接的文档是一个样式表

@import url 多用于css文件中，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可，便于修改和扩展

1.在html中
　　<style>
　　　　@import url
　　</style>
2.在css中
@import url

B.本质不同
属于标签，只能放入html源码里进行使用，而@import可以看作为css样式，可以引入css样式（link属于html标签，而@import是css提供的）
C.加载顺序不同
页面加载时，link会被同时被加载，而@import引用的css会等到页面被加载完的时候再加载
D.兼容性
@import只有在IE5以上才能被识别，而link是html标签，无兼容问题

href和src的主要区别在于，href用于在当前文档和引用资源之间建立联系，不会阻碍当前文档的加载渲染，而src是将资源引进来，当文档渲染到这一步的时候，会暂停下来等该资源加载完毕之后再进行下面的渲染。

7.split()和join()的区别

split()是按照指定字符将字符串分裂成数组
join()是按照指定字符将数组拼接成字符串

8."==" 和 " ==="的区别是什么?

‘= =’ 在比较前会先去隐式转换数据类型让两边的数据类型一致后再比较是否相同
‘= = =’ 则是直接判断两边是否相同， 不会转换数据类型。

9.判断一个字符串[“abcdddddef”]中出现次数最多的字符，统计这个次数？

方法一：
const str="abcdddddef";
const countMap={};
for(let i=0,len=str.length;i<len;i++){
	const item=str[i];
	if(countMap[item]){
		countMap[item]++;
	}else{
		countMap[item]=1;
	}	
}
const max=Math.max(...Object.values(countMap));
const maxNum=Object.keys(countMap).find(key=>countMap[key]===max)
console.log(`${maxNum}:${max}`)

方法二：
function countStr(str){
    let arr = str.split('').sort(); 
    let currentCount = 0, count=0, currentChar = '', char='';
    for(let i=0,len=arr.length; i<len; i++){
        if(arr[i] === currentChar){
            currentCount += 1;
        }else{
            if(currentCount > count){
                count = currentCount;
                char = arr[i-1];
            }
            currentChar = arr[i];
      currentCount = 1;
        }
    }
    console.log(`char=${char}, count=${count}`)
}

10.编写一个方法去掉一个数组的重复元素？

方法一：
const arr = [1, 2, 4, 2, 1, 2, 3, 5]
function unique(ary){
	let result=[],obj={}
	ary.forEach(item=>{
		if(!obj.item){
			result.push(item)
			obj[item]=item
		}
	})
	return result
}
unique(arr)

方法二：
const arr = [1, 2, 4, 2, 1, 2, 3, 5]
function unique(arr){
	let result = []
	ary.forEach(item=>{
		if(result.indexOf(item) === -1){
			result.push(item)
		}
	})
	return result;
}

方法三：
const arr=[1,2,4,3,2,1,3,5];
const arr2=arr.filter((item,index)=>{
	return index === arr.indexOf(item)
})

//因为indexOf返回的是查到的第一个，所以不会再返回后面相同的元素

方法四：
const s=new Set();
let arr=[1,2,3,3,2,2,3,4,5,5,65,7,8];
arr.forEach(x=>s.add(x));
console.log(s)

方法五：
let arr=[1,11,2,22,2,1,2,4,5,2,1];
let arrNew=[];
for(let i=0;i<arr.length;i++){
	let count=arr[i];
	if(arrNew.indexOf(count)!==-1){
		count=arr[arr.length-1];    //把当前项替换成最后一项 
		arr.length--;               //把最后一项删掉
		i--;						//重新循环当前项
	}else{
		arrNew.push(count)			
	}
}
console.log(arr)
//末项替换法，比较绕

11.Ajax请求时，如何解释JSON数据？

可以使用JSON.parse（）来或者JSON.stringify（）转换接收的数据类型

12.Ajax请求时，GET和POST的区别是什么

1.get采用URL传参，post使用请求主体传参
2.get传递内容有大小限制，一般只能控制在2kb以内，而post理论上没有限制，一般控制在2Mb以内
3.get安全性较低，因为参数是通过URL传参，容易被劫持
4.get请求会出现缓存，post没有缓存，get为了避免缓存，可以在请求的URL加一个清除缓存
5.get请求向服务器发送一个TCP包，会把header和data一并发送出去，而post是会先发送header，等服务器响应之后浏览器再发送data

还有哪些请求方式：GET（获取数据）、POST（传输数据）、PUT（向服务器增加资源文件）、DELETE（删除数据）、HEAD（获取服务器的响应头信息）

这个问题专门写了一个回答，详见
ajax中的请求方式（GET、POST、PUT、DELETE、HEAD）

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

函数执行的时候，首先会形成一个新的私有作用域，供函数体中的代码从上到下执行；形成的那个私有的作用域，把函数体的代码都包起来，保护了里面的私有变量不受外界的干扰（外面获取不到也修改不了），这种保护机制就叫闭包。
特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外 界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调 用之后，闭包结构依然保存在；
对页面的影响：使用闭包会占有内存资源，过多的使用闭包会导致内存泄露等。由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成页面性能的问题;

14.列出你熟悉的JavaScript函数的写法及调用方式

A.常规的写法：
function run(){
	alert("常规的写法")
}
run() //调用

B.匿名函数写法：
let run=function(){
	alert("这是一种声明函数的方式，左边是一个变量，右边是一个函数的表达式，意思就是把一个匿名的函数表达式赋值给了变量run，只是声明了一个变量指向了一个函数对象。")
}
run()  //调用

C.将方法作为一个对象
let test={
	run1:function(){
		alert("这个必须放在一个对象内部，放在外边会出错！")	
	},
	run2:function(){
		alert("这个必须放在一个对象内部，放在外边会出错！")	
	}
}
test.run1();  
test.run2();

D.构造函数
function Person(name,age){
	this.name=name;
	this.age=age;
	this.sayName=function(){
		console.log("My name is " + this.name+", I am " + this.age + " forever")
	}
}
let hua=new Person("hua","18");
hua.sayName()

E.自执行函数
(function(){alert(1)})

15、防抖节流

防抖：对于短时间内连续触发的事件（比如滚动条的滚动事件），防抖的含义就是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次。

有时候我们会需要在滚动屏幕的时候做某些事件，比如在滑动到一定高度的时候提供回到顶部的按钮，这个时候需要利用滚动事件计算滚动的距离，但是有时候我们会拉着滚动条一直拉到我们想要的位置，这时候滚动事件就会一直在执行，所有的计算和操作也会一直在执行，这样其实没有必要也影响性能，我们只需要在我们滚动停止的时候去提供回到顶部的按钮即可，所以滚动距离的计算和操作其实在滚动到目的地的时候再执行就可以了，但是

16、cookie、localStorage、sessionStorage

cookie：
是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，只能保存字符串类型，每次请求时都带上它，服务器设置cookie的时候同时可设置失效时间，若没设置时间，关闭浏览器cookie失效，单个cookie的大小一般不能超过4kb。
应用场景：
1.保存用户的登录状态，实现记住密码自动登录
2.保存上次登录事件，上次查看的页面等等
3.浏览计数
缺点：
1.大小受限，只能存储不超过4kb
2.安全性低，可能存在cookie劫持
3.每次访问都会带上cookie给服务器，浪费带宽

localStorage：
将数据保存在本地的硬件设备，即使浏览器关闭，只要不手动清除，该数据就一直存在，可以理解为永久保存，不会与服务器进行通信，同样只能存储字符串类型，可以存储5M大小的数据

sessionStorage：
将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。也就是说只要关闭浏览器窗口，sessionStorage就会失效，为临时保存。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。存储的大小也是5M，只能存储字符串类型，不会与服务器进行通信

17、原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法。

18、性能优化有哪些

		- 防抖节流
		- 图片资源懒加载
		- 路由懒加载
		- 多数据列表使用分页
		- 组件方法封装
		- 提取公共代码，避免冗余代码
		- 利用浏览器缓存加快存取

19、v-for的key的作用

vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。但是前提是key得保持唯一性，也就是key的值不能是相同的，不然vue会当成是同一个元素，会造成渲染错误。key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。key属性可以用来提升v-for渲染的效率！

20、v-if和v-show的区别

v-if：是条件满足才进行渲染，条件不满足就不渲染，切换条件时，不满足条件的组件会被销毁，满足条件的组件会重建，适用于条件改变不频繁的场景
v-show：一开始就会渲染，相当于display属性，条件满足才会显示，切换条件也是切换display属性，不会销毁组件，适用于频繁切换条件的场景

21、nextTick()什么时候使用

DOM结构需要随数据的变化而变化的场景，因为DOM渲染是异步的，比如在created()中的操作，此时dom还没有渲染，所以如果在created进行对DOM赋值改变，都是无效的，都需要放到this.nextTick()里面，而如果是在mounted则是DOM完全渲染完全才开始渲染数据，此时在mounted操作DOM基本不会出问题。

22、Vuex是什么？工程变大不同组件使用vuex出现同名方法怎么处理？

23、基础类型和引用类型的区别，引用类型的地址存在哪里

基本数据类型操作的是值，而引用数据类型操作的是对存储空间的引用地址 基本数据存在栈内存 引用类型存在堆内存

24、对象深拷贝和浅拷贝的区别？如何进行深拷贝

浅拷贝复制内存地址，深拷贝复制对象内容
浅拷贝只是增加了一个指针指向已存在的内存地址，只是引用了原来的对象，拷贝的是一个对象地址，比如B是对A进行浅拷贝得到的对象，那么A对象的某个属性改变，B对象相应的属性也会跟着改变

let A = {a:'aaa', b:'bbb'}
let B = A
A.a = 'ccc'
A  //{a:'ccc', b:'bbb'}
B  //{a:'ccc', b:'bbb'}

深拷贝是拷贝储存在栈中的对象，存到一个新的内存空间，增加了一个指针指向这个新的内存空间，深拷贝的方式有：

// A.利用JSON的方式
let objA = { a:1,b:2,c:{a:1,b:2} }
let objB = JSON.parse(JSON.stringify(objA))
//但是这种方法对函数无效

//B.for...in遍历加递归的方式实现
let objA = { a:1,b:2,c:{a:1,b:2} }
function deepClone(oriObj){
	let result = Array.isArray(oriObj) ? [] : {} 
	for(let key in oriObj){
		if(typeof oriObj[key] == 'object'){
			result[key] = deepClone(oriObj[key])
		}else{
			result[key] = oriObj[key]
		}
	}
	return result
}
let objB = deepClone(objA)

//C.利用lodash工具库，需要引入lodash
import _ from 'lodash'
let objA = { a:1,b:2,c:{a:1,b:2} }
let objB = _.defaultsDeep({},objA)

//以上是真正的深拷贝，如果属性值也为对象，也会进行深拷贝，拷贝后属性值的对象不会受原来的影响，但是我们日常开发中对对象的处理很多时候只是简单的处理，对于没有多层对象的，虽然复制之后不会受原本的改变，但是本质上还是浅拷贝，比如：
let objA = {a:1, b:2, c:{a:1, b:2}}
let objB = {...objA}
objA.a = 3
objA.c.a = 'aaa'
console.log(objA)   //{a:3,b:2, c:{a:'aaa', b:2}}
console.log(objB)	//{a:1,b:2, c:{a:'aaa', b:2}}
//内嵌的对象还是会同步被改变，所以并不是深复制

//还有一个是Object.assign()
let objA = {a:1, b:2, c:{a:1, b:2}}
let objB = Object.assign({},objA)

25、stringify序列化对象时，对象的属性是function、null、undefined

26、this指向

关于this的指向以及改变this的方法，我详细整理了一篇，可以前往查看 理解JS中的this指向，如何改变this的指向，call、apply、bind的用法

27、完成以下字符串转换：

原字符串：‘水；甘油；丙醇’
目标字符串：
水
甘油
丙醇

let origin = '水；甘油；丙醇'
let target = origin.split('；').join('\n')

或者
let target = origin.replace(/；/g,'\n')

//注：上面的分号是中文的分号

28、计算0.1+0.7的结果？

JS中数字运算时，小数的计算会有一个精度缺失的问题，像0.1+0.2 !== 0.3，0.1+0.7 !== 0.8
为了避免精度的问题，我们可以利用toFixed方法或者将小数转化为整数：

let result=(0.1+0.2).toFixed(1)    //0.3
let result=(0.1+0.7).toFixed(1)    //0.8

let result=(0.1*10 + 0.2*10)/10    //0.3
let result=(0.1*10 + 0.7*10)/10    //0.8

29、JS的内置类型有哪些？（JS的数据类型有哪些？）

Number、String、Boolean、Null、Undefined、Symbol （ES6新增）、Object
基本数据类型：Number、String、Boolean、Null、Undefined、Symbol （ES6新增）
引用数据类型（Object）：包含对象和函数
对象包含数组、对象、正则

30、vue2.x与3.0中各自观察对象属性变化引起视图更新的方式

vue2.x : Object.defineProperty
vue3.0 : proxy

31、判断一个字符串是否为中心对称？

如 aba //true aaa //true abccba //true abcacba // true abc //false

function isCentrosymmetric(str){
	let strLen = str.length;
	let strIndexA = Math.ceil(strLen/2);
	let strIndexB = strLen%2 ? Math.floor(strLen/2) : Math.ceil(strLen/2);
	let strA = str.slice(0, strIndexA);
	let strB = str.slice(strIndexB);
	return strA === strB.split('').reverse().join('') ? true : false
}

isCentrosymmetric('abccba')    //true
isCentrosymmetric('abaab')     //false

32、原型、原型继承

利用原型让一个引用类型继承另一个引用类型的属性和方法
原型继承：
1.利用原型链继承的方式继承
2.借助构造函数继承
3.ES6的super

33、前端导出、后端导出

Excel文件导出，前端导出或者后端导出

34、输出以下代码的运行结果

var a = 4399 < 0 || typeof(4399 + '')
console.log(a)

//string

35、填写内容让下面代码支持a.name=‘name1’，b.name=‘name2’

function obj(name){
	//return name ? {name} :  ''//
}
obj.//prototype.name// = 'name2'
var a = obj('name1')
var b = new obj


用'//'包围起来的地方为填写的地方

36、讲一下闭包，有什么好处和坏处，哪些操作会引起内存泄露

函数执行的时候，首先会形成一个新的私有作用域，供函数体中的代码从上到下执行；形成的那个私有的作用域，把函数体的代码都包起来，保护了里面的私有变量不受外界的干扰（外面获取不到也修改不了），这种保护机制就叫闭包。
闭包的好处：可以实现封装，私有作用域的变量不受外界干扰，也不用担心命名冲突
坏处：闭包会使得函数中的变量都被保存在内存中，内存消耗很大，如果滥用闭包，可能导致内存泄露。
哪些操作会引起内存泄露：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
1.闭包
2.没有及时清除的定时器或者回调
3.子元素存在引起的内存泄露

37、请解释TCP连接建立过程和释放过程

TCP的建立过程为三次握手，释放过程为四次挥手。
第一次握手是客户端发送syn包到服务器，进入send状态，等待服务器确认，服务器收到syn包，确认收到，并且发送一个syn包，即syn+ack返回给浏览器，这是第二次握手，进入recv状态，客户端收到syn+ack包，向服务器发送ack包，此包发送完毕，客户端和服务器进行established状态，完成三次握手。

第一次挥手:客户端A发送一个FIN.用来关闭客户A到服务器B的数据传送，第二次挥手:服务器B收到这个FIN. 它发回一个ACK，确认收到，第三次挥手:服务器B关闭与客户端A的连接，发送一个FIN给客户端A，第四次挥手:客户端A发回ACK报文确认

38、讲一下事件冒泡、事件捕获、事件委托

事件冒泡（false）：从里到外触发事件
事件捕获（true）：从外到里触发事件
事件委托：当有多个类似元素需要绑定事件时，一个一个去绑定既浪费时间，又不利于性能，这时候可以使用事件委托，给他们的一个共同父级元素添加一个事件函数去处理他（借助事件冒泡的原理）

39、http是什么

HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。

40、vue双向绑定的原理，vue数据响应式的原理

.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变.
利用 Object.defineProperty()的get和set方法，利用watch监听，v-model是一个语法糖，实际上是绑定了@input事件

41、$nextTick的作用和原理

因为vue加载DOM是异步的，所以当我们需要在DOM更新完毕之后再处理一些事情的时候，$nextTick的回调会提供一个环境，保证已经是更新完DOM的
原理：vue加载DOM是异步的，会形成一个任务队列，异步更新队列

42、$set

Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

43、封装组件需要注意一些什么

提供props emit slot ，props可以加一些校验

44、slot插槽

具名插槽、匿名插槽、作用域插槽
作用域插槽：父组件可以访问传递给插槽的对象

45、什么是生命周期，谈一下vue的生命周期

生命周期就是在** 在某一时刻会自动执行的函数 **。
beforeCreate：实例初始化，将data里面的属性转化为依赖getter、setter的响应式数据，这个时候数据和模板还没有建立连接，这个时候还不能操作对象属性
created：这个时候实例已经创建，但是DOM还没创建，可以先进行一些数据的请求
beforeMount：模板编译，DOM还没完全生成
mounted：DOM生成，可以对DOM进行操作
以上四个生命周期每个组件只会执行一次
beforeUpdate、updated、beforeDestroy、destroyed
如果有父子组件的话 会先从父组件开始 到beforeMount 开始走子组件 到beforeMount 然后是子组件的一堆mounted 最后父组件

45、前端处理跨域的方式

所谓跨域问题，主要因为浏览器的安全策略是同源策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互请求。
1.jsonp是一种借助于 script 标签发送跨域请求的方式。
2.2.CORS 跨域资源共享，只需要在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
3.中转服务器
4.vue proxy代理
5.本地加host映射

46、组件间传值

父子传值：props、emit、$parent、$children
兄弟间传值：vuex、eventBus(借助中间件，绑定emit事件，监听on事件)
跨级：$attr(除props，style外)，ref，$parent，$children、vuex

47、axios

axios.create
axios.request
axios.response

48、小程序授权登陆

通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候，判断用户是否授权了，如果没有授权的话就显示授权页面，让用户去执行授权的操作。如果已经授权了，则直接跳过这个页面，进入首页。code 换取 openID

49、自定义指令

directive

50、vue的好处和坏处

好处：性能好、简单易用、前后端分离、单页面应用用户体验好
坏处：不利于做SEO，封装的比较厉害，报错不明显

51、前端性能优化

减少http请求、合理使用缓存、启用压缩、图片懒加载、数据列表进行分页、借助cdn引入资源

52、数组常用的方法

pop、push、shift、unshift、concat、splice、slice、join、reverse、toString、eval（将JS字符串变成JS表达式执行的一个方法）、sort（排序）、indexof、lastIndexOf、forEach、map
ES6：filter、find、findIndex、some、every、reduce（累加器）

53、字符串常用的方法

大小写转换：toLowerCase 、toUpperCase
替换：str.replae
分割：str.split
查找：indexOf lastIndexOf
截取：substr 截取m个
substring 截取到m处
slice 截取到m处
ES6：includes

54、Math常用的方法

Math.abs()：取绝对值，把负数变成正数
Math.ceil()：向上取整,把带有小数的数取比本身高的整数
Math.floor()：向下取整，把带有小数的数取比本身低的整数
Math.round()：四舍五入，正数情况下，小于5是舍，5及5以上是入；在负数情况下，5及5以下是舍，5以上是入
Math.max()：求最大值
Math.min()：求最小值
Math.random()：获取[0-1)（包含0但不包含1）之间的随机小数

55、ES6常用

promise、async、箭头函数、解构、扩展运算符、class、object.assign、[].keys、[].values、generate

56、什么是MVVM？

第一个M代表model数据，第一个V代表view视图，后面的VM代表viewModel 视图数据连接层（数据驱动视图），程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。

57、computed和watch的区别，和method的区别？

computed，当计算属性依赖的内容发生变更时，才会重新执行计算。依赖于其他属性，当其他属性改变时会引起它的改变。 watch，它可以侦听data中值的变化，做出相应的操作，也就是它改变之后相应的做出其他改变。computed和methods的区别，methods是只要页面重新渲染（比如修改了某一个值），就会重新执行方法，computed是当计算属性依赖的内容发生变更时，才会重新执行计算

58、什么是单向数据流

数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父组件传递过来的数据。

59、动画和过渡的区别

动画：一个DOM元素，从一个地方移到另一个地方，这种效果叫做动画。比如一个层从浏览器的左侧移动到右侧，这就是动画。

过渡：是DOM元素中的一个属性，缓慢的变成另一个属性，这种效果叫做过渡效果。比如一个层从红色慢慢变成黄色，这种就是过渡。

39、函数式组件，首屏怎么优化，axios，小程序授权登陆，自定义指令，vuex实时更新，es6，

iso/osi参考模型共分为七层结构,从下到上顺序依次为:物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。

40、移动端有什么兼容性问题？

①vh单位，有些浏览器会把地址栏部分的高度包含在一屏高度中，导致页面效果不是我们想要的一屏大小，可以用innerHeight

41、理解重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。