春招笔试：
单选：html内联 css选择器 vue的绑定事件 vue生命周期 vue的父子传值
多选：数据结构 的队和栈特点，很简单。
简答：
osi七层模型和tcp/ip四层模型
浏览器url发生的过程
前端优化的常用方法
编程题：
div盒子，垂直水平居中，高度为宽度一半。
防抖和节流函数编写。
简答：
1 ，OSI定义了网络互连的七层模型（物理层、数据链路层、网络层、传输层、会话层、表示层、应用层）
应用层：为应用程序或用户请求提供各种请求服务。
表示层：数据编码、格式转换、数据加密
会话层：创建、管理和维护会话。
传输层：数据通信。建立主机端到端的链接
网络层：IP选址及路由选择
数据链路层：提供介质访问和链路管理
物理层：管理通信设备和网络媒体之间的互联互通
TCP/IP协议体系结构四层分别是：1、数据链路层；实现网卡接口的网络驱动程序，以处理数据在物理媒介上的传输。2、网络层；实现数据包的选路和转发。3、传输层；为两台主机上的应用程序提供端到端的通信。4、应用层；负责处理应用程序的逻辑。
2.从打开浏览器输入网址到最终的网页呈现在浏览器中，大致以下过程：
DNS解析——解析域名，获取对应的ip地址
TCP连接——TCP三次握手
浏览器发送http请求
服务器处理请求并返回http报文
浏览器解析返回的数据并渲染页面
断开连接：TCP四次挥手
3，前端优化的手段：
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
编程题：
1，
方法一：利用定位（常用方法,推荐）.parent{position:relative;}.child{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}方法一的原理就是定位中心点是盒子的左上顶点，所以定位之后我们需要回退盒子一半的距离。方法二：利用margin:auto;.parent{position:relative;}.child{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;}方法三：利用display:table-cell;.parent{display:table-cell;vertical-align:middle;text-align:center;}.child{display:inline-block;}方法四：利用display：flex;设置垂直水平都居中；.parent{display:flex;justify-content:center;align-items:center;}方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)；计算方法：父盒子高度或者宽度的一半减去子盒子高度或者宽的的一半。.child{margin-top:200px;margin-left:200px;}方法六：利用transform.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}方法七：利用calc计算.parent{position:relative;}.child{position:absolute;top:calc(200px);//（父元素高-子元素高）÷ 2=200pxlet:calc(200px);//（父元素宽-子元素宽）÷ 2=200px}
让盒子的高度始终等于宽度的一半
宽度在可变的情况下，要设置高度始终等于宽度的一半，那么就得提一下margin和padding的百分比值的参照是谁，他们的百分比等于的不是高度的而是宽度的百分比；
所以这里只需要设置padding:25% 0;这样就让高度变成了宽度的一半；
2，防抖节流：
防抖
每次事件触发后总是等待一段时间执行，如果在等待时间内事件再次触发，则重新计算等待时间（停止触发的时候只会执行一次,最后一次生效）
let timer = null;
function debounce (fun,wait) {return function () {const argu = arguments;// 事件触发，如果之前有等待的事件，则清空计时，重新进行事件等待执行if (timer) {clearTimeOut(timer);}timer = setTimeout(function () {fun.apply(this, argu);}, wait);}
}// 调用
debounce(fun, 100)(argu1, argu2);节流
每次事件触发后总是等待一段时间执行，如果在等待时间内事件再次触发（事件触发时有其他事件在等待），则不作处理。如果事件触发时没有其他事件在等待，则将事件进行绑定（等待时间到则进行事件执行）多次触发事件时只有一次生效，对应时间内只执行一次，第一次生效。
let timer = null;
function throttle (fun,wait) {return function () {const argu = arguments;// 事件触发，如果之前有等待的事件，则不作处理if (timer) {} else {事件触发，前面没有事件在等待，则将事件进行等待执行timer = setTimeout(function () {fun();}, wait);}}
}// 调用
throttle(fun, 100)(argu1, argu2);
