【整理二】

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则更整洁且易于审核