缔造

针对vite 有一点要做补充的，首先vite其实应该根vue cli做对比的，他们都属于脚手架工具，而wep roulp 他们属于构建工具，只不过现在的构建工具往往内置了构建工具，例如vue cli 内置的webpack，而vite内部实际上存在两种构建工具，分别对应了生产环境的roullp和开发环境的esbuild，同时vite官网中也说名了，使用两种构建工具会带来一些问题，不过roullp已经在进行rust化了，也就是roudown，那么后续vite会全部替换为roudown，从而消除这些差异。不仅如此，第三代构建工具将全部使用rust进行重写，例如PostCSS ---> lightingCSS ESLint ----> dprint Webpack ---> Turbopack、Rspack

其实对于大文件上传，我们采用的正常的方法为，多线程处理切片和加密，同时采用bff中间层来存储，后端服务器只保存切片的引用地址，并且最后的切片并不真实的进行合并，也就是说，只有在用的时候，后端会把切片进行临时的组装，但并不是真正的组装，这样当其他人传输相同的切片的时候，服务器可以根据哈希值很好的识别是否已经存在相同的文件了，那么进行分片上传的时候可以参考两种解决方案， 1 先进行分片，得到分片信息，计算整体哈希，然后在进行上传，这样用户的感知就是，进度条为0（卡好久等待分片和哈希计算完成）----->百分比或者一点点增加 2 边分片，边上传，也就是我假设每次上传都是一个全新的文件，那么我计算一个切片上传一个切片，那么如果服务器存在，当前切片就不会发起二次请求带过去内容（上传应该分两次请求过去，第一次只发送哈希，让客户端判断是否存在当前文件的切片，告诉客户端是否需要发送当前切片，如果需要，在进行二次发送将数据带过去）后续再补上完整文件的哈希， 那么用户的感知就是0--->慢慢增加，如果当前文件已经存在则加载完毕，如果只存在一部分，则快速加载到那一部分对应的位置，这种情况用户的体验感明显好于第一种 那么我们前端其实最重要的就是进行多线程切片和并发控制 因为计算哈希是一个比较耗时cpu密集型的任务，所以开始多线程帮助我们进行处理，再将处理结果汇总到主线程，然后通过并发控制进行上传（同一个服务器浏览器限制tcp最多同时进行六条连接） 同时也需要根后端约定好相互的协议

```js //创建型模式的一种 //保证一个类仅仅只有一个实例对象，并且提供一个对该实例对象的全局访问点 //保证全局只有一个实例，无论创建多少个实例对象，都始终指向同一个实例 //js方式实现 //借助辅助方法实现单例 function getSingle(fn) { let instance = null; // 用于存储单例实例的变量 return function (...args) { // 返回一个新的函数，该函数接收任意数量的参数 if (instance != null) { // 如果已经创建了实例 return instance;...

```js 滑动窗口 var lengthOfLongestSubstring = function (s) { let map = new Set() let left = 0 let ans = 0 for (let right = 0; right < s.length; right++)...

要注意的一点是，即便是同一页面同源，sessionStorage也是不能互相访问的，存在浏览器隔离


之前遇到了一个面试题，问如何实现一个响应式的正方形 用到的就是vw width：25vw height：25vw

```js const str = ` 1 21 3 4 5 6 7 8 9 `; /* 多行字符串要用反引号 */ var arr = str.split("\n"); /* 根据换行符分割 */ let result = []; let...

```js let arrs = Array.from({ length: 10 }, () => 1); console.log(arrs); ```

```js let map = new Map(); arr.forEach((key, index) => { let { name, categories } = key; categories.forEach((e) => { if (map.has(e)) { map.get(e).push(name); } else { map.set(e, [name]); }...