经验分享:面试拷打经历 与 知识总结(纯个人总结)(七)"/>
前端八股文经验分享:面试拷打经历 与 知识总结(纯个人总结)(七)
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流向页面,也能从页面流向data- v-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={} 声明
MapMap是Object的一个子类,可有序保存任意类型的数据,使用键值对去存储,其中键可以存储任意类型
36. toPrecision、toFixed、Math.round 三者的区别
toPrecision 用于处理精度,精度从左至右第一个不为0的数开始数起
toFixed 是对小数点后指定位数取整,从小数点开始
Math.round 四舍五入到一个整数
37. JS中如何阻止事件冒泡和默认事件
1)阻止事件冒泡:event.stopPropagation
2)阻止默认事件:event.preventDefault
38. null 和 undefined 有什么区别
都是基本数据类型
区别:
- undefined 代表的含义是未定义,一般变量声明了但还没有定义的时候会返回undefined
- null 代表的含义是空对象,主要用于赋值给一些可能会返回对象的变量,作为初始化
- 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对象:
- window 核心对象,表示浏览器的一个实例
- location 用于获取或设置窗体的URL,并且可以用于解析URL
- navigator 主要用来获取浏览器的属性,区别浏览器类型
- 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
更多推荐
前端八股文经验分享:面试拷打经历 与 知识总结(纯个人总结)(七)
发布评论