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>
![](prince.png)
</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程序性能
减轻服务器和宽带的负担
缺点:
前进后退按钮被破坏
搜索引擎的支持不够
开发调试工具缺乏
网友评论