常见前端面试题---其他篇
1、如何理解MVVM模式和MVC模式
MVC是经典的开发模式，model数据库，提供数据，view，视图，controller业务逻辑，路由分配，这种开发模式controller负责的太多，难以维护，m层和v层直接打交道，高耦合，所以为了解决这些问题，出现了MVVM模式，目前开发中用的模式，model后端提供数据，view视图，vm框架核心，model后端负责，view和VM前端负责，前后端分离，实现高内聚，低耦合，前后端同时开工，没有先后顺序，提高开发效率。
2、前端性能优化的方法有哪些？
①减少http请求，减少请求的体积，比如用雪碧图，gulp或者webpack压缩文件
②通过规范布局来减少DOM数量，减少DOM操作，比如事件委托。
③把对应的文件放在对应的位置，css放在head里，js放在body底部。
④图片懒加载，按需加载。
⑤对于ajax请求可以使用get请求，一来get请求存在缓存机制，二来get请求只发请求头速度快。
⑥利用cdn加速来减轻服务端的压力，把你的资源放在人家的服务器上，但是数据库还是在自己的服务器上。
⑦使用多线程和异步请求
3、H5新增特性有哪些？
①语义化标签
②canvas svg
③视频 音频
④本地存储
⑤地理定位
⑥离线存储：在离线状态上也可以访问之前的页面
⑦webwork 多线程执行JavaScript
⑧websocket 即时通信
4、简述对语义化标签的理解
标签语义化能让页面结构更加清晰，便于后期维护，便于浏览器和搜索引擎解析
5、简述ajax实现流程以及优缺点？
首先创建xmlHttpRequest实例对象，然后调用open方法指定请求的方式和请求路径，默认是异步请求，之后调用send方法发送请求，然后监听实例对象下的onreadystatechange方法，当状态满足的时候,拿到请求结果responseText,最后进行页面的渲染即可。
优缺点：
优点：ajax能实现网页局部更新，不用更新整个网页，减少带宽使用，提高加载速度
缺点：支持同源策略，存在跨域问题
6、Ajax中get和post请求方式的区别?
①post数据量大，get请求速度快
②两者的请求方式不同，get请求参数拼接在路径后面，post请求放在请求体中，在这之前设置请求头
③get请求存在缓存问题，可以拼接时间戳来解决数据得不到更新的问题
7、jsonp的实现流程
动态的创建script标签，后端返回回调函数的执行，并将请求的数据作为实参传入
//创建script标签
var script=document.createElement('script')
//设置回调函数
function getData(data){
//数据请求回来会被触发的函数
console.log(data);
}
//设置script的src属性，设置请求地址
script.src="http://localhost:3000?callback=getData";
//让script生效
document.body.appendChild(script);
8、ajax和jsonp的区别
①两者最大的区别就是ajax遵循同源策略，不能跨域，而jsonp可以
②ajax有get和post两种请求，jsonp只有一种get请求
③两者的实现方式也不一样，ajax是创建实例对象，jsonp是动态的创建script标签
9、json对象与字符串互转方法？
JSON.stringify()
JSON.parse()
10、Css清除浮动的方式
①给父元素设置overflow:hidden
②紧跟着设置浮动的元素的空标签设置clear:both;
11、Css动画和过渡的区别？
动画会自动开始执行，而且可以设置多个过渡状态，而过渡只有开始和结束两个状态
12、inline-block间距解决办法
①给父元素设置font-size:0;同时给子元素设置相应的大小
②设置浮动
13、简述事件委托的优点
①只需要绑定一次，减少DOM操作
②对于新添加的元素，同样可以触发事件
14、写出处理事件冒泡和阻止浏览器默认行为的兼容处理
<script>
//阻止事件冒泡
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancleBubble=true;
}
//阻止浏览器默认行为
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
</script>
14、获取页面滚动高度及设置页面滚动高度兼容写法
//获取页面滚动高度
varst=document.body.scrollTop||document.documentElement.scrollTop;
//设置页面滚动高度
window.scrollTo(x,y) 置顶的话0,0
