1、行内元素和块级元素的具体区别是什么？
块级元素(block)特性：
独占一行;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
只有左右内外边距可控（经试验padding-bottom也可控）。
2、cookie、sessionStorage、 localStorage有什么区别?
Cookie大小只有4k，但是前后端都可以存取，存取时间需要通过参数设置
localStorage大小有5m，但是只有前端才可以存取，是永久存储
SessionStorage跟localStorage类似，区别就是页面关闭后数据就会丢失
深入理解：
1)、如何让cookie浏览器关闭就失效？——不对cookie设置任何正、负或0时间的即可;
2)、sessionStorage在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage会共享;
3)、能让localStorage也跟cookie一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get数据之前，先拿当前时间跟你之前存储的时间戳做比较。
3、如何实现浏览器内多个标签页之间的通信？
调用localstorge、cookie等本地存储方式
4、优先级算法如何计算？
优先级为: !important > 其他 ； important 比行间优先级高
Id权重为100，class权重为10，标签权重为1
#xxx .xxx div 这个选择器的权重就是 100+10+1=111，权重越大，优先级越高
5、px em rem有什么区别？em rem有什么用？
px是像素，是固定大小的。
em依赖于父元素
rem依赖于根元素<html>
6、display：none， visibility：hidden区别？
都是隐藏，区别在于Display：none不占位，另外一个是占位的
7、rgba()和opacity的透明效果有什么不同？
rgba是一个值，opacity是一个属性。
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
8、http协议介绍
HTTP协议是客户端和服务器之间的协议。
通过设置请求方法、请求地址、端口号等参数发出请求
在接收和解释请求消息后，服务器返回一个响应消息（主要包括状态码和响应正文等等）。
我们前端可以通过服务器返回的相应进行数据的渲染和功能实现。
常用的请求方法包括get和post方法
get方法受url长度限制，传出量小，而且是不安全的,因此主要用于从服务器上获取数据；
post方法传输量较大。并且是加密的，所以多用于向服务器上传递数据。
常见状态代码、状态描述、说明：
200 OK //客户端请求成功
304 内容没有修改，意味着直接返回缓存给客户端就可以了
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
响应正文就是服务器返回的资源的内容(就是获取的数据)
9、mvc与mvvm的介绍与理解
mvc是以前前端的一种模式：m就是数据层，从接口调用数据、v就是模板、c就是控制层，负责数据与页面上的交互
mvvm模式是现在前端比较流行的模式：m就是数据层，从接口调用数据、v就是模板、vm就是模板与数据的绑定。
比起mvc先进的地方在于数据与模板的绑定，传统mvc数据更新后，页面要手动修改，但是mvvm只要数据更新，模板自动渲染刷新，部分页面上的操作也能自动修改数据。
10、xss的原理是什么？怎么防范？
答：XSS的本质就是“HTML注入”，通过嵌入带js代码的script标签进行攻击
1. 输入检查
通过对文本框等控件进行校验检查，可以阻挡大部分误操作的正常用户，从而节约服务资源。
2. 输出检查
一般就是在变量输出到HTML页面时，使用编码或转义的方式来防御XSS攻击。
触发XSS的地方
1.document.write
2.xxx.innerHTML=
3.xxx.outerHTML=
4.innerHTML.replace
5.document.attachEvent
6.window.attachEvent
7.document.location.replace
8.document.location.assign
11、性能优化
1.做动画的时候优先使用css3动画，而不是js动画，特别在移动端的时候
2.合并压缩js和css
3.css精灵图
4.js放在最后边可以加快页面的加载
5.缓存，变化很少的数据可以设置客户端缓存(localstorge,sessionStorge
),全国城市信息列表，这个就没必要每次都调接口了，可以存放在localstorge或者sessionStorge里面
6、事件委托：
var ul = document.getElementById('test');
ul.onclick = function (event) {
var event = event || window.event;
var target = event.target || event.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
console.log(target.innerHTML);
}
}
12、如何判断是否是数组？
[1,2] instanceof Array
Array.isArray([1,2])
13、下列代码打印什么？为什么？
Alert（a）；
Var a = 1；
Alert（b）；
答：undefined 和 报错
14、下边的代码输出什么？为什么？
Console.log（”11”+1-“2”）
答：109
15、下边的代码输出什么？为什么？
var a = {};
a.val = 1;
b = a;
b.val = 2; alert(a.val);
答：2
16、Var arr = ["我", "是" , "好" , "人" , "!"];如何把这个数组转换成一句话？
arr.join('')
17、Var arr = [3,6,2,4,1,5];
1.数组倒转(不能用现成函数)
方案一：
var arr = [3,6,2,4,1,5];
var newarr = [];
for (var i=arr.length-1; i>=0; i--) {
newarr.push(arr[i]);
}
console.log(newarr);
方案二：
var arr = [3,6,2,4,1,5];
var newarr = []; for (var i=0; i<arr.length; i++) {
newarr.unshift(arr[i]);
}
console.log(newarr);
2.数组降序
var arr = [3,6,2,4,1,5];
arr.sort(function(a, b) {
return b-a;
})
console.log(arr);
18、有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，
如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
var str = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
var tmp = str.split('?')[1];
var arr = tmp.split('&');
var obj = {};
for (var i = 0; i < arr.length; i++) {
var s = arr[i].split('=');
if(s[1] == undefined){
s[1] = "";
}
obj[s[0]] = s[1];
}
console.log(obj);
19、以下代码输出什么？
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};
打印3个4，因为定时器是异步的
20、什么是闭包？请写一个闭包的简单例子
闭包就是能够读取其他函数内部变量的函数。
function a() {
// 函数a的变量i被函数b引用了，所以变量i是不会被垃圾回收的
var i=0;
function b() {
alert(++i);
}
return b;
}
var c=a();
c();
21、数组去重
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
var newArr = [];
var len=arr.length;
for (var i = 0; i < len; i++) {
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
console.log(newArr);
22、以下代码打印什么？
var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // 1
var func = User.getCount;
console.log(func()); // undefined
23、下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
方法1：推荐
var ul = document.getElementById('test');
var lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
console.log(this.index);
};
}
方法2：
var ul = document.getElementById('test');
var lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = (function (n) {
return function () {
console.log(n);
}
}(i));
}
24、希望获取到页面中所有的checkbox怎么做？
var domList = document.getElementsByTagName('input');
var list = [];
for (var i = 0; i < domList.length; i++) {
if(domList[i].type == 'checkbox'){
list.push(domList[i]);
}
}
console.log(list);
25、Json跟对象是怎么转换的？
var str = '{"a":1}';
var obj = {a:1};
JSON.parse(str)//json字符串转成js对象
JSON.stringify(obj)//js对象转成json字符串
26、实现字符串的一个功能 str.re(n) 返回n个str的字符串拼接
String.prototype.re = function(n) {
let str = ''
for (var i = 0; i < n; i++) {
str += this
}
return str
}
"abc".re(5);
27、如果做实时刷新数据？
1.websocket协议，跟http协议区别在于请求后链接是不断的，只要数据有更新，会实时传输到客户端。
2.通过定时器里面调用接口。
以下是websocket的参考代码：
这是socket接口的地址
var wsServer = 'ws://localhost:8888/Demo';
新建socket对象
var websocket = new WebSocket(wsServer);
通过onmessage事件，一旦后端接口数据更新，那么会实时传送到客户端。
websocket.onmessage = function (evt) {
//evt里面包含最新的数据
};
28、“==”和“===”有什么不同？
一个值判断，后一个是值和类型都判断
2.例举三种强制类型转换和两种隐式类型转换。
隐式类型转换
1==true “1”==1
强制类型转换
parseInt(“1”)
parseFloat(“1.1”)
数组.toString()
29、active兼容处理 即 伪类 :active 失效
方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件
31、vue的数据双向绑定的原理是什么？对vue有自己的理解，有深入了解低层次的原理吗？
vue使用defineProperty指令定义属性，通过监听这个属性的变化实现数据双向绑定
32、V-if和v-show有什么区别？
根据布尔值判断， v-show是页面元素的显示与隐藏，v-if是页面元素的存在或者不存在
33、如何让css只在当前组件中起作用？
scoped
34、指令keep-alive的含义和使用场景
可以缓存组件，典型使用场景，比如router-view标签，可以缓存页面组件，这样加载过的数据就不会重复加载
35、路由嵌套的使用场景？ 嵌套路由怎么实现？
比如列表页，筛选列表数据，筛选条件可以做成子路由
在相应的父路由上的children属性里面配置子路由，那么加载子路由就会加载子组件页面，并且把该页面显示在父组件里面的router-view
36、Mvvm介绍下，有啥优点？
m就是数据层、v就是页面模板、vm就是模板与数据的绑定，数据更新，页面模板自动更新。
现在主流的mvvm框架有vue angular react，一般mvvm框架都包含模板引擎、组件化开发，应用场景一般是单页面应用（spa）。
优点：
1.因为数据更新，页面模板会自动更新，做单页面应用（spa）的时候，数据量非常庞大，逻辑非常复杂，所以你开发的时候可以专注处理数据，免去处理琐碎的dom操作的麻烦
2.模块化，组件化，便于代码复用与维护
3.双向绑定，大大提高了处理表单的效率
37、计算属性有何作用？
Data和computed都是可以在view模板上直接使用的变量，data一般存放源数据，computed计算属性则可以根据data或者别的数据来重新计算一个新的数据。
使用场景，比如购物车的总数量，可以通过data里面的购物车列表数据，用computed生成一个购物车长度的新值
38、组件之间数据是怎么通讯？ 组件之间数据怎么传输? 组件数据怎么传递？
1. 通过new Vue生成一个实例对象，这个对象可以拿来存取公用数据和公用方法
2. Vuex。
3. 通过路由可以传递参数，比如id
4. 通过组件的属性，可以把数据传递进去。
39、Vuex的原理？
Vuex里面有state、actions、mutations，其中state是公用数据，actions是调接口的，mutaions是修改state用的。
举个例子：列表页要调列表页数据，那么我可以通过dispatch去跟actions调接口，然后数据返回后通过commit让mutations去修改state，那么state更新后，就去渲染页面。
40、怎么理解组件化开发? 你怎么看组件化开发？ 什么是组件化开发？ 什么是单文件组件？
组件就是带一些界面，带一些功能封装好的代码
那么vue的组件化开发，就是把每个页面都封装成组件，然后里面里面的很多元素都可以封装成组件。
好处就是提高开发效率，方便维护与管理
举例：比如一个图片轮播组件，如果我有十几个页面都是有轮播，那么这个时候有个需求，要给轮播增加功能，那么如果你是写了轮播组件，你只要修改这个轮播组件就可以完成任务，反之就要修改很多处地方。
41、你的项目是怎么做路由的？ 你的页面跳转是怎么实现的？ 切换页面是怎么做的？ vue-router原理是怎么样的？
首先要配置路由，相应的路由配相应的组件，然后通过router-link来切换路由，从而加载不同的页面，这个时候页面就会显示在router-view标签上。
history模式
hash模式
42、Vue的生命周期?
创建组件的时候，创建之前会触发beforeCreated函数，创建好了会触发created函数，
绑定到页面之前会触发beforeMounted，绑定好了触发mounted，
更新之前会触发beforeUpdated，更新后触发updated，
销毁前触发beforeDestroyed，销毁后触发destroyed。
43、伪数组是什么，怎么把伪数组转化成真正的数组
无法直接调用数组的一些方法，比如数组的push,pop等方法，但仍可以遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(伪数组)将伪数组转化为真正的数组。
44、同步与异步区别
同步是阻塞方式，是从上往下逐步加载，会阻塞后续代码的运行
异步是非阻塞方式，不会阻塞后续代码的运行
45、浏览器事件循环
JavaScript语言的一大特点就是单线程，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
46、apply和call有啥区别？
apply和call的用法只有一个地方不一样，除此之外，其他地方基本一模一样
a.call(b,arg1,arg2…)
a.apply(b,[arg1,arg2]) //apply只有2个参数，它将call的参数（arg1,arg2…）放在一个数组中作为apply的第二参数
47、谈谈响应式布局
响应式布局主要用了宽度百分比和媒体查询技术，可以根据不同的屏幕尺寸调用不同的css样式。
优点是用户体验好，根据不同屏幕宽度展示适合这种屏幕大小的样式和效果。
缺点是不单单程序开发时间会延长，设计师那边也需要考虑的更多，整个团队的开发时间都会大大增多。
48、fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
49、IOS移动端click事件300ms的延迟响应
移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
• fastclick可以解决在手机上点击事件的300ms延迟
• zepto的touch模块，tap事件也是为了解决在click的延迟问题
• 触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
50、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。
51、三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案，
1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）
52、h5底部输入框被键盘遮挡问题
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
53、Input 的placeholder会出现文本位置偏上的情况
PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
54、calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
55、打电话发短信的怎么实现？
1、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
2、发短信
winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
56、对原型链的理解
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层（Object.prototype的原型null）为止。
57、vuex和本地存储（localStorage/sessionStorage的区别）
1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。
原文链接：http://www.cnblogs.com/jsanntq/p/9288144.html
58、虚拟DOM
用JS对象模拟DOM节点。页面的更新先全部反应在JS对象上，等更新完成后，再将最终的JS对象映射成真正的DOM，交由浏览器去绘制。
好处：操作JS中的对象速度会更快，提升浏览器性能。
59、函数柯里化
把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数。
柯里化思想：一个js预先处理的思想；利用函数执行可以形成一个不销毁的作用域的原理，把需要预先处理的内容都储存在这个不销毁的作用域中，并且返回一个小函数，以后我们执行的都是小函数，在小函数中把之前预先存储的值进行相关的操作处理即可。
好处：函数的柯里化能够让你重新组合你的应用,把你的复杂功能拆分成一个一个的小部分,每一个小的部分都是简单的,便于理解的,而且是容易测试的
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
