- 阅读以下html片段，先要将内层div水平垂直居中于外层div，写出相应css。
<div class="wrap">
<div class="center"></div>
</div>方法一：定位+margin
.wrap {
width: 200px;
height: 200px;
background: yellow;
position: relative;
}
.center {
width: 100px;
height: 100px;
background: green;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}方法二：diaplay:table-cell
.wrap{
width: 200px;
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center{
display: inline-block;
width: 100px;
height: 100px;
background: green;
}方法三： 定位+translate
.wrap { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; transform:translate(-50%,-50%); width: 100px; height: 100px;}方法四： flex布局
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: green;
width: 100px;
height: 100px;
}方法五： flex + margin
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
}
.center {
background: green;
width: 100px;
height: 100px;
margin: auto;
}margin在flex布局中，子元素margin为auto的时候，伸缩包含块剩余的空间将会分配到flex-item的外边距margin上。
方法六：定位
.wrap { background: yellow; width: 200px; height: 200px; position: relative;}/**方法一**/.center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px; }/**方法二**/.center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;}方法七：pinggding
.wrap {
background: yellow;
display: inline-block;
padding: 10px;
}
.center {
background: green;
width: 100px;
height: 100px;
}
方法八：margin
.wrap {
background: yellow;
display: inline-block;
}
.center {
background: green;
width: 100px;
height: 100px;
margin: 20px;
}2.用纯css实现一个持续动画的效果
<div class="run"></div>
.run {
margin-top:10px;
height: 100px;
width: 100px;
background: pink;
animation: move 1s linear infinite;
}
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}3.写出下面运行结果
（function (){
console.log(a);
var a = 1;
function a (){}
console.log(a)
}）()结果为：
ƒ a(){}
1
理由：函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。
原理：
(function(){
var a = function(){};
var a;
console.log(a);//ƒ a(){}
a = 1;
console.log(a);//1
})()4.写出下面javascript运行结果
function foo(){
getName = function(){
console.log('1');
}
return this;
}
foo.getName = function(){
console.log('2');
}
foo.prototype.getName = function(){
console.log(3);
}
var getName = function (){
console.log('4');
}
function getName(){
console.log('5');
}
foo.getName();//2
getName();//4
foo().getName();//1
getName();//1
new foo.getName();//2
new foo().getName();//3
5.什么是浏览器重绘？列举浏览器触发重绘的情况，并简述浏览器渲染过程。
浏览器渲染过程：
1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式.
3. dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。
注意： visibility:hidden隐藏的元素还是会包含到render tree中的，因visibility:hidden 会影响布局(layout)，会占有空间。
重绘：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
6.列举HTTP1.1协议中常用的请求头、响应头字段并解释说明。
7.简述你对浏览器资源缓存的理解
8.在commonJS规范中，exports和module.exports有什么区别？在es2015规范中export和 export default 又有什么区别？列举常用模块加载器。
require,import
9.写出下列代码执行结果
setTimeout(()=>{
console.log(1);
},0)
const promise = new Promise(resolve => {
console.log(2);
window.sum = 0;
for(let i = 1; i<=100;i++){
setTimeout(()=>{
window.sum +=i;
},0);
if(i===100){
resolve();
}
console.log(3)
}
})
promise.then(()=>{
console.log(4);
})
console.log(5)
setTimeout(()=>{
console.log(window.sum)
},0)
结果为：2, 100个3, 5，4， 1， 5050
这里考了同步函数和异步函数的执行过程，还有let的作用域，let声明的变量只在当前作用域生效，所以i是变化的。如果把let改成var则i就不会变化，sum的值就为100个101相加。
10.列举你知道的前端性能优化方案。
11.写出数组去重代码
