- 博客(218)
- 收藏
- 关注
RSS订阅原创 Web-Worker的基本用法并进行大文件切片上传（附带简易Node后端）
Web Worker是Web浏览器提供的一种在后台线程中运行JavaScript的功能。它独立于主线程运行，可以执行计算密集型或长时间运行的任务，而不会阻塞页面的渲染和交互。通过将大文件切片上传的逻辑放在Web Worker中执行，我们可以充分利用浏览器的多线程能力，提高上传速度，并保持页面的流畅运行。
2025-03-15 14:49:46
954
原创 前端中的 File 和 Blob两个对象到底有什么不同
Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。// true你可以将 File 对象看作是带有文件信息的 Blob。二者在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。
2025-03-15 10:35:47
482
原创 pnpm安装、更新
pnpm 相比较于 yarn/npm 这两个常用的包管理工具在性能上也有了极大的提升，根据目前官方提供的 benchmark 数据可以看出在一些综合场景下比 npm/yarn 快了大概两倍。pnpm 全称 performant npm，意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。没办法直接通过npm命令更新，只能先卸载原先的pnpm。2、到所在pnpm的位置，删除对应的pnpm文件即可。
2025-01-13 09:32:18
1046
原创 同一个form被多次绑定，就会造成最后面的form覆盖前面的，导致触发到的type只会是push
问题分析：同一个form被多次绑定，就会造成最后面的form覆盖前面的，导致触发到的type只会push。出现的问题：不管是修改sms里面的值，changeData里的type只会打印push。修改方案2：把form.item绑定校验放子组件里面,父组件最外层form统一校验。修改方案1：根据遍历的组件创建多个不同的form分别校验。
2024-09-29 13:43:25
210
原创 storybook本地测试，npm link,出现测试项目使用报错问题 Uncaught (in promise) Error: Module “./md-components“ does not
出现问题Uncaught (in promise) Error: Module “./md-components” does not。组件库storybook本地测试，npm link,解决：.umi文件有缓存，删了重启项目即可。
2024-08-30 15:22:49
161
原创 pro-antd 报错Error: Invalid hook call. Hooks can only be called inside of the body of a function compo
发现@types/react版本使用有问题。使用了pro antd，一直。检查了react版本。
2024-08-26 18:23:24
321
原创 vue-table的使用，解决懒加载展开列，数据量过大，造成的卡顿问题
使用懒加载的展开列，当加载的数据量过大，如大于1000条以上，浏览器可能卡死挂了。
2024-05-27 11:16:08
1060
1
原创 vue-quill-editor支持图片缩放和粘贴图片过来的时候自动过滤
【代码】vue-quill-editor支持图片缩放和粘贴图片过来的时候自动过滤。
2023-08-30 17:36:51
358
原创 element-ui动态v-show设置tabel列时,无效果，v-if设置时值会错位
1、element-ui动态v-show设置tabel列时,无效果，2、v-if设置时，值会错位。
2023-05-31 14:47:50
1627
2
原创 forEach、map、flatMap的区别
1、forEach()返回undefined2、不支持链式调用，forEach性能会好一些，因为不用分配内存空间存储新数组并返回3、除了抛出异常throw 以外，没有办法中止或跳出(break,continue,return)循环。
2023-05-13 10:42:30
317
原创 js注意点
const a = b = 3 实际上等于 const a = 3 ，b = 3。又因为这是自执行函数，所以 在作用域外访问，首先先看a和b的值为多少，a 为 undefined。
2023-02-06 19:26:20
86
原创 nodejs事件循环
主线程将所有任务都放在循环队列中，然后由底层的libuv库从循环事件队列中取出任务分配给不同的线程去处理，主线程同时也会进行回调处理，整个过程形成事件循环nodejs实现异步机制的核心便是libuv，libuv承担着nodejs与文件、网络等异步任务的沟通桥梁通过事件驱动模型实现了高并发和异步 I/O ，适合处理I/O密集型任务。
2022-12-02 11:03:22
2024
原创 基础类型存放在栈上，引用类型存放在堆上，请问是为什么？ 字符串是存放在栈上么？
记住一句话：能量是守衡的，无非是时间换空间，空间换时间的问题堆比栈大，栈比堆的运算速度快，对象是一个复杂的结构，并且可以自由扩展，如：数组可以无限扩充，对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言，简单数据类型就比较稳定，并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的，而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。
2022-11-16 17:18:41
995
原创 JS 0.1+0.2为什么不等于0.3
简单地说，number在内存中是以64位二进制存储的，所以0.1 和 0.2 的二进制表示形式是不精确的，所以它们相加时，结果不是精确地 0.3。而是 非常 接近的值：0.30000000000000004，但是如果你的比较失败了，“接近”是无关紧要的。最常见的做法是使用一个很小的“错误舍入”值作为比较的 容差。这个很小的值经常被称为“机械极小值（machine epsilon）”， 对于 JavaScript 来说这种 number 通常为 Number.EPSILON。
2022-11-16 15:41:17
803
原创 Vue2.0 和 Vue3.0 Dom Diff 对比
diff算法的目的是为了找到哪些节点发生了变化，哪些节点没有发生变化可以复用。如果用最传统的diff算法，如下图所示，每个节点都要遍历另一棵树上的所有节点做比较，这就是o(n^2) 的复杂度，加上更新节点时的o(n)复杂度，那就总共达到了O(n^3)的复杂度，这对于一个结构复杂节点数众多的页面，成本是非常大的。实际上vue和react都对虚拟dom的diff算法做了一定的优化，将复杂度降低到了o(n)级别，具体的策略是：同层的节点才相互比较从根节点起遍历整个节点数，只对同层的节点进行相互比较。
2022-10-13 17:11:23
1431
原创 js对象传值传的是引用
答案为：{name: 123, siteUrl: ‘http://www.baidu.com’}因为 对象传值传的是引用，引用是copy给函数形参。
2022-10-10 10:26:31
180
原创 js非匿名自执行函数，函数名只读
这里输出就是20了，因为 b = 20;相当于替换掉全局变量的 b 的值。这里 b = 20；实际上是更改b函数名，但是又修改不了，所以也是无效语句。所以答案显而易见， 为 [Function b]类似于const，不能被修改；
2022-09-27 10:33:48
264
原创 面试官：运行 npm run xxx 的时候发生了什么？
npm run xxx的时候，首先会去项目的package.json文件里找scripts 里找对应的xxx，然后执行 xxx的命令，例如启动vue项目 npm run serve的时候，实际上就是执行了vue-cli-service serve 这条命令package.json文件。
2022-08-04 17:03:20
393
原创 JavaScript 中如何取消请求
众所周知，JavaScript实现异步请求就靠浏览器提供的两个API——XMLHttpRequest和Fetch。我们平常用的较多的是Promise请求库axios，它基于XMLHttpRequest。
2022-07-27 10:29:37
3886
原创 javascript设计模式之适配器模式
个人认为适配器模式其实是一种亡羊补牢式的设计模式，如果在项目开发的开始阶段我们就知道我们期待的数据格式或者方法名等，我们就可能永远都用不到适配器模式；但是项目的迭代往往是不可预期的，当项目迭代之后数据格式或者方法名发生变化之后，我们通常可以使用适配器模式来进行适配解决；当然了，最好的解决办法就是项目开发过程中前后端协商讨论数据格式、文件名等代码规范，这样是对项目的开发效率是会有很大的提升的；...
2022-07-26 11:57:37
510
原创 tree shaking的原理是什么?
别名叫摇晃树，最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术tree-shaking会在打包过程中 静态分析 模块之间的导入导出，确定哪些模块导出值没有被使用，并将其删除，从而实现了打包产物的优化。在之前CommonJs、AMD、CMD的模块化方案中，这种导入导出是动态的，难以预测的，因此在打包阶段，是无法分析哪些模块被使用，例如：而ES 静态module方案下，模块之间的依赖关系是高度确定的静态的，与运行状态无关，可以进行可靠的静态分析，因此整个依赖树可以被静态地推导
2022-07-14 15:13:22
3150
原创 JS 数组的排序 sort方法详解
Array.prototype.sort()sort() 方法用于对数组的元素进行排序，并返回数组。如果省略，sort方法会调用数组中每一项的toString()方法，然后按照unicode编码进行排序，如果数组含有undefined元素，它们将会被排到尾部。数组元素超过2位数排序就出了问题，上面已经说过了sort排序是按照元素的unicode码来进行排序了，先对每一项的第一位按照ascii从小到大进行排序，如果第一位相同再将第二位按照unicode从小到大进行排序。因为 1、2、3、6、7的unic
2022-06-29 14:06:43
7329
1
原创 实现JavaScript对象迭代(iterator)功能
当我们需要对一个对象进行使用for of进行遍历时，这个时候就会出现错误，如下：对于这种报错是由于：js的内置类型并没有实现iterable接口譬如：String、Array、TypedArray、Map 和 Set，都是可迭代对象。可迭代对象， 需要具备 Symbol.iterator 和 next 这两个函数，即可用 for…of 进行迭代，...
2022-06-27 17:51:52
1165
原创 svg和canvas的区别
1.可伸缩的矢量图形2.是基于xml进行绘制图形3.svg放大或者改变尺寸情况下图形质量不会有损。4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，1.h5新增属性2.基于js进行绘制图形1、svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。2、canvas依赖分辨率，svg不依赖分辨率。3、canvas不支持事件处理器，svg支持
2022-06-27 16:17:03
1872
原创 HTML5的离线储存
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：（2）在 cache.manif
2022-06-27 14:32:24
1650
1
原创 z-index属性在什么情况下会失效？
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。z-index属性在下列情况下会失效：...
2022-06-27 11:48:32
1209
原创 canvas 实现图片、页面新增水印
给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、ca
2022-06-23 17:44:35
1176
1
原创 webpack配置优化
多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader。由于启动项目和打包项目都需要加速，所以配置在webpack.base.jscache-loader缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader，由于启动项目和打包项目都需要加速，所以配置在webpack.base.js开启热更新比如你修改了项目中某一个文件，会导致整个项目刷新，这非
2022-06-23 16:35:11
785
原创 HTTP/0.9 到 HTTP/3.0
HTTP协议是HyperText Transfer Protocol（超文本传输协议）的缩写，它是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。伴随着计算机网络和浏览器的诞生，HTTP1.0也随之而来，处于计算机网络中的应用层，HTTP是建立在TCP协议之上，所以HTTP协议的瓶颈及其优化技巧都是基于TCP协议本身的特性，例如TCP建立连接的3次握手和断开连接的4次挥手以及每次建立连接带来的RTT延迟时间。每次请求都必须新建一次连接(connection)，必须通过tcp的三次握手
2022-06-15 14:33:14
726
原创 深入理解web Worker
我们都知道js是单线程模型。也就是说一次只能处理一件事情，前面的事情没有完毕，后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现，我们可以最大限度的利用cpu多核，来提高js的性能。Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务（异步的除外）。要解决的问题是：1.解决页面卡死问题。2.发挥多核CPU的优势，提高js性能。1.非同源限制(本地代码如果以盘符的方式打开也不行，因为没有源啦)主线程代码与Worker线程代码必须同源才能一起正常工作。2
2022-06-14 17:51:17
742
原创 白屏时间、首屏时间
浏览器显示第一个字符或者元素的时间可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStart;白屏时间 = firstPaint - pageStartTime;首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间，dom处于比较稳定的阶段。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过1
2022-06-10 16:28:42
1161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人