1.精灵图(CSS Sprites)的优点和缺点
精灵图是一种网页图片应用处理方式。就是把网页中很多小背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景图显示及定位，达到显示某一部分背景图的效果。
精灵图的优点：
1、减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头部信息，从而减少了字节数。
2、减少了网页的http请求次数，从而加快了网页加载速度，提高用户体验。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
精灵图的缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
3.在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
4.精灵图不能随意改变大小和颜色。精灵图改变大小会失真模糊，降低用户体验，css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题。现在一般都是用web字体(图标字体)来代替精灵图。
2.什么是vue全家桶
Vue + vue-router + vuex + axios + es6 + sass
3.doctype是什么，网页常见doctype及特点
DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。
常见类型：
1.过渡型(Transitional)：要求非常宽松，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.严格型(Strict)：要求非常严格，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.框架型(Frameset)：专门针对框架页面设计使用，如果你的页面中包含有框架（frameset），完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3.什么是web语义化，有什么好处
Web语义化简单来说就是为了让页面对人和机器更友好，让人和机器更容易理解页面内容。
1.对机器来说，语义化能让机器更精确的知道页面中的重点和关键点。让机器更容易为人筛选出想要的部分。
2.对开发人员来说，更容开发和易维护页面。根据页面中的标签名和类名就能知道哪个部分放置了哪些内容，从而提高了开发和维护的效率。
4.你知道的HTTP 请求方式有几种
HTTPRequestMethod共计17种
1.GET 请求指定的页面信息，并返回实体主体。
2.HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
3.POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4.PUT 从客户端向服务器传送的数据取代指定的文档的内容。
5.DELETE 请求服务器删除指定的页面。
6.CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7.OPTIONS 允许客户端查看服务器的性能。
8.TRACE 回显服务器收到的请求，主要用于测试或诊断。
9.PATCH 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
10.MOVE 请求服务器将指定的页面移至另一个网络地址。
11.COPY 请求服务器将指定的页面拷贝至另一个网络地址。
12.LINK 请求服务器建立链接关系。
13.UNLINK 断开链接关系。
14.WRAPPED 允许客户端发送经过封装的请求。
15.LOCK 允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑。
16.MKCOL 允许用户创建资源
17.Extension-mothed 在不改动协议的前提下，可增加另外的方法。
5.css选择器有哪些
1.简单选择器
通配符选择器 *
id选择器 #id
class选择器 .class
标签选择器 element
2.复合选择器
后代选择器 element element
子代选择器 element>element
兄弟选择器 element+element
并列选择器 element,element
伪类选择器 :link
属性选择器 [attribute]
6.css hack原理及常见hack
原理：CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。
常见hack:
1.利用浏览器对相同代码的解析和支持的不同实现的hack
比如div{ _width:80px }，在ie6中能识别并解析带下划线的属性，但是ie7及以上版本中识别不了。
2.以Firefox或Webkit特有的扩展样式实现的hack
如Firefox支持以-moz-开头的属性
Webkit内核支持以-webkit-开头的属性
3.以IE特有的条件注释为基础的hack
<!--[ifIE8]> <style type="text/css"> #test{ color:red; } </style><![endif]-->
比如这个样式，可以在ie8中生效，但是其他浏览器则不会生效
7.css中有哪些常见的继承属性
文本
color(颜色，a元素除外)
direction(方向)
font（字体）
font-family（字体系列）
font-size（字体大小）
font-style（用于设置斜体）
font-variant（用于设置小型大写字母）
font-weight（用于设置粗体）
letter-spacing（字母间距）
line-height（行高）
text-align（用于设置对齐方式）
text-indent（用于设置首航缩进）
text-transform（用于修改大小写）
visibility（可见性）
white-space（用于指定如何处理空格）
word-spacing（字间距）
列表
list-style（列表样式）
list-style-image（用于为列表指定定制的标记）
list-style-position（用于确定列表标记的位置）
list-style-type（用于设置列表的标记）
表格
border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）
border-spacing（用于指定表格边框之间的空隙大小）
caption-side（用于设置表格标题的位置）
empty-cells（用于设置是否显示表格中的空单元格）
页面设置（对于印刷物）
orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）
page-break-inside（用于设置元素内部的分页方式）
widows（用于设置当元素内部发生分也是在页面顶部需要保留的最少行数）
其他
cursor（鼠标指针）
quotes（用于指定引号样式）
8.sessionStorage,localStorage,cookie区别
·共同点：都是保存在浏览器端，且同源的。
·区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
·而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
·数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
·作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。WebStorage的 api 接口使用更方便。
9.JavaScript有哪些数据类型
原始类型有6种 object,number,string,boolean,null,undefined
10.输出今天是星期几
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());alert(str);
11.如何判断一个变量是否为数组
arr.constructor === Array 为true说明是数组类型
arr instanceof Array 为true则是数组类型
Object.prototype.toString.call(arr) === '[object Array]'; 为true为数组类型
Array.isArray(arr) 为true则为数组类型
12.实现一个js深度克隆函数
//深度克隆
function deepClone(obj){var result={},oClass=isClass(obj);for(key in obj){var copy=obj[key];
if(isClass(copy)=="Object"){result[key]=arguments.callee(copy);
}else if(isClass(copy)=="Array"){result[key]=arguments.callee(copy);
}else{result[key]=obj[key];
}
}
return result;
}
function isClass(o){if(o===null) return "Null";
if(o===undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}
//克隆一个数组
var arr=["a","b","c"];
var oNew=deepClone(arr);
console.log(oNew);//Object {0: "a", 1: "b", 2: "c"}13.给定一个日期，页面打印倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
</head>
<body>
<input type="text" name="time" id="time" value="2017-09-22" />
<input type="button" name="okbtn" id="okbtn" value="确认" />
<br />
<p id="textp">这里显示倒计时</p>
</body>
<script type="text/javascript">
var okbtn=document.getElementById("okbtn");
textp=document.getElementById("textp");
okbtn.onclick=function(){
var time=document.getElementById("time");
var timevalue=time.value;
//通过正则表达式确认输入格式是否正确
var patt=/^(\d{1,4})(-)(\d{1,2})\2(\d{1,2})$/;
if(patt.test(timevalue)==false){
//如果不正确
textp.innerHTML="输入格式不满足YYYY-MM-DD";
return false;
}else{
textp.innerHTML="这里显示倒计时";
}
//获取输入的年月日
var timearray=timevalue.split("-");
//ShowLeftTime(timearray[0],timearray[1],timearray[2]);
setInterval(function(){ShowLeftTime(timearray[0],timearray[1],timearray[2]);},1000);
}
function ShowLeftTime(year,month,date){
//得出剩余时间
var now=new Date();
var endDate=new Date(year,month-1,date);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond=parseInt(leftTime/1000);
var day=Math.floor(leftsecond/(60*60*24));
var hour=Math.floor((leftsecond-day*24*60*60)/3600);
var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
var second=Math.floor(leftsecond-day*60*60*24-hour*60*60-minute*60);
//显示剩余时间
textp.innerHTML="距离"+year+"年"+month+"月"+date+"日"
+"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
}
</script>
</html>
14.数组去重
//利用indexOf
var aa=[1,3,5,4,3,3,1,4]
function arr(arr) {
var result=[]
for(var i=0; i<arr.length; i++){
if(result.indexOf(arr[i])==-1){
result.push(arr[i])
}
}
console.log(result)
}
arr(aa)
//循环嵌套
function fn(arr) {
var result = [];
var flag;
for (var i = 0, len = arr.length; i < len; i++) {
flag = false;
for (var j = 0, len = result.length; j < len; j++) {
if (arr[i] == result[j]) {
flag = true;
break;
}
}
if (!flag) {
result.push(arr[i]);
}
}
return result;
}
15.求数组中最大值，最小值和重复次数最多的数值
var arr = [1,2,2,3,5,5,5,6];
var max = arr[0]; // 数组中的最大值
var min = arr[0]; // 数组中的最小值
var mostCount; // 数组中出现次数最多的元素
var temp = {};
var num = 0;
for(var i=arr.length-1; i>=0; i--){
if(max<arr[i]){ // 得到最大值
max = arr[i]
}
if(min>arr[i]){ // 得到最小值
min = arr[i]
}
if(temp[arr[i]]){ // 得到元素出现的次数，并组成obj
temp[arr[i]] = tempObj[arr[i]]+1;
}else{
temp[arr[i]] = 1;
}
}
for(var key in temp){ // 从对象中得到数组中出现最多的元素
if(!mostCount){
mostCount = key;
}else if(temp[mostCount]<temp[key]){
mostCount = key;
}
}
console.log("最大值为"+max+"; 最小值为"+minVal+"; 次数最多的为"+mostCount);
17.请概括什么情况下打印控制台会提示undefined
1.当打印的变量声明未赋值时
2.当打印的执行函数没有返回值时
18.原生实现数组快速排序
var times=0;
var quickSort=function(arr){
//如果数组长度小于等于1无需判断直接返回即可
if(arr.length<=1){
return arr;
}
var midIndex=Math.floor(arr.length/2);//取基准点
var midIndexVal=arr.splice(midIndex,1);//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数arr[index+1]
var left=[];//存放比基准点小的数组
var right=[];//存放比基准点大的数组
//遍历数组，进行判断分配
for(var i=0;i<arr.length;i++){
if(arr[i]<midIndexVal){
left.push(arr[i]);//比基准点小的放在左边数组
}
else{
right.push(arr[i]);//比基准点大的放在右边数组
}
console.log("第"+(++times)+"次排序后："+arr);
}
//递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
return quickSort(left).concat(midIndexVal,quickSort(right));
};
console.log(quickSort(arr));
19.原生实现二分查找法
var arr = [5,0,-56,90,12];
var flag = false;//标志位进行优化，数组本来就是有序序列的话，无需再排序
//先进行大的排序
for(var i=0;i<arr.length-1;i++){
//小的排序
for(var j=0;j<arr.length-1-i;j++){
//比较
if(arr[j]>arr[j+1]){
//交换
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
flag = true;
}
}
//此部分为优化，已排序的话，无需再次排序
if(flag){
flag=false;
}else{
break;//已排序，无需交换
}
}
//输出新数组
for(var i=0;i<arr.length;i++){
document.write(arr[i]+' ');
}
20.正则表达式，清楚字符串前后空格
var str=" hello ";
str=str.replace(/^s*|s*$/g,'');
alert(str);
21.简述http协议中get和post方法的区别
1、 GET主要用于从服务器查询数据，POST用于向服务器提交数据
2、 GET通过URL传递数据，POST通过http请求体传递数据
3、 GET传输数据量有限制，不能大于2kb，POST传递的数据量较大，一般大量的数据提交都是通过POST方式
4、 GET安全性较低，容易在URL中暴漏数据，POST安全性较高
22.什么是csrf攻击，如何阻止
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
从上图可以看出，要完成一次CSRF攻击，受害者必须依次完成两个步骤：
1.登录受信任网站A，并在本地生成Cookie。
2.在不登出A的情况下，访问危险网站B。
防止方式
(1).Cookie Hashing(所有表单都包含同一个伪随机值)
(2).验证码
(3).One-Time Tokens(不同的表单包含一个不同的伪随机值)
23.服务器推送数据到前端有哪些解决方案
一、Ajax轮询
用定时器不断发送请求
优点：实现简单。
缺点：这是通过模拟服务器发起的通信，不是实时通信，不顾及应用的状态改变而盲目检查更新，导致服务器资源的浪费，且会加重网络负载，拖累服务器。
二、comet
基于 HTTP 长连接的 "服务器推" 技术，能使服务器端主动以异步的方式向客户端程序推送数据，而不需要客户端显式的发出请求，目前有两种实现方式：
1. 基于 AJAX 的长轮询（long-polling）方式
优点
客户端很容易实现良好的错误处理系统和超时管理，实现成本与Ajax轮询的方式类似。
缺点
需要服务器端有特殊的功能来临时挂起连接。当客户端发起的连接较多时，服务器端会长期保持多个连接，具有一定的风险。
2. 基于 Iframe 及 htmlfile 的流（streaming）方式
Comet的优缺点
优点： 实时性好（消息延时小）；性能好（能支持大量用户）
缺点： 长期占用连接，丧失了无状态高并发的特点。
三、websocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通讯协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
24.h5c3有哪些新增特性
h5新增的标签
新增元素 | 说明 |
video | 表示一段视频并提供播放的用户界面 |
audio | 表示音频 |
canvas | 表示位图区域 |
source | 为video和audio提供数据源 |
track | 为video和audio指定字母 |
svg | 定义矢量图 |
code | 代码段 |
figure | 和文档有关的图例 |
figcaption | 图例的说明 |
main | |
time | 日期和时间值 |
mark | 高亮的引用文字 |
datalist | 提供给其他控件的预定义选项 |
keygen | 秘钥对生成器控件 |
output | 计算值 |
progress | 进度条 |
menu | 菜单 |
embed | 嵌入的外部资源 |
menuitem | 用户可点击的菜单项 |
menu | 菜单 |
template | 模板 |
section | 区块 |
nav | 导航 |
aside | 侧边栏 |
article | 文章 |
footer | 底部 |
header | 头部 |
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
25.正则验证邮箱
由于邮箱的基本格式为“名称@域名”，需要使用“^”匹配邮箱的开始部分，用“$”匹配邮箱结束部分以保证邮箱前后不能有其他字符，所以最终邮箱的正则表达式为
^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
26.标准模式与怪异模式下盒子模型的计算方式
两种模式的区别：
标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。
标准模式:盒子总宽度/高度 = 设置宽度/高度+padding+border。
怪异模式:盒子总宽度/高度= 内容宽度/高度 + padding + border + margin;
27.你用到了es6中哪些新特性
默认参数
模版表达式
箭头函数
Promise
块级作用域的let和const
模块化
28.描述一个闭包
function A(){
var x = 1;
return function(){
return ++x;
}
}
1.存在一个函数A
2.在函数A内部返回一个函数
3.返回的函数引用A函数的私有变量
4.这个返回的函数是A函数的闭包函数
29.一个箭头函数，如何获取传入的所有实参
用无限参数
var fn = (…args)=>{
console.log(args);
}
这样就可以打印传入的所有参数
注意：在箭头函数中不能使用arguments
30.通讯协议知道哪些？讲讲websocket协议。
http、https、websocket、tcp/ip
webSocket是H5的新协议，它先通过http请求的tcp层3次握手建立连接，然后通过请求带的update:webSocket信息将http协议转换成webSocket协议，再然后就可以服务端向客户端推送信息了。Websocket建立的是长连接，它是双工通信，允许服务器端主动推送信息到客户端。http建立的是短连接，无状态单工通信。
