【整理二】

1.SPA（单页应用）首屏加载速度慢怎么解决？
减小入口文件体积
静态资源本地存储
UI框架按需加载
图片资源的压缩
组件重复打包
开启Gzip压缩
使用SSR

---

2.Vue中自定义指令的理解，应用场景有哪些？
在Vue2.0中，代码复用和抽象主要形式是组件，
然而有的情况下，仍然需要对普通DOM元素进行底层操作，
这时候就需要使用到自定义指令
应用场景：表单防止重复提交、图片懒加载、一键copy的功能 

---

3.说说javascript内存泄漏的几种情况？
意外使用全局变量（比如函数内部使用全局变量）
定时器不清除，一直占用内存，得不到释放
或者在定时器内调用外部函数，得不到释放
闭包，内部函数引用外部函数变量，得不到释放
不清理dom元素的引用
监听事件的解除，监听的时候addEventListener，在不监听的时候要使用

---

4.大文件如何做断点续传？
断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分
每一个部分采用一个线程进行上传或下载，如果碰到网络故障，
可以从已经上传或下载的部分开始继续上传下载未完成的部分，
而没有必要从头开始上传下载，可以节省时间，提高速度
一般实现方式有两种：服务器端返回，浏览器端自行处理
上传过程中将文件在服务器写为临时文件，等文件上传完，将临时文件重命名为正式文件
如果中途上传中断过，下次上传的时候根据当前临时文件大小，
作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件
拿到文件，保存文件唯一性标识，切割文件，分段上传，
每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕

---

5.原生js如何实现上拉加载下拉刷新？
上拉加载的本质是页面触底，或者快要触底时的动作
scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0
clientHeight:一个定值，表示屏幕可视区域的高度
scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度
简单实现

let clientHeight = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
let distance = 50; //距离视窗还用50的时候，开始触发；
if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作
监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，
并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置

---

6.说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？
CSS像素: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位
设备像素又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，
也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已
设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素 

---

7.谈谈你对BFC的理解？
BFC全称Block Formatting Context，即块级格式化上下文，
它是页面中的一块渲染区域，并且有一套属于自己的渲染规则
内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

---

8.说说TCP为什么需要三次挥手和四次握手？
三次挥手其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包
主要作用就是为了确认双方得接受能力和发送能力是否正常，
指定自己得初始化序列号为后面得可靠性传送做准备

tcp终止一个连接，需要经过四次挥手
服务端在收到客户端断开连接Fin报文后，并不会立即关闭连接，
而是先发送一个ACK包先告诉客户端收到关闭连接的请求，
只有当服务器的所有报文发送完毕之后，才发送FIN报文断开连接 

---

9.前端性能优化的手段有哪些？ 
加载优化（减少http请求数）、图片优化、使用CDN、开启Gzip（代码压缩）、
样式表和JS文件的优化、减少不必要的Cookie、脚本优化、前端代码结构的优化、SEO优化

---

10.最少说出三种前端清除浮动的方法？
额外标签法：在需要清除浮动的元素前面加空 div 并设置 clear 为 both
浮动引起的父元素高度塌陷时，设置父元素 overflow 属性为hidden或auto
after 伪元素清除法浮动

---

11.什么是强缓存和协商缓存？
浏览器首次请求资源后，需要再次请求时，浏览器会首先获取该资源缓存的header信息，
然后根据Cache-Control和expires来判断该资源在本地缓存否过期
没过期：直接从本地缓存中获取资源信息，浏览器就不再向服务器重新请求资源，
过期：需重新发送请求，重新缓存资源，更新缓存时间
强缓存是利用http请求头中的Expires和Cache-Control两个字段来进行控制，用来表示资源的缓存时间

协商缓存是服务器用来确定缓存资源是否可用过期
因为服务器需要向浏览器确认缓存资源是否可用，二者要进行通信，
而通信的过程就是发送请求，所以在header中就需要有专门的标识来让服务器确认请求资源是否可以缓存访问，
所以就有了两组header字段
Etag和If-None-Match
Last-Modified和If-Modified-Since

---

12.React render方法的原理，在什么时候会触发？
render函数里面可以编写JSX，转化成createElement这种形式，
用于生成虚拟DOM，最终转化成真实DOM
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，
函数组件使用useState更改状态不一定导致重新render
组件的props 改变了，不一定触发 render 函数的执行

---

13.说说你对栈、队列的理解？应用场景？
栈又称堆栈，它是一种运算受限的线性表，
限定仅在表尾进行插入和删除操作的线性表，
表尾这一端被称为栈顶，相反地另一端被称为栈底，
向栈顶插入元素被称为进栈、入栈、压栈，从栈顶删除元素又称作出栈

队列：跟栈十分相似，队列是一种特殊的线性表，
特殊之处在于它只允许在表的前端（front）进行删除操作，
而在表的后端（rear）进行插入操作
进行插入操作的端称为队尾，进行删除操作的端称为队头
当队列中没有元素时，称为空队列
在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队
因为队列只允许在一端插入，在另一端删除
只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出

栈应用场景：借助栈的先进后出的特性，可以简单实现一个逆序数处的功能，
首先把所有元素依次入栈，然后把所有元素出栈并输出
队列应用场景：当需要按照一定的顺序来处理数据，而数据量在不断地变化的时候，
则需要队列来帮助解题，队列的使用广泛应用在广度优先搜索种，
例如层次遍历一个二叉树的节点值

---

14.说说你对git rebase 和git merge的理解？区别？
这两种方法之间的最大区别在于，合并保留了作品的完整历史记录，包括按时间顺序排列，
而Rebase使提交变得整洁，仅与分支上的作品相关 
合并具有较高的可追溯性 
Rebase可以使PR整洁，干净且相关，而不会产生嘈杂的提交 
Merge具有更高的可追溯性，而Rebase则更整洁且易于审核