前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（七）

经验分享：面试拷打经历 与 知识总结（纯个人总结）（七）"/>

前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（七）

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三大原则：

1. 单一数据源：整个应用的state被储存在一个object tree中，且这个object tree 只存在于唯一一个store中
2. State只读：唯一改变方法是触发action
3. 使用纯函数来执行

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 的区别

1. load 是当页面所有资源加载完成后，执行一个函数
2. ready 是当DOM文档书加载完成后执行一个函数

12. 什么是伪数组？如何将伪数组转换为真数组

伪数组：无法直接调用数组方法或期望length属性有什么特殊行为

三大特性：

• 具有length属性
• 按索引方式存数据
• 不具有数组的push、pop等方法

将伪数组转换为真数组：Array.prototype.slice.call(伪数组名称)

13. JS垃圾回收方式

• 标记清除：这是js最常用的垃圾回收方式，当一个变量进入执行环境时，例如数中声明一个变量，将其标记为进入环境，当变量离开时，标记为离开环境
• 引用计数：跟踪记录每个值被引用的次数，引用次数为0时，就回收

14. 关于Ajax

一、定义

Ajax是一种创建交互网页应用的网页开发技术，相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化

二、Ajax的过程

1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象
2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用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流向页面，也能从页面流向data
• v-bind 可以给任何属性赋值
  v-model 只能给表单类元素进行双向数据绑定

23. 前端性能指标

1. 首屏绘制（浏览器第一次发生变化的时间）
2. 首屏内容绘制
3. 可交互时间
4. 最大内容绘制
5. 首次有效绘制

24. JS是如何压缩代码的

1. 去除多余字符：空格，换行及注释
2. 压缩变量名：变量名，函数名及属性名
3. 解析程序逻辑：合并声名以及布尔值简化
4. 解析程序逻辑：编译预计算

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.stopPropagation

2）阻止默认事件：event.preventDefault

38. null 和 undefined 有什么区别

都是基本数据类型

区别：

1. undefined 代表的含义是未定义，一般变量声明了但还没有定义的时候会返回undefined
2. null 代表的含义是空对象，主要用于赋值给一些可能会返回对象的变量，作为初始化
3. typeof(null) = object  /  typeof(undefefined) = undefined
   null == undefined,  null undefined

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对象：

1. window  核心对象，表示浏览器的一个实例
2. location  用于获取或设置窗体的URL，并且可以用于解析URL
3. navigator  主要用来获取浏览器的属性，区别浏览器类型
4. screen  保存浏览器窗口外面的客户端显示器的信息
5. 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