一面：
(1)自我介绍（没有好好准备，感觉没有介绍项目经验，没有对会的知识做一个梳理和引导,由于本身不是计算机的，一些无关基础说的略多）。
(2)问了其中一个项目的细节（不知道是我有什么原因，之前基本没面试过，感觉在这里开始，面试官莫名语气不太好，有些不耐烦和不屑的感觉）
问项目是怎么实现的，是用什么前端方法？
答：应该算是后端的，全是用python
请求url的时候有没有遇到什么问题？
只需要refer参数吗？
又问了来源哪里？
(3)问了js中数组有哪些方法？
回答：join,push,pop
问：还有吗？
答：shift,unshift,splice,slice
问：还有吗？（可能是没答到面试官想要的）
答：map和forEach
(4)map和forEach区别
map会返回新数组，forEach不会
(5)forEach会改变原数组吗
答：不会
(6)你可以手写在原型上的map函数的实现吗（当时没写出来，这是面后写的）
//自己编写
Array.prototype.mymap=function(fun){
const result=[];
//this是指调用map方法的对象（数组）
for(let i=0;i<this.length;i++){
let per=fun(this[i],i)
result.push(per);
}
return result;
}
const arr=["1","2","3"];
console.log(arr.mymap(Number));
//[1,2,3]
const arr1="123".split("");
console.log(arr1.mymap(Number));
console.log(typeof arr1.mymap(Number)[0]);//number
(7)浏览器请求一个url的全过程？
根据url先通过DNS域名解析系统找到ip地址，之后建立tcp连接，连接完成后，传输数据，浏览器解析页面。
(8)浏览器解析渲染页面的过程（当时不回答）
浏览器将获取的 HTML 文档解析成 DOM 树，处理 CSS 标记，构成层叠样式表模型（CSSOM）；将DOM和CSSOM合并为渲染树，渲染树构建完成后，浏览器开始计算元素的大小和位置( layout )，进行渲染树布局；布局完成后，根据计算好的节点信息将内容绘制到屏幕上( painting ，渲染树的绘制)
(9)说一说水平居中垂直居中的实现方式（感觉当时没说好，没说哪个给父元素设，哪个给子元素设）
margin:0 auto;可以实现水平居中
弹性盒：父元素设置弹性盒，子元素设置justify-content:center;和align-items:center;水平垂直居中
追问还有呢：
父元素：width和line-height相等，垂直居中
追问还有呢：
display:tabel-cell;
并且设置属性vertical-align:middle。垂直居中（这里当时记成center了，说错了）
整理：
（1）
(10)说一下项目中的弹窗的意思，以及怎么实现动画的
就是游戏结束后覆盖整个页面的弹窗
(11)说一下项目中动画怎么实现的
使用@keyframes sizeMergeTo1{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
然后在js中要加动画的元素添加animation属性（boxs[index].children[0].style.animation = “size0to1 1s”;）。
(12)说一下实现一个方块从左侧移动到右侧200px的方法
定位+过渡属性+left
追问：你知道这种方式有什么缺点吗？还有其他方式吗
会脱离文档流，那用margin-left加过渡属性也可以
追问：不用上述两种还有其他吗
不知道
追问：知道使用transform的属性实现吗
不知道（忘了transform的平移属性（translateX(200px)）了）
(13)你知道transfrom的属性吗
答：有旋转rotate和缩放scale
(14)算法题：
题目描述：统计1-100这100个数字中每个位置出现0-9的个数并输出；
const arr=new Array(10).fill(0);
function perNum(str){
for(let i=0;i<str.length;i++){
arr[str[i]-"0"]++;
}
}
for(let i=1;i<=100;i++){
let str=i+"";
perNum(str);
}
console.log(arr)
二面：
(1)自我介绍（因为两次面试连着的，加上上一场感觉不太好，这里也没弄好）
(2)说一下如何实现水平居中
可以用弹性盒，设置justify-content：center
追问：可以写出css代码（由于第一次用牛客那个系统，之前也没想着提前看一下流程，以及是两轮面试）
(3)你觉得自己适合前端吗？
(4)怎么理解盒模型？有几种盒模型？区别
标准盒模型和怪异盒模型，标准盒模型的width和height不包括boder和padding，只是文本内容区content的宽高。
(5)怎么设置标准盒模型？（当时答浏览器默认的就是标准盒为什么还要设置）
box-sizing:content-box;
(6)平常都只使用标准盒子模型吗？
不是，看情况有时候使用使用标准盒模型有时候使用怪异盒模型。
(7)怪异盒模型的使用场景？使用哪个属性设置？（知道怪异盒模型是固定宽高，但问使用场景懵了。属性名字一定要记清楚，当时也说错了）
场景：固定大小，属性名字：box-sizing:border-box;
(8)知道什么是同步任务和异步任务吗？区别
在同步中，发出一个功能调用时，必须一件一件事做，等前一件做完了才能做下一件事；而在异步中，当一个异步过程调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作。
追问：知道哪些异步事件
点击事件等响应事件，定时器函数，ajax请求（当时没说这个）
(9)知道什么是事件机制吗（说不知道，只知道如果是异步事件要放入回调队列等所有同步任务执行完成后再一步步执行）
a. 事件传播机制
网页上简单的事件被触发之后，不是简单的结束，还可能会触发其他事件（事件流）。整个dom是一体的，单个元素被触发以后会影响其他元素。
DOM事件流顺序：事件捕获阶段->处于目标阶段->事件冒泡阶段（左边比右边优先发生）
事件冒泡：从底层一层层往上传输
事件捕获：一些从上往下的事件（不会马上触发，从顶部流到下面再进行触发）
b. 事件轮询机制
因为js是单线程，所以异步任务的解决方案是事件轮询。事件轮询是指主线程任务执行完之后，将异步队列中的回调函数通过事件轮询一个个推到主线程中去执行。
(10)知道什么是js的数据代理吗？（不知道，忘了问的是数据代理还是事件代理了，这地方还是要好好看看）
a.js数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是Object.defineProperty() 和 ES2015 中新增的 Proxy 对象
b.js事件代理/事件委托：是基于js的事件流产生的，事件流有2中类型，即冒泡和捕获。
(11)知道怎么从js中得到一个id的元素吗
var x=document.getElementById(id名)
追问：知道怎么从js中得到class的元素吗
var x=document.getElementsByClassName(类名)
(12)知道怎么通过js插入一个html元素吗（这个当时忘了，不会，说好像可以通过标签字符串添加）
方法一：用字符串的方式
var str='<div>我是页面</div>';
document.getElementById('body').innderHTML=str;//就可以通过js插入html代码了
(13)会写promise吗
(14)了解vue吗
只了解一点点指令，和跟着学过一点点组件
(15)知道v-if和v-show的区别吗
v-show操作style属性，v-if直接操作dom元素
(16)知道vue的生命周期吗（不知道，vue只是很久之前偶尔看了几节，知道不到10%，早知道当时应该答不了解vue了，不过下去还是要学学vue）
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
(17)知道keep-alive吗（不知道）
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。
(18)知道cookie sessionStorage localStorage 区别吗（不知道）
共同点：都是保存在浏览器端、且同源的
区别：1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.
(19)会写快排吗（依然是不知道怎么使用牛客那个东西，我写在那个页面了，但是那边看不到，一直看不到，只讲了一下思路就结束了）
function quickSort(arr){
if(arr.length<=1){
return arr;
}
const left=[];
const right=[];
let provit=arr[parseInt(arr.length/2)];
for(let i=0;i<arr.length;i++){
if(i!=parseInt(arr.length/2)){
if(arr[i]<=provit){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
}
return quickSort(left).concat([provit],right)
}
const arr=[1,2,3,7,12,3];
console.log(quickSort(arr));//[ 1, 2, 3, 3, 7, 12 ]
总结：不评价面试体验，这里只总结个人不足
（1）自我介绍没有重视，没有好好总结项目，以及从自我介绍中介绍一下自己目前掌握的知识，导致问的时候，面试官可能找不到重点。
（2）表达要清晰具体一些，比如设置居中那里，给哪个元素设置哪个属性要说清楚
（3）还是要背一下八股，否则一些名词可能都不知道说的是啥
（4）面试不要太啰嗦，不要问太多，不确定的也不要说（尽量说肯定的，被问能解答的，要是只是了解一些，那就不要答那点，否则会被追问，然后又答不上），言多必失。
（5）面试之前一定要熟悉一下远程面试环境！！！！
