前端面试题

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

   首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；首屏加载可以说是用户体验中最重要的环节

       1，减少入口文件体积：常用的手段是路由懒加载，只有在解析路由时才会加载组件；
       2，静态资源本地缓存： 后端返回资源： 采用HTTP缓存；前端合理利用：localStorage；
       3，UI框架按需加载 
      4，避免组件重复打包
      5，图片资源压缩
     6，开启GZip压缩，拆完包后，我们再用gzip做一下压缩，安装compression-webpack-plugin webpack中配置安装
2.Vue中自定义指令的理解，应用场景有哪些？
           注册一个自定义指令有全局注册与局部注册
全局注册注册主要是用过Vue.directive方法进行注册
         注册一个自定义指令有全局注册与局部注册，全局注册注册主要是用过Vue.directive方法进行注册，局部注册通过在组件options选项中设置directive属性；
应用场景：1，输入框防抖，2，图片懒加载；3，一键copy功能
3.说说你对事件循环的理解？
  事件循环：在JavaScript中，所有的任务都可以分为：同步任务，异步任务；
    同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是事件循环
4.说说javascript内存泄漏的几种情况？

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费

程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存

对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃

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

5.大文件如何做断点续传？
     整体思路比较简单，拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕

6.原生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，元素回到初始位置

7.说说设备像素、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个设备像素；设备像素比（dpr） = 设备像素 / 设备独立像素；每英寸像素（ppi），值越大，图像越清晰；
8.谈谈你对BFC的理解？
BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单的理解：BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。
 不使用BFC：内部元素使用浮动的时候，外面的盒子计算不到高度，就会导致高度坍塌
  如果两个块级盒子都设置了margin值，两个盒子相邻的那一边的margin就会重叠

 特性：属于同一个DFC的两个相邻容器的上下margin会重叠
          计算BFC高度时，浮动元素也会参与计算
          BFC的区域不会与浮动容器发生重叠
          BFC内的容器在垂直方向依次排列
          元素的margin-left与其包含块的border-left相接触
          BFC是独立容器，容器内部元素不会影响容器外部元素
 
 触发条件：最常见的是通过 overflow: hidden 来构建 BFC。一般情况下，它的副作用最小。但如果元素下有超出盒子范围的内容，会被截掉， 

 解决问题：解决边距重叠问题：我们只需要在其中一个块级元素外面包裹一层容器，使两个块级元素不属于同一层级，并且触发BFC
  解决高度塌陷问题：如果盒子里面的元素加了浮动，计算外面盒子的高度不会计算浮动的盒子高度，因为浮动不占空间。这个时候我们就需要在外面的盒子触发BFC,这样使他即使内部元素加了浮动也计算浮动元素的高度，不会导致高度坍塌
  解决相邻盒子浮动区域重叠问题：给相邻的盒子也加上浮动，给相邻的盒子设置overflow:hidden
9.说说TCP为什么需要三次握手和四次握手？
三次握手：原因一：避免历史连接；原因二：同步双方初始序列号；原因三：避免资源浪费；
四次挥手：1.防止具有相同「四元组」的「旧」数据包被收到；
2，保证「被动关闭连接」的一方能被正确的关闭，即保证最后的 ACK 能让被动关闭使用CDN方接收，从而帮助其正常关闭；
10.前端性能优化的手段有哪些？
1，减少http请求数；2. 图片优化；3. 使用CDN；4. 开启GZIP；5. 样式表和JS文件的优化；6. 使用无cookie域名；7. 前端代码结构的优化
11。最少说出三种前端清除浮动的方法？
伪元素
overflow:hildden
clear:both