面试流程：小天才步步高

春招笔试：
单选：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=200px

let: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);