我还是我…-优快云博客

原创 md5加密spark-md5

原因：大文件一次性计算Md5有时会遇到卡死现象或者没有响应，原因是FileReader是 JavaScript 中用于读取文件内容的 API,在使用FileReader读取大文件(大于4G)时，它将整个文件加载到内存中进行处理，而大文件可能会超出浏览器的内存限制，导致浏览器崩溃或运行缓慢。因此，对于大文件(大于4G)需要分片计算Md5值。分片计算md5，对于大文件和超大文件会非常有利，不容易出错，不占用大内存。1.1G左右的文件，分片Md5计算的耗时大概是整个文件Md5计算的一半,文件越大越明显。

2024-07-03 18:49:16 1563 2

原创前端大文件下载（带进度条）

前端大文件下载（带进度条）1.需求背景2.需求分析：3.实现方式4.实现方式解析1.递归调用接口获取数据流（base64/blob）,我这里后端接口返回的是base64;2.后端对文件进行切片处理，接口返回流数据和总切片数以及当前的切片索引，前端进行进度计算，和流数据整合；3.注意，不能对接收的base64数据流直接字符串拼接，否则会报错(Invalid string length)，字符串长度超过了 JS 引擎的限制，那么这个长度限制到底是多少呢？根据搜索到的结果，V8 引擎支持的字符串长度为 2 的 2

2022-01-29 13:21:21 13210 6

原创 vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求1.需求背景：2.需求分析：3.实现方式：4.实现方式解析：1）浏览器页面事件基础2）在mounted监听beforeunload和unload事件5.存在的问题/风险点：1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；2）浏览器提示框的样式和内容是默认的，不能更改；3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行

2021-08-22 13:46:34 20146 1

原创 Object.defineProperty和Proxy的比较

Object.defineProperty和Proxy的比较一.Object.defineProperty 介绍1.基本用法2.在vue2.x中的应用二.Proxy 介绍基本用法三.Object.defineProperty和Proxy对比一.Object.defineProperty 介绍1.基本用法Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)；/

2021-05-08 19:34:58 1771

原创 Webpack 配置优化

Webpack 配置优化一.构建流程1.启动（shell 与 config 解析）2. 编译与构建主流程1）编译-核心对象 Compilation2）编译与构建主流程3）打包输出(重点环节，所有的优化配置都在这一环节实现)二.可优化配置（常用）1.TreeShaking(摇晃树)2.optimization(最优化配置)3.externals4.dll(动态链接库)5.externals与dll对比6.extensions,mainFiles,alias配置7.多入口、多页面配置（这里就不介绍了，很简单）感

2021-04-23 18:14:44 1328 1

原创前端面试的数据结构与算法

前端面试的数据结构与算法面试大厂时会问的数据结构与算法数据结构（二叉树）1.找出二叉树中节点值的和等于固定值的路径2.深度优先遍历与广度优先遍历2-1 深度优先遍历2-2 广度优先遍历算法1.时间复杂度2.判断数组中是否满足有其中一项等于其它两项之和；3.栈和队列4.斐波那契数列总结面试大厂时会问的数据结构与算法数据结构（二叉树）首先来了解一下什么是二叉树（Binary tree），它是树形结构的一个重要类型，二叉树的存储结构及其算法都较为简单，二叉树特点是每个结点最多只能有两棵子树，且有左右之分，一

2021-02-14 00:42:29 3353 4

原创手动实现vue2.0的双向数据绑定原理

vue2.0的双向数据绑定原理（手动实现）一句话概括：数据劫持（Object.defineProperty）+发布订阅模式1.发布订阅模式2.new Vue()的时候做了什么？合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片下面展示同样高亮的 `代码片`. ```javascript // An highlighted block var foo = 'bar'; ```生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如

2021-02-05 16:43:43 1864 4

weixin_42682011的博客