本文已参与「 新人创作礼 」活动，一起开启掘金创作之路
1. 请写出一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
div{
width:200px;
height: 100px;
border:1px solid #39f;
}
div p{
display:inline-block;
vertical-align:middle;
}
div .after{
display:inline-block;
*display: inline;
*zoom:1;
vertical-align:middle;
width:0;
height:100%;
}
实现方式大致有7，8 种 ，我之前的分享文章中有专门写过
2. CSS样式覆盖规则有哪些
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。
3. position的值有那几个，如何用 ？
relative\absolute\fixed\static
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
4. JavaScript循环有哪些，应注意什么？
for
[].foreach value index array 循环不能退出. method 没有返回值 es3
[].map , value index array. 循环不能退出 method 有返回值 es5
some 返回true结束
every 要想继续必须返回true
for in
for of
while
5.javascript 数组有哪些类型 ，并且区别 , 如何遍历,描述下使用场景？
Array、Map和Set (other)
Array [1,1,2,4]
Set [1,2,3] 不能重复
Map [[1,5] , [2,3] ,[3,5]] key不能重复
6.请描述一下 cookies sessionStorage和localstorage区别
相同点 都存储在客户端
1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
7.document.write和innerHTML的区别
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。
每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。
如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
8.http 和 https 有何区别？如何灵活使用？
共有状态大约30多种。。。说出大概即可
2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。
这些错误可能是服务器本身的错误，而不是请求出错。
9.如何进行网站优化
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议：使用 service workers + 流
13. 图片编码优化
10 react和vue有哪些不同，说说你对这两个框架的看法
相同点
1. 都支持服务器端渲染
2. 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
3. 数据驱动视图
4. 都有支持native的方案,React的React native,Vue的weex
不同点
1. React严格上只针对MVC的view层,Vue则是MVVM模式
2. virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,
每当应用的状态被改变时,全部组件都会重新渲染,
所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3. 组件写法不一样, React推荐的做法是 JSX + inline style,
也就是把HTML和CSS全都写进JavaScript了,即'all in js';
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4. 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
5. state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理
PS：这套大约有4.5年了，但是面试大同小异，目前的知识点早已经更新， 今天有点累，就copy了下自己之前写的了。明天继续。啦啦啦啦啊
