目录
1.SPA（单页面应用）首屏加载速度慢怎么解决
2.Vue中自定义指令的理解，应用场景有哪些
3.说说你对事件循环的理解
4.异步任务分类
5.宏微任务执行顺序
6.说说javascript内存泄漏的几种情况
7.大文件如何做断点续传
8.什么是md5？
9.原生js如何实现上拉加载下拉刷新
10.说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别
11.谈谈你对BFC的理解
12.说说TCP为什么需要三次握手和四次挥手？
13.前端性能优化的手段有哪些？
14.最少说出三种前端清除浮动的方法
15.什么是强缓存和协商缓存？
16.说说React jsx转换成真实DOM的过程
17.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？
18.React render方法的原理，在什么时候会触发？
19.React性能优化的手段有哪些？
20.说说你对栈、队列的理解？应用场景？
21.说说你对git rebase 和git merge的理解？区别？
22.说说git常用的命令有哪些？
SPA（单页面应用）首屏加载速度慢怎么解决
按需加载
路由懒加载
减少入口文件体积
精灵图
图片压缩
静态资源本地缓存
避免组件重复压缩
减少接口调用
节流、防抖
Vue中自定义指令的理解，应用场景有哪些
分为全局和局部两种
全局：
通过Vue.directive方法进行注册
//聚焦功能
Vue.directive('focus', {
inserted: function (i) {
i.focus()
}
})局部：
通过在options选项中的directives属性实现
//聚焦功能实现
directives: {
focus: {
inserted: function (i) {
i.focus()
}
}
}应用场景：
图片懒加载
输入框防抖
一键copy
拖拽指令
权限校验
说说你对事件循环的理解
事件循环就是事件执行顺序的概念化
同步任务直接进入主线程，异步任务进入异步队列，主线程内的任务执行完后，会去执行异步队列中的任务，异步任务又分为宏任务和微任务，先执行微任务，在执行宏任务。这一执行过程不断重复就是事件循环
异步任务分类
微任务：
1. Promise
2.process.nextTick（Node.js）
3. Object.observe（已废弃；Proxy 对象替代）
4. MutaionObserver
宏任务：
1. script (可以理解为外层同步代码)
2. setTimeout/setInterval
3. UI rendering/UI事件
4. postMessage，MessageChannel
5. setImmediate，I/O（Node.js）
宏微任务执行顺序
先执行微任务，后执行宏任务
说说javascript内存泄漏的几种情况
闭包、定时器、函数内部的this调用污染、全局变量污染
大文件如何做断点续传
拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕
什么是md5
消息摘要算法，用于校验数据/文件的完整性
原生js如何实现上拉加载下拉刷新
上拉加载：
本质是页面触底或者快要触底时的动作
公式为：scrollTop（滚轮距顶部的距离） + clientHeight （滚轮的高度）>= offsetTop（允许滚动的距离）
下拉刷新：
下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作，主要分为三个步骤：
监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。
说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别
设备像素：
又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”
css像素：
适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位
设备独立像素：
设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素
在javaScript中可以通过window.screen.width/ window.screen.height 查看
dpr：
设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取
ppi:
每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像
谈谈你对BFC的理解
全称为Block Formatting Context，即块级格式化上下文，在页面内形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
渲染规则：
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
应用场景:
防止高度塌陷
清除内部浮动
自适应多栏布局
说说TCP为什么需要三次握手和四次挥手
三次握手：
指在建立一个TCP连接时，需要客户端和服务器总共发送3个包，主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备
四次挥手：
服务端在收到客户端断开连接Fin报文后，并不会立即关闭连接，而是先发送一个ACK包先告诉客户端收到关闭连接的请求，只有当服务器的所有报文发送完毕之后，才发送FIN报文断开连接，因此需要四次挥手
前端性能优化的手段有哪些
减少请求数量
文件合并
图片处理
减少重定向
使用缓存
不使用CSS @import
避免使用空的src和href
减小资源大小
压缩
webp
开启gzip
优化网络连接
使用CDN
使用DNS预解析
并行连接
持久连接
管道化连接
优化资源加载
资源加载位置
资源加载时机
减少重绘回流
性能更好的API
用对选择器
使用requestAnimationFrame来替代setTimeout和setInterval
使用IntersectionObserver来实现图片可视区域的懒加载
使用web worker
webpack优化
打包公共代码
动态导入和按需加载
剔除无用代码
长缓存优化
最少说出三种前端清除浮动的方法
额外标签法：在需要清除浮动的元素前面放一个空的div，并给这个空div设置属性 clear：both
给父元素设置 overflow 属性 为 hidden 或者 auto
利用伪元素清除有浮动的标签->在有浮动的标签前面添加一个块级元素
什么是强缓存和协商缓存
强缓存是利用http请求头中的Expires和Cache-Control两个字段来进行控制，用来表示资源的缓存时间；浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK；
协商缓存是服务器用来确定缓存资源是否可用过期，向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源
说说React jsx转换成真实DOM的过程
使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(...) ，Babel帮助我们完成了这个转换的过程。
createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象
ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM
说说你对@reduxjs/toolkit的理解？和react-redux有什么区别
reduxjs/toolkit：
Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，使用 Redux Toolkit 都可以优化你的代码，使其更可维护
react-redux：
react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法
React render方法的原理，在什么时候会触发
原理：
在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件
render函数中的jsx语句会被编译成我们熟悉的js代码，在render过程中，react将新调用的render函
数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比
较，更新dom树
触发时机：
类组件调用 setState 修改状态
函数组件通过useState hook修改状态
一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行
render方法，一旦父组件发生渲染，子组件也会渲染
React性能优化的手段有哪些
1.避免使用内联函数
2.使用react fragement 避免额外标记
3.使用immutable，减少渲染的次数，为了避免重复渲染，会在shouldComponentUpdate()中做对
比，当返回true，执行render方法。immutable通过is方法完成对比
4.懒加载组件
5.事件绑定方式（在constructor中使用bind绑定性能更高）
6.服务端渲染
7.组件拆分，合理使用hooks
说说你对栈、队列的理解？应用场景？
栈：
栈（stack）又名堆栈，它是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表，按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据，具有记忆作用
应用场景：
可以简单实现一个逆序数处的功能
队列：
队列是一种特殊的线性表，特殊之处在于它只允许在表的前端进行删除操作，而在表的后端进行插入操作，在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出
应用场景：
广泛应用在广度优先搜索中
说说你对git rebase 和git merge的理解？区别？
git rebase：
作用和 merge 很相似，用于把一个分支的修改合并到当前分支上，提交记录非常清晰，没有分叉，但是大部分情况下，rebase 的过程中会产生冲突，需要手动解决冲突，然后使用git add 、git rebase --continue的方式来处理冲突，完成 rebase，如果不想要某次 rebase 的结果，那么需要使用 git rebase --skip来跳过这次 rebase
git merge：
git merge 在不是快速合并的情况下，会产生一条额外的合并记录，类似Merge branch 'xxx' into 'xxx'的一条提交信息，在解决冲突的时候，用 merge 只需要解决一次冲突即可，简单粗暴
区别：
1、rebase把当前的commit放到公共分支的最后面，merge把当前的commit和公共分支合并在一起
2、用merge命令解决完冲突后会产生一个commit，而用rebase命令解决完冲突后不会产生额外的
commit
说说git常用的命令有哪些
初始化git git init
查看工作区状况 git status
将全部工作区变动提交到暂存区 git add .
提交备注 git commit -m '备注的内容'
查看版本的日志信息 git log
查看所有的版本提交信息 git reflog
版本穿梭命令 git reset --hard id
在gitee中增加一个origin源 git remote add origin https://gitee.com/zhao-kailun/screenshow.git
建立分支 git branch dev
切换到dev分支 git checkout dev
代码合并到主分支 git merge dev
查看所有分支 git branch -a
第一次提交分支时需要的命令 git push -u origin master
查看当前git源头 git remote
移除源头 git remote rm origin
总结
以上就是我参考多个博客所总结的面试题，希望能对有需要的人有所帮助
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
