前端面试项目总结+this指向总结

做过的工作

2020.01-2020.12 AIZOO 可视化机器学习平台
项目介绍：实现用户自定义上传算法模型和数据资源，通过可视化界面拖拽组件构建模型，提交任务，使用 slurm 集群管理自动部署模型训练，查看训练结果以及分析图表等的一站式机器学习平台。
负责内容：
(1) 前端开发：采用 Vue 框架+iview 组件库，基于 WebSocket 即时通讯和 Echarts 图表库绘制动态折线图，通过 API 接口与 Java 后台交互。
(2) 可视化构建模型：使用 svg 绘图和 Cytoscape.js 图库， 通过拖拽(H5的原生拖拽事件)组件构建模型图。

项目重点:

1. 大文件的分块上传
2. websocket实现即时通讯, 通过Echarts动态折线展示模型运行过程中的gpu/cpu利用率等数据
3. Cytoscape.js图库拖拽实现模型绘制, 实现节点上的端点连线并提示用户是否可以连接; canvas图片导出, 自己绘制svg图标
   画图库从jsplumb.js转换为Cytoscape.js, 因为jsplumb.js节点和端点是自己标注的不能区分, 界面不稳定.
4. 前端通过api-blueprint模拟接口,前后端分离开发

项目分工:

前端主要是两个人, 后台有三个同学, 有两个负责java开发, 一个负责slurm集群管理

框架选型:

vue + Cytoscape.js

以multipart/form-data形式post上传文件及其相关参数

什么是multipart/form-data请求–https://www.cnblogs.com/tylerdonet/p/5722858.html

项目中使用截图:

大文件上传是如何实现的 - 非全详细的博文

Blob.prototype.slice实现切片

• 前端
  前端大文件上传核心是利用 Blob.prototype.slice 方法，和数组的 slice 方法相似，调用的 slice 方法可以返回原文件的某个切片, 这样就可以根据预先设置好的切片最大数量将文件切分为一个个切片，然后借助 http 的可并发性，同时上传多个切片，这样从原本传一个大文件，变成了同时传多个小的文件切片，可以大大减少上传时间.
  另外由于是并发，传输到服务端的顺序可能会发生变化，所以我们还需要给每个切片记录顺序, 每次传参包括当前分片计数chunkNumber, 分片大小chunkSize, 总分片数chunkTotalNumbers以及分片文件等.
• 服务端
  服务端需要负责接受这些切片，并在接收到所有切片后合并切片
  这里又引伸出两个问题
  • 何时合并切片，即切片什么时候传输完成
    第一个问题需要前端进行配合，前端在每个切片中都携带切片最大数量的信息，当服务端接受到这个数量的切片时自动合并，也可以额外发一个请求主动通知服务端进行切片的合并
  • 如何合并切片
    第二个问题，具体如何合并切片呢？这里可以使用 nodejs 的 读写流（readStream/writeStream），将所有切片的流传输到最终文件的流里

分片上传流程总结

• 大文件上传

  • 前端上传大文件时使用 Blob.prototype.slice 将文件切片，并发上传多个切片，最后发送一个合并的请求通知服务端合并切片
  • 服务端接收切片并存储，收到合并请求后使用流将切片合并到最终文件
  • 原生 XMLHttpRequest 的 upload.onprogress 对切片上传进度的监听
  • 使用 Vue 计算属性根据每个切片的进度算出整个文件的上传进度

• 断点续传

  • 使用 spark-md5 根据文件内容算出文件 hash
  • 通过 hash 可以判断服务端是否已经上传该文件，从而直接提示用户上传成功（秒传）
  • 通过 XMLHttpRequest 的 abort 方法暂停切片的上传
  • 上传前服务端返回已经上传的切片名，前端跳过这些切片的上传

目前项目里的服务器合并文件是先建立一个临时目录存放上传的分片文件, 上传完成以后合并merge,再挪到项目存放路径下.

问题-多个服务器扩容保证服务端的文件存储如何保证可控

分片的临时文件存在服务器上, 最后合并请求以后挪到项目存放路径下.若用户量巨大, 服务器单点无法完成任务,需要扩容到多台服务器.
每个人访问服务器可以路由到不同服务器上, 分片成200个文件可能50个文件在服务器1上, 150个文件在服务器2上.

解决方案(蚂蚁二面面试官的解决方案):
1- 阿里云(爱sei爱思?)/亚马逊(s3?)等有一些专门做存储的云服务, 可以直接把文件存到云服务上面, 这样无论应用层扩展到多少层, 这样存储永远都是分布式的云存储, 就可以借用这种已经存在的标准的服务和接口来实现.
2- 通过一些方式把用户路由到一台服务器上, 确保用户所有的临时文件都存在一个服务器上,需要保证这一个用户同一时刻只在一个服务节点上. 但这种方案会把整个应用集群从无状态变成有状态,需要去感知当前我服务的是哪些用户以及用户在哪些机器上, 这样会导致比较高的复杂度.

实现一个大文件上传和断点续传- https://juejin.cn/post/6844904046436843527

针对上一个链接的扩展-https://juejin.cn/post/6844904055819468808#heading-8

大文件上传项目github地址-https://github.com/yeyan1996/file-upload

文件上传总结

各种文件上传攻略，从小图片到大文件断点续传-https://juejin.cn/post/6844903968338870285

websocket上传文件(补充,非项目应用)

使用Html5的WebSocket在浏览器上传文件
文件上传的步骤: 打开websocket–连接websocket服务器–在浏览器里选择文件–将文件读入到内存中(以arraybuffer的形式)–在socket里发送文件–完毕!

服务器端:

配置好websocket的服务器, 使用一个java的开源websocket服务器: Java-WebSocket
根据该项目的快速教程可以建立一个websocket服务器, 就是里面的一个ChatServer.java文件. 一个聊天室服务器.

客户端(html): 先建立websocket连接, 然后使用new FileReader()通过readAsArrayBuffer以二进制形式读取文件

websocket连接在项目中的使用+Echarts动态折线图

项目中使用的http1.1 和 websocket

很好的参考链接websocket+HTTP2+grpc解析-https://ryan4yin.space/posts/websocket-http2-and-grpc/

// WebSocket API
var socket = new WebSocket('ws://websocket.example.com');

// Show a connected message when the WebSocket is opened.
socket.onopen = function(event) {
   
  console.log('WebSocket is connected.');
};

// Handle messages sent by the server.
socket.onmessage = function(event) {
   
  var message = event.data;
  console.log(message);
};

// Handle any error that occurs.
socket.onerror = function(error) {
   
  console.log('WebSocket Error: ' + error);
};

websocket和http2.0的服务器推送的对比分析

http/2, SSE服务器推送(Server-sent Events)

https://www.haorooms.com/post/long_lianjie_websocket
https://www.cnblogs.com/goody9807/p/4257192.html
https://www.cnblogs.com/goloving/p/9196066.html
https://my.oschina.net/u/4581713/blog/4594420