常见前端面试题---其他篇

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