前端笔试题(二)
1.请描述一下cookies,sessionStorage ，localStorage的区别?
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage 、localStorage 和 cookie 之间的区别：
共同点：都是保存在浏览器端，且同源的。
区别:
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
为什么选择Web Storage而不是Cookie？
与Cookie相比，Web Storage存在不少的优势，概括为以下几点：
- 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
- 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
- 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
- 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
2.对于sass和less的了解?
3.如何阻止事件冒泡和事件的默认事件?
答案见前端笔试题(一)
4.javascript中的"闭包"是什么?请举一个例子.
见我之间文章闭包
5.清除浮动的几种方法?(至少两种)
答案见前端笔试题(一)
6.css居中你有几种方式(至少两种.包括水平居中)
1.水平居中的text-align:center 和 margin:0 auto。这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。
2.垂直居中的line-height至于line-height，他也是作用在父元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中了。此处仅仅只能是文字。
3.margin:auto法
css代码
div{
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML代码
<div>
</div>
4.负margin法
CSS代码
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
HTML代码
<div class="container">
<div class="inner"></div>
</div>
5.transform法
CSS代码
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
HTML代码
<div class="container">
<div class="inner"></div>
</div>
6.弹性盒子法
CSS代码
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
HTML代码
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>
7.前端有哪些性能优化的方法?(至少提供三种)
答案见前端笔试题(一)
8.css3有哪些新特性?
1: CSS3选择器部分
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
E:root 匹配文档的根元素。在HTML中，根元素永远是HTML
E:nth-child(n) 匹配父元素中的第n个子元素E
E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
E:last-child 匹配父元素中最后一个E元素
E:first-of-type 匹配同级兄弟元素中的第一个E元素
E:only-child 匹配属于父元素中唯一子元素的E
E:only-of-type 匹配属于同类型中唯一兄弟元素的E
E:empty 匹配没有任何子元素（包括text节点）的元素E
:target 匹配相关URL指向的E元素
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
E:not(s) 匹配所有不匹配简单选择符s的元素E
E ~ F 匹配E元素之后的F元素
2、 CSS3)特效部分1：圆角，阴影，渐变
border-radius
box-shadow
text-shadow
-webkit-gradient
3、 CSS3特效部分2：背景，边框背景
background-origin
background-clip
background-size
multiple backgrounds
border-image
4、 CSS3特效部分3： 变形
rotate
X/Y/Z
scale
translate
transform-origin,transition-property,transition-duration,
transition-timing-function,
transition-delay
skew
matrix
5、 CSS3特效部分4：动画
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
-webkit-animation-direction
9.ajax都有哪些优点和缺点?
优点:
不需要插件
客户体验极佳
提升Web程序性能
减轻服务器和宽带的负担
缺点:
前进后退按钮被破坏
搜索引擎的支持不够
开发调试工具缺乏
