前端面试

1、遇到过那些兼容问题？  

问题	解决方法
不同浏览器的标签默认的外补丁和内补丁	*{margin:0;padding:0}
块属性标签float后，又有横行的margin情况下，在ie6下显示的margin比设置的大	在float的标签样式控制中加入 display:inline;将其转化为行内属性
透明度的兼容css设置	css hack

 

 

 

 

 

2、怎兼容各个浏览器？ 

1、css hack

 

 

3、自适应和响应式的区别？

	概念	相同	不同	优点	缺点
自适应	使网页自适应显示在不同大小终端设备上（当视口大小低于设置的最小窗口的时候，内容会不全，溢出或者出现滚动条）	优化网页 为了更好的体验	1、需要开发多套界面	对网站的复杂程度兼容性更大 代价低 代码更高效 测试更容易	增加开发成本 流程繁琐
			2、通过检测视口分辨率，来判断当前访问的设备是：pc端，平板，手机，从而请求服务层，返回不同的页面
			3、对页面做的屏幕适配是在一定范围内的（pc>1024;平板768-1024;手机端<768）
响应式	一个网站能够兼容多个终端而不是为每个终端做特定的版本（在不同分辨率下显示不同的布局）		1、开发一套界面	灵活性强 快捷解决设备适用问题	仅适用于不复杂的部门类型网站 效率低 代码累赘，加载时间长 多方面因素影响达不到最佳效果 改变了网站原有的布局结构，会出现用户混淆
			2、通过检测视口分辨率，针对不同客户端来展现不同的布局和内容
			3、一套页面全部适配

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4、怎么写一个响应式的网站？

使用媒体查询

5、前端三大框架？

vue,react,angular

6、vue和react的对比？

	相同点	不同点
vue	利用虚拟dom实现快速渲染 轻量级 响应式组件 服务器端渲染 易于集成路由工具，打包工具以及状态管理工具 优秀的支持和社区	模板和渲染函数的弹性选择 简单的语法及项目创建 更快的选软速度和更小的体积
react		更适用于大型应用 同时适用web端和原声app 更大的生态圈带来更多的支持和工具

 

 

 

 

 

 

 

 

7、用vue的时候遇到过那些问题？

路由变化页面数据不更新

这种情况一般出现在vue-router的history的模式之下，初次进入时会执行钩子函数，再次进入时不会

解决办法：监听路由变化

---

setInterval路由跳转继续运行并没有及时进行销毁

比如一些走马灯，需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在后台继续调用，控制台一直在报错，如果运算量大的话，会导致页面严重卡顿

解决办法：在组建生命周期beforeDestroy清除setInterval

---

请求后台的时候使用post方法

使用post请求的时候有两种方法，一种json一种字符串，当时遇到了问题

解决办法：用npm下载qs，使用this.$qs.stringify()转换成字符串发送给后台

8、说几个vue的指令？

• v-model 双向绑定
• v-for 循环
• v-show 显示与隐藏
• v-if 显示与隐藏
• v-else 
• v-if-else
• v-on 点击事件
• v-bind 动态绑定
• v-text 读取文本不能读取html标签
• v-html 能读取html标签
• v-class 类名
• v-once 事件只执行一次
• v-cloak 防闪烁

9、双向绑定的原理？

利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

10、mvvm

MVVM（Model-View-ViewModel)

11、vue组件封装过程

• 首先，使用vue.extend（）创建一个组建
• 然后，使用Vue.component()注册组件

组件创建---有3中方法，extend()      <template id=''>      <script type='text/x-template'  id=''>

12、优化网页

• 减少http请求
• 精灵图
• 减少DNS查找
• 懒加载

13、vue的几个生命周期

• beforeCreate   created   创建前，创建后
• beforeMount    mounted  挂载前，挂载后
• beforeUpdate  updated   更新前，更新后
• beforeDestroy  destroied 销毁前，销毁后

14、父子通信和非父子通信

• 父子通信

通过props

---

• 子父通信

this.$emit(‘自定义事件名’，数据)

---

• 非父子通信

1. 创建一个公共的vue实例化对象       const bus = new Vue()
2. 在需要监听的组件中添加      bus.$on('自定义事件名',() => {})
3. 在需要出发的组件中添加      bus.$emit('自定义事件名'，数据)

15、vue全家桶

• vue-cli     脚手架
• vue-router   路由
• vuex    状态管理
• axios   请求

16、单向数据流

只能从一个方向来修改状态 

vuex就是单向数据流的实现

17、js的异步加载

• async
• onload
• xhr

18、js动画与css动画的优缺点

	优点	缺点
js动画	控制能力强 效果更丰富 大多时候没有兼容性问题	可能出现丢帧 复杂度高
css动画	浏览器可以对动画进行优化 代码简单 对于帧速表现不好的低版本浏览器，css3可以做到自然降级，js需要写额外代码	运行过程控制较弱 代码冗长

 

 

 

 

 

 

 

 

19、内存泄漏的危害

（会发生内存减少，会变得卡）

• cpu资源耗尽
• 进程id耗尽
• 硬盘耗尽

20、js的自定义事件

• addEventListener
• createEvent
• onclick点击事件

21、get和post的区别

	相同	不同
get方式	都是一种请求方式	从服务器上获取数据 用request.queryString获取 有长度限制 通过url传递参数 不安全 产生出一个TCP数据包
post方式		向服务器传送数据 用request.Form获取 长度没有限制 放在request body中 产生两个TCP数据包

 

 

 

 

 

 

 

 

 

 

 

 

22、怎么预防xss攻击

• 浏览器自身可以识别简单的xss攻击字符串
• 运用转义安全字符等手段
• 别点链接