1. Pure Component 的重要性和使用场景
Pure Component改变了生命周期方法shouldComponentUpdate，并且它会自动检查组件是否需要重新渲染，只有检测到state或props发生变化时，会调用render，PureComponent仅仅是浅比较，所以改变组件内部的props或state，不会发挥作用
2. React-router
原理：控制不同的url渲染不同的组件
DOM渲染完成之后，给window添加
onhashchange事件监听页面hash变化，并且在state属性中添加route属性，代表当前页面的路由
router 3.x和router 4.x区别在哪
router 3.x：
- 路由集中在一处
- 布局和页面的层叠由层叠的 Router 组件控制
- 布局和页面组件是路由的一部分
router 4.x：
- 不再提倡中心化路由，路由不集中在一起，取之的是路由存在于布局和UI之间
- 不需要再嵌套组件中使用
{ props.children }query-string代替location.query
3. redux
作为一个通用模块，用来处理应用中
state的变更轻量级的封装库，主要通过两个核心方法实现：
Provider和Connect常见的中间件：
redux-logger提供日志输出
redux-thunk处理异步操作
redux-promise处理异步操作Redux三大原则：
- 单一数据源：整个应用的
state被储存在一个object tree中，且这个object tree只存在于唯一一个store中State只读：唯一改变方法是触发action- 使用纯函数来执行
4. 转化类型
转数组：
parseFloat()转字符串：
toString() / string()数组转字符串：
join()字符串转数组：
split()
5. call 和 apply 的区别
call 可以传入多个参数
apply 只能传入两个参数，所以其第二个参数往往以数组的形式传入
6. mouseover / mouseout 与 mouseenter / mouseleave 的区别
mouseover / mouseout：标准事件，所有浏览器都支持冒泡事件，需要多个元素监听鼠标移入 / 移出事件时，可使用
mouseenter / mouseleave：IE5.5 引入的特有事件，后来被DOM3标准采纳，现代浏览器也支持不冒泡
7. DOM元素的 e 的 e.targetAttribute(propName) 和 e.propName 有什么区别和联系
e.getAttribute()是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性，返回值的类型是字符串或null
e.propName()通常在HTML中访问特定元素的特性，浏览器解析元素后产生对应对象，这些对象的特性会根据特规则结合属性得到，对于没有对应特性的属性，只能使用Attribute访问，返回的可能是字符串、布尔值、对象、undefined
8. focus / blur 和 focus in / focus out
1）
focus / blur不冒泡；focus in/focus out冒泡2）
focus / blur兼容性好
focus in / focus out在除FireFox浏览器外，保持良好兼容性
9. attribute 和 property 的区别是什么
attribute是dom元素在文档中作为html标签拥有的属性property是dom元素在js中作为对象拥有的属性
10. 一次性插入1000个div，如何优化插入的性能
使用Fragment（document.createDocumentFragment()）
11. document.load 和 document.ready 的区别
load是当页面所有资源加载完成后，执行一个函数ready是当DOM文档书加载完成后执行一个函数
12. 什么是伪数组？如何将伪数组转换为真数组
伪数组：无法直接调用数组方法或期望length属性有什么特殊行为
三大特性：
- 具有length属性
- 按索引方式存数据
- 不具有数组的push、pop等方法
将伪数组转换为真数组：
Array.prototype.slice.call(伪数组名称)
13. JS垃圾回收方式
- 标记清除： 这是js最常用的垃圾回收方式，当一个变量进入执行环境时，例如数中声明一个变量，将其标记为进入环境，当变量离开时，标记为离开环境
- 引用计数： 跟踪记录每个值被引用的次数，引用次数为0时，就回收
14. 关于Ajax
一、定义
Ajax是一种创建交互网页应用的网页开发技术，相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化二、Ajax的过程
- 创建
XMLHttpRequest对象，也就是创建一个异步调用对象- 创建一个新的
HTTP请求，并指定该HTTP请求的方法、URL及验证信息- 设置响应
HTTP请求状态变化的函数- 发送
HTTP请求- 获取异步调用返回的数据
- 使用
JavaScript和DOM实现局部刷新三、优与劣
优点 缺点 异步模式，提升用户体验 不支持浏览器back按钮 局部更新，用户体验好，减少服务器负载 对搜索引擎得支持比较弱 标准化技术，不需要下载插件或小程序 暴露了服务器交互细节 不容易调试 四、Ajax请求跨域接口，发送了几次请求
所有得跨域得js在提交post请求的时候，如果服务端设置了可跨域访问，都会默认发送两次请求，第一次预检请求，查询是否支持跨域，第二次踩死真正的post提交
15. axios
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，本身具有以下特点：
- 从浏览器中创建
XMLHttpRequest- 从
nodejs发出http请求- 支持
Promise API- 拦截请求和响应
- 转换请求和响应数据
- 自动转换
JSON数据- 取消请求
- 客户端支持防止
CSRF、XSRF
16. v-if 和 v-show
v-show指令是通过修改元素得display的CSS属性让其显示或隐藏
v-if指令是直接销毁和重建DOM节点，达到让元素显示和隐藏的效果
17. Vue不用v-model的时候怎么监听数据变化
使用
watch监听数据变化
18. 为什么要在beforeDestory清除定时器呢？
所有定时器挂载在
window对象上，不属于vue，销毁组件时，vue无权卸载，所以需要在此生命周期中手动卸载定时器，防止内存泄漏
19. router的push和replace
跳转后
replace不能返回上一步，push可以回退，因为push是把route放到了history路由栈里里面，replace只是把当前独有替换了
20. canvas和svg有什么区别
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改
canvas输出的是一幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿
canvas输出标量和画布，就像一张图片一样，放大会失真或锯齿
21. css如何实现横向滚动与竖向滚动
横向滚动：overflow-x: auto; overflow-y: hidden
竖向滚动: overflow-x: hidden; overflow-y: auto
22. v-model 和 v-bind 的区别
v-bind是单向数据绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面
v-model是双向数据绑定，数据能从data流向页面，也能从页面流向datav-bind可以给任何属性赋值
v-model只能给表单类元素进行双向数据绑定
23. 前端性能指标
- 首屏绘制（浏览器第一次发生变化的时间）
- 首屏内容绘制
- 可交互时间
- 最大内容绘制
- 首次有效绘制
24. JS是如何压缩代码的
- 去除多余字符：空格，换行及注释
- 压缩变量名：变量名，函数名及属性名
- 解析程序逻辑：合并声名以及布尔值简化
- 解析程序逻辑：编译预计算
25. 四次挥手
一次挥手
- 客户端打算关闭连接，此时会发送一个
TCP首部FIN标志位被置为1的报文，也即FIN报文，之后客户端进入FIN_WAIT_1状态。二次挥手
- 服务端收到该报文后，就向客户端发送
ACK应答报文，接着服务端进入CLOSED_WAIT状态。三次挥手
- 客户端收到服务端的
ACK应答报文后，之后进入FIN_WAIT_2状态。等待服务端处理完数据后，也向客户端发送FIN报文，之后服务端进入LAST_ACK状态。四次挥手
- 客户端收到服务端的
FINQ报文后，回一个ACK应答报文，之后进入TIME_WAIT状态- 服务器收到了
ACK应答报文后，就进入了CLOSED状态，至此服务端已经完成连接的关闭。- 客户端在经过
2MSL一段时间后，自动进入CLOSED状态，至此客户端也完成连接的关闭。
26. Vue父子组件生命周期的顺序
挂载阶段：
父beforeCreate ——> 父created ——> 父beforeMount ——> 子beforeCreate ——> 子created ——> 子beforeMount ——> 子mounted ——> 父mounted
更新阶段：
父beforeUpdate ——> 子beforeUpdate ——> 子updated ——> 父updated
销毁阶段：
父beforeDestory ——> 子beforeDestory ——> 子destoryed ——> 父destoryed
27. computed的应用场景
应用场景：一个数据受多个数据影响，如果一个属性是由其他属性计算而来，这个属性是一个 多对一 或者 一对一， 一般用computed
28. vue打包时怎么能让它自动识别是开发模式
配置文件：
NODE_ENV = production
VUE_APP_MODE = development / test / production
29. CSS选择器优先级
!important -> 行内样式 -> id选择器 -> 类选择器 -> 标签 -> 通配符 -> 浏览器默认属性
30. 长列表渲染实现
一次性需要渲染大量的数据浏览器渲染过慢甚至渲染崩溃解决方案
思路：
- 宏任务分批渲染节点
- 虚拟列表分屏加载
31. CSS3 新特性
阴影、选择器、形状转换(2D——>3D)、动画、边框、多重背景、反射、文字、颜色函数、滤镜、弹性布局、多列布局、栅格布局、盒模型、Web字体、媒体查询
32. transition有哪些属性
执行变换的属性：
transition-property变换延续的时间：
transition-duration在延续时间段，变换的速率变化：
transition-timing-function变换延迟时间：
transition-delay
33. e.target 和 e.current Target 有什么区别
e.target：指向触发事件监听的对象
e.currentTarget：指添加监听事件的对象
34. map和filter有什么区别
参数都一样：
currentValue数组元素、index索引、arr原数组、thisValue作为该执行回调时使用，传递给函数，用作“this”的值区别：
map方法返回的新数组是原数组的映射filter方法返回的值是过滤原数组后的新数组，和原数组长度不同，数值不变，filter可以过滤NaN、null、undefined、0
35. Object 和 Map 有什么区别
Object
在
ECMAScript中，Object是一个特殊得对象，它本身是一个顶级对象，同时还是一个构造函数可以通过它（new Object() ）来创建一个对象，我们可以认为JS中所有的对象都是Object的一个实例，对象可以用字面量的方法const obj={} 声明Map
Map是Object的一个子类，可有序保存任意类型的数据，使用键值对去存储，其中键可以存储任意类型
36. toPrecision、toFixed、Math.round 三者的区别
toPrecision用于处理精度，精度从左至右第一个不为0的数开始数起
toFixed是对小数点后指定位数取整，从小数点开始
Math.round四舍五入到一个整数
37. JS中如何阻止事件冒泡和默认事件
1）阻止事件冒泡：
event.stopPropagation2）阻止默认事件：
event.preventDefault
38. null 和 undefined 有什么区别
都是基本数据类型
区别：
undefined代表的含义是未定义，一般变量声明了但还没有定义的时候会返回undefinednull代表的含义是空对象，主要用于赋值给一些可能会返回对象的变量，作为初始化- typeof(null) = object / typeof(undefefined) = undefined
null == undefined, nullundefined
39. npm 是什么？
npm是Node.js的包管理工具
- 允许用户从npm服务器下载别人编写的第三方包到本地使用
- 允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用
- 允许用户将自己编写的包或命令行上传到npm服务器供别人使用
40. 如何判断当前脚本运行在浏览器还是在Node中？
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中
this == window ? ' browser' : 'node'
41. ES6 中对函数做了哪些拓展
1）允许函数的参数设置默认值，并且可以结合解构赋值使用
2）函数具有 length 属性，返回没有指定默认值的参数个数
3）函数具有 name 属性，返回该函数的函数名
4）只要函数参数使用了默认值、解构赋值，或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错
5）新增”箭头函数“写法
42. script标签为什么放在body底部
避免脚本会阻塞页面的渲染，因为当解析到
script标签时，通常页面的大部分内容都已经渲染完成了，让用户马上就能看到一个页面
43. Service worker 是什么
HTML5的一个API，主要用来做持久的离线缓存，也是Web Worker的升级版
SW是一个注册在指定源和路径下的事件驱动Worker，它采用JS控制关联的页面或网站，拦截并修改访问和资源请求，细粒度地缓存资源，你可以完全控制应用在特定情形下的表现
44. 如何判断一个对象是不是空对象
- 使用
Object.keys()将对象属性名组成数组，如果length为0表示空对象- 使用
JSON.stringify()将对象转成字符串，如果为{}则表示空对象
45. 0.1 + 0.2 为什么不等于 0.3
0.1 和 0.2 在转换成二进制后会无限循环，后面被截掉了，从而精度缺失
46. 说说你对BOM的理解，以及常见的BOM对象
BOM，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象常见的
BOM对象：
window核心对象，表示浏览器的一个实例location用于获取或设置窗体的URL，并且可以用于解析URLnavigator主要用来获取浏览器的属性，区别浏览器类型screen保存浏览器窗口外面的客户端显示器的信息history操作历史记录
47. 如何判断页面是通过PC端还是移动端访问
1）使用
navigator.userAgent，包含mobi，phone，android 等关键字，可以定为移动设备2）使用
window.screen.width，如果小于500px，则认为手机，横屏无法使用3）使用
window.orientation，侦测屏幕方向4）使用
ontouchstart事件5）第三方工具包，
react-device-detect
48. 什么是点击穿透？如何解决
在发生触摸动作约300ms后，移动端会模拟产生
click动作，它底下的具有点击特性的元素也会被触发，称为点击穿透。解决办法：
- 书写规范，不要混用
touch和click- 吃掉
touch之后的click，依旧用tap，只是在可能发生穿透的地方做一个额外处理
49. Promise.all 和 Promise.allSettled 有什么区别
最大的区别：
Promise.allSettled永远不会被reject使用
Promsie.all时，一旦有一个promise出现了异常，被reject了，尽管能用catch捕获其中的异常，但你会发现其他执行成功的Promise的消息都丢失了；而Promise.allSettled不会有这种问题，我们只需要专注在then语句里，当有promise被异常打断时，我们依然能妥善处理那些已经成功了的promise，不必重来
50. Object.assign 和 扩展运算符是深拷贝还是浅拷贝，有什么区别
都属于浅拷贝
扩展运算符（...），数组或对象的每一个值都会被拷贝到一个新的数组或对象中，它不复制继承的属性或类的属性，但它会赋值ES6的symbols属性
Object,assign()， 方法是接收的第一个参数作为目标对象，后面的所有参数作为源对象，然后把所有的源对象合并到目标对象中，它会修改一个对象，因此会触发ES6 setter
