考试题整理

SPA（单页应用）首屏加载速度慢怎么解决？

​ 首先要知道什么是首屏加载，首屏加载就是指的是浏览器从响应用户输入网址到渲染页面的时间，此时整个页面不需要全部渲染成功，但当前视窗需要的必须渲染出来。首屏加载慢的原因：有可能是因为网络问题，我们需要的资源体积过大等等。怎么解决速度慢呢？

1，减少入口文件体积：常用的手段是路由懒加载，只有在解析路由时才会加载组件；
2，静态资源本地缓存： 后端返回资源： 采用HTTP缓存；前端合理利用：localStorage；
3，UI框架按需加载 
4，避免组件重复打包
5，图片资源压缩
6，开启GZip压缩，拆完包后，我们再用gzip做一下压缩，安装compression-webpack-plugin
webpack中配置安装

前端性能优化的手段有哪些？

前端性能优化我们可以从四个方面进行讲解分别是浏览器-资源-图片-代码层面。

首先从浏览器方面来讲：减少HTTP请求、使用HTTP2.0、设置浏览器缓存策略：主要为设置缓存策略：强缓存和协商缓存(编写中)。白屏时间做加载动画、增强用户体验

再从资源方面来讲:静态资源cdn:静态css/js/img等资源可以做cdn缓存、静态资源单独域名:浏览器请求并发限制、cookie传输，单独域名，不会携带cookie:方便分流和缓存（动静分离，有利于静态资源做cdn缓存）

gzip压缩:使资源体积更小,服务端配置，

再从图片来讲:

字体图标代替图片图标、精灵图、图片懒加载：为了首屏渲染更快，图片可设置一张加载图代替，当页面在可视区域内时在替换为正真的图片。如果有首屏很大的高清图，可先渲染清晰度低的缩略图，在首页基本构建完成下一次事件循环再去替换为高清图

图片预加载：可以在window.onload之后请求一些其他地方需要的图片资源，比如我们有一个活动页使用了高清图，我们可以在它的入口前的首页就加载它，当我们进去页面时，浏览器就会从缓存里读取这张图片

使用png格式的图片：PNG 格式是WEB 图像中最通用的格式，它是一种无损压缩格式

小于10k的图片可以打包为base64格式：可以使用webpack url-loader处理

再从代码方面来讲:

慎用全局变量、命名污染、缓存全局变量、减少重绘回流：回流：当元素的规模尺寸，布局，隐藏等改变的时候，render dom需要重新构建，这就称为回流。重绘：元素只更新外观，风格，而不会影响布局的，叫重绘

节流、防抖、少用闭包、减少内存泄漏、减少数据读取次数：如for循环优化，减少length读取次数等。

Vue中自定义指令的理解，应用场景有哪些？

​ 注册一个自定义指令有全局注册与局部注册

全局注册注册主要是用过Vue.directive方法进行注册
注册一个自定义指令有全局注册与局部注册，全局注册注册主要是用过Vue.directive方法进行注册，局部注册通过在组件options选项中设置directive属性；

应用场景：1，输入框防抖，2，图片懒加载；3，一键copy功能

说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别？

CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位；
设备像素（device pixels），又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已；
设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素；
dpr（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取；
ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像；
无缩放情况下，1个CSS像素等于1个设备独立像素；设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变；PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）；在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素；设备像素比（dpi） = 设备像素 / 设备独立像素；每英寸像素（ppi），值越大，图像越清晰；

谈谈你对BFC的理解？

BFC：block formatting context，块级格式化上下文。
BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
BFC特性：
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

2、计算BFC高度时浮动元素也参于计算（重点）

3、BFC的区域不会与浮动容器发生重叠

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器，容器内部元素不会影响容器外部元素

说说TCP为什么需要三次握手和四次握手？

三次握手：原因一：避免历史连接；原因二：同步双方初始序列号；原因三：避免资源浪费；
四次挥手：1.防止具有相同「四元组」的「旧」数据包被收到；
2，保证「被动关闭连接」的一方能被正确的关闭，即保证最后的 ACK 能让被动关闭使用CDN方接收，从而帮助其正常关闭；
10.前端性能优化的手段有哪些？
1，减少http请求数；2. 图片优化；3. 使用CDN；4. 开启GZIP；5. 样式表和JS文件的优化；6. 使用无cookie域名；7. 前端代码结构的优化

最少说出三种前端清除浮动的方法？

伪元素
overflow:hildden
clear:both

说说你对事件循环的理解？

事件循环：在JavaScript中，所有的任务都可以分为：同步任务，异步任务；
同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是事件循环

说说javascript内存泄漏的几种情况？

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存，并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费

1，意外的全局变量，
2，闭包引起的内存泄漏
3，DOM之外的引用
4，被遗漏的定时器和回调函数

大文件如何做断点续传？

文件上传简单，文件变大就复杂

上传大文件时，以下几个变量会影响我们的用户体验：服务器处理数据的能力、请求超时、网络波动

这里涉及到分片上传及断点续传两个概念

分片上传

分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传

上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件

大致流程如下：

1. 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块；
2. 初始化一个分片上传任务，返回本次分片上传唯一标识；
3. 按照一定的策略（串行或并行）发送各个分片数据块；
4. 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件

断点续传

断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分，每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头开始上传下载。用户可以节省时间，提高速度

一般实现方式有两种：服务器端返回，告知从哪开始、浏览器端自行处理

原生js如何实现上拉加载下拉刷新？

上拉加载的本质是页面触底，或者快要触底时的动作： 判断页面触底我们需要先了解一下下面几个属性 scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值 clientHeight:它是一个定值，表示屏幕可视区域的高度； scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)；.下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作： 关于下拉刷新的原生实现，主要分成三步： （1）监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY（2）监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值； （3）监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置+