前端面试常问面试题整理

1.有哪些浏览器,浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
2.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强(progressive enhancement) ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级(graceful degradation) ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
3.知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%.
4.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
5.简述一下你知道的有哪些ES6的新特性
1.箭头操作符(箭头函数)
2.类的支持（class）
3.字符串模板
4.参数结构
5.参数默认值，不定参数，拓展参数
6.let与const 关键字
7.模块
8.Promise
6.使用版本控制工具git/svn 产生冲突 你如何解决
1.查看历史版本
$ git log
$ git log --stat #记录我们可以看到每一次commit，都有哪些文件发生了改变
$ git show 8ef96 #查询某次具体的修改
2.回滚
发现提交的内容错了，可以进行回滚操作。
3.远程仓库覆盖本地
$ vi a.txt #创建a.txt，设置内容为haha 1
$ git add . #暂存
$ git commit -m ‘1’ #提交
$ git pull origin master #推送，此时查看github，a.txt存在
$ vi a.txt #编辑本地文件a.txt，修改内容haha 2
$ git fetch --all #只是下载代码到本地，不进行合并操作
$ git reset --hard origin/master #把HEAD指向最新的下载版本
$ ll
$ cat a.txt #可以看到文件还是为1，被远程覆盖
4.解决冲突绝招
如果冲突，自己修改的文件自己知道，则把修改的文件复制到其它目录，然后强制用远程覆盖本地文件，然后把修改的文件考回来覆盖。这样的好处是多人修改后，多个文件，修改起来太复杂。这样的方式非常方便高效。
7.你觉得的HTTP的状态码有哪些?仔细说明
200 OK 服务器成功处理了请求（这个是我们见到最多的）
304 Not Modified：服务端的资源与客户端上一次请求的一致，不需要重新传输，客户端使用本地缓存的即可
400 Bad Request：用于告诉客户端它发送了一个错误的请求
404 Not Found(页面丢失)未找到资源
500 Internal Server Error：服务器内部出现了错误.数据库问题
501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务
8 ajax 异步请求数据的步骤？
AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax的使用
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
getData(url, fn) {
// 实例化XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听状态
xhr.onreadystatechange = () => {
// 数据请求完毕 判断状态码
if (xhr.readyState === 4&&xhr.status === 200) {
// 将数据转化成json在、数组
fn && fn(JSON.parse(xhr.responseText))
}
}
// 打开数据请求 请求方式，路径，同步false 异步true(默认)
xhr.open(‘get/post’, “路径”, “true/false”);
// 发送数据
xhr.send(null)
}
9.6 个 vue 指令 分别说明什么意思
v-if指令：v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
v-show指令：v-show和v-if区别=>v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染
v-else指令:v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容
v-for指令:v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似,v-for=“item in list”,list是一个数组，item是当前遍历的数组元素=>v-for=”(item,index) in list"其中index是当前循环的索引，下标从0开始
·注意：处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
v-bind指令(简写“：”):v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class,class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名
v-on指令(简写“@”)：v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件<button v-on:click="show”>也可用@符号代替，修改代码：<button @click=“show”>
10.说一下vue 如何实现数据双向绑定 底层原理
vue的双向绑定是由数据劫持结合发布者－订阅者模式实现的，那么什么是数据劫持？vue是如何进行数据劫持的？说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。
11 说一下 什么 变异数组和非变异数组 以及 可变对象 和 不可变对象
变异数组的方法

1. 变异数组方法 触发vue 视图更新 改变原数组
   push()
   pop()
   shift()
   unshift()
   splice()
   sort()
   reverse()
   join()

2. 非变异数组方法 不会改变原数组 无法触发Vue视图更新 返回新的数组
   filter()
   concat()
   slice()
   find()

3. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

4. 当你修改数组的长度时，例如：vm.items.length = newLength

可变对象:把对象a赋值给对象b，更改对象b的属性值，被引用的对象a也随之改变。
不可变对象:对象可能会被其他拥有同样引用地址的对象同步改变，如深拷贝。
.但是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, ‘age’, 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: ‘Vue Green’})
12.react 性能优化的方案
高度使用shouldComponentUpdate 来避免不必要的dom操作；
使用production 版本的react.js
使用key来帮助react识别列表中所有子组件的最小变化=给每个变量遍历的时候加一个key
拆分组件是有利于复用和组件优化的。
生成虚拟DOM并进行比对发生在render()后，而不是render()前。
利用diff 算法避免没有必要的dom操作，从而提高性能
13.react 里面架构管理 redux 的原理 以及分层
Redux 主要分为三个部分 Action、Reducer、及 Store Action
在 Redux 中，action 主要用来传递操作 State 的信息，以 Javascript Plain Object 的形式存在 Reducer
有了 Action 来传达需要操作的信息，那么就需要有根据这个信息来做对应操作的方法，这就是 Reducer。 Reducer 一般为简单的处理函数，通过传入旧的 state 和指示操作的 action 来更新 state 在 Redux 项目中，Store 是单一的。维护着一个全局的 State，并且根据 Action 来进行事件分发处理 State。可以看出 Store 是一个把 Action 和 Reducer 结合起来的对象。
reducer 纯函数，不能进行异步操作
Redux工作流：
1.当用户操作视图的时候，由视图调用action工厂函数
2.action创建出来后调用store的dispatch （和flux不同这里没有dispatch方法，直接由store调用dispatch方法将action和state传入reducer中）
3.reducer在拿到数据模型之后，会根据action的type生成一个新的state（不能直接更新store里面的state，要生成一个新的state传过去）
4.store拿到数据模型之后通知视图进行更新