需求实现

2023/06

面试高级前端开发的过程中, 深深感觉到设计思想和前端基础的不足, 所以现在开始每天实现一些需求, 来提升自己的能力

---

享元模式

池化思想其实是一个设计模式的体现，这个设计模式就是享元模式；

享元模式将状态划分为内部状态和外部状态，内部状态是可以共享的状态，而外部状态可以暴露一些方法以修改，是每个实例之间不同的一些属性；

1. 任务池

需求分析

• 创建一个任务池，可以添加异步任务，设置最小运行(min)和最大运行(max)，满足条件时，会自动运行IDLE和ERROR的任务，ERROR任务重试最大为3次，失败后，状态改为STOP
• 任务池可暂停， 暂停后，正在发送但未返回的任务，会停止，等待任务池的启动
• 异步任务：每个任务有IDLE SUCCESS ERROR PENDING STOP 五种状态

参考

• js实现"线程池"限制异步任务数量
• JavaScript 任务池
• generic-pool

---

2.线程池(Worker)

需求分析

在大文件分片上传的需求里面，一般前端需要读取文件内容然后计算MD5戳，这个过程是非常耗费CPU的，因此它比较适合放在Worker中执行，执行完之后通知到主线程就行了；

当上传的文件多起来了，就需要反复地创建和销毁Worker，如果一不小心某些Worker没有被销毁掉，它们就会永驻于内存，导致内存泄漏；

为了避免这种情况一般就可以用线程池来管理线程，可以设定一个最大线程数，当某个线程执行完任务之后就将其回收到线程池中，如果需要启动一个新任务就从线程池拿出一个Worker来执行它，这样既能避免反复创建和销毁带来的性能损耗，也能避免销毁不当带来的意外的内存泄漏；

参考

• 客户端JavaScript的线程池设计详解
• 备受“冷落”的享元模式（上）
• Thread pool
• workerpool
• threads
• Node.js 实现轻量化进程池和线程池

---

大文件上传

需求分析

1. 前端
   • 分块，切片
2. 后端
   • 接收分片

学习

1. blob.slice(start, end, contentType)
   • 返回新的blob对象
   • contentType决定URL.createObjectURL()创建链接解码的默认行为
   • 所有Content-Type字典
   • JS 检测上传文件类型
     • file-type
     • List_of_file_signatures
     • Magic bytes

参考

• https://zhuanlan.zhihu.com/p/386493135?utm_id=0
• multiparty - npm
• 字节跳动面试官，我也实现了大文件上传和断点续传
• input file 文件框“取消”按钮事件
• 写给新手前端的各种文件上传攻略，从小图片到大文件断点续传

---

websocket客户端

需求分析

题目：设计一个websocket客户端模块给团队人员使用 要求：稳定性和可用性，不需要考虑安全性，扩展性等其他因素 考察要点：如何通过设计机制来保证强稳定性，需要考虑到各种情况，保证业务高可用

技术方式不限，ws相关代码用js，不引入现有生态的ws的npm库

实现功能

• 连接错误处理：当连接失败时，你需要监听error事件和close事件，获取错误信息和关闭码，并尝试重新连接或报告错误。
• 心跳检测：为了检测和关闭断开的连接，你需要定期发送心跳包（ping帧）并等待响应（pong帧）。如果没有收到响应，你可以关闭连接并重新连接
• 数据压缩：你可以使用permessage-deflate扩展来压缩数据负载。这个扩展可以在客户端和服务器之间协商压缩算法和参数

参考

• https://cloud.tencent.com/developer/article/2168088

• https://juejin.cn/post/7128030988479037447

• https://github.com/nuls-io/nuls-v2-docs/blob/master/design-zh-CHS/r.rpc-tool-websocket设计v1.3.md

• https://socket.io/zh-CN/docs/v4/

• https://blog.csdn.net/niugang0920/article/details/83686205

• 十分钟了解WebSocket协议

  • 基于TCP/IP协议，独立于HTTP协议的通信协议
  • 双向通讯，有状态，客户端一（多）个与服务端一（多）双向实时响应（客户端 ⇄ 服务端）
  • 应用在浏览器的 Socket （是 Socket 模型接口的实现），Socket 是一个网络通信接口 （通信规范）
  • RFC 6455 规范 是大多数浏览器实现的 WebSocket API 协议。
  • WebSocket协议不受同源策略影响。
  • 发心跳包最好服务器发送？

• WebSockets版本之间的协议差异是什么？

• 使用WebSocket 时的安全注意事项

• Websocket 可以玩出些什么花儿？

• WebSocket 浅析

• websocket长文本问题？

• 待看

  • https://www.cnblogs.com/cangqinglang/p/15991378.html
  • 【译】Engine.IO协议

socket.io聊天室

需求分析

---

图片懒加载

参考

• Vue.js：图片懒加载和预加载的实现与原理

---

虚拟树形结构

参考

element-ui, ant-design

virtualized tree vue

Tree组件在海量数据时的性能优化：虚拟树

---

前端监控

参考

掘金

• 网易云音乐大前端监控体系（Corona）建设实践-开篇
• “Script error.”的产生原因和解决办法

---

WebGl

参考

• Canvas 最佳实践（性能篇）
• 手把手教你实现高性能的Canvas瀑布图和频谱图(上)

---

GIS

参考

b站视频

---

emoji功能

参考

• 表情符号-wiki
• twemoji
• 探索emoji🤦🏻‍♂️字符串长度之谜

---

音视频

参考

• 从0到1实现Web端H.265播放器：视频解码篇

---

(end)额外

参考

• 业务组件库在大公司是如何立项的
• 你可能不需要微前端，但你一定会需要微内核
• 大厂面试官：你做过什么有亮点的项目吗？
• 我在腾讯这一年
• 重学ts
• 优化实战 第 49 期 - 责任链模式在高德地图中的应用
• Promise 不能被取消，真的算是它的缺点吗？