- 博客(35)
- 收藏
- 关注
原创 文件上传哈希加密时造成阻塞的优化处理
选择合适的哈希算法:在文件上传时,可以根据应用场景选择合适的哈希算法。在文件上传的过程中,哈希加密(如 MD5、SHA1 或 SHA256)是一个计算密集型的操作,尤其对于大文件而言,可能会导致阻塞,影响系统的响应时间和用户体验。如果文件上传是一个高频率的操作,或者处理的文件特别大,考虑利用硬件加速来加速哈希计算。Web Workers:如果前端需要进行复杂的哈希计算,可以利用 Web Workers 将计算移到独立的线程中,从而避免阻塞 UI 线程。分块上传:将大文件分成小块上传,每块计算一个哈希。
2024-12-23 09:27:18
533
原创 React Fiber
React Fiber 是 React 16 引入的全新渲染引擎,旨在提高性能并增强渲染过程的灵活性。通过异步渲染、优先级调度和中断更新等机制,React Fiber 能够更高效地处理复杂的 UI 更新,提升用户体验。它使得 React 具备了更强大的性能优化能力,尤其是在复杂的交互和大量数据更新的场景下。
2024-12-13 16:50:43
953
原创 BFC(块级格式化上下文)
BFC(Block Formatting Context)是一个 CSS 布局概念,用于描述元素的布局规则和其包含子元素的方式。它是一个独立的渲染区域,在这个区域内,元素的布局不会影响到外部的元素,反之亦然。BFC 主要用于控制浮动元素、清除浮动、避免元素重叠等问题。
2024-12-10 14:08:33
849
原创 为什么使用 Token 而不是 Cookie 来管理用户认证和会话
Token:因为 Token 存储在客户端的 localStorage 或 sessionStorage 中,且它与特定的浏览器无关,Token 可以在各种平台之间共享,例如浏览器、移动设备、桌面客户端等。Cookie:Cookie 依赖于浏览器的管理,并且每个请求会自动携带 Cookie,这对于 API 请求(尤其是跨域请求)可能会带来不必要的麻烦。Token:Token 本身一般不会存储在服务器端,登出时可以简单地删除客户端的 Token,或者令 Token 失效(例如通过设置较短的过期时间)。
2024-12-08 15:20:52
338
原创 事件循环(eventloop)
事件循环会先执行所有微任务(Promise 1),然后执行宏任务队列中的任务(SetTimeout 1 和 SetTimeout 2)。微任务的优先级比宏任务高,它们会在当前宏任务执行完后,执行完所有微任务队列中的任务后,再去执行下一个宏任务。完成任务: 执行完当前任务后,事件循环会再次检查执行栈是否为空,若为空则从任务队列中取出下一个任务执行。每一轮事件循环中,都会先执行完一个宏任务队列中的所有任务,然后才会去执行微任务队列中的任务。微任务队列执行完后,事件循环继续从宏任务队列中取出下一个任务。
2024-12-07 23:26:54
504
原创 nodejs理解
Node.js 是一个非常强大和高效的 JavaScript 运行时,适合用来构建高并发、I/O 密集型的应用。因此,Node.js 更适合处理网络请求、数据库操作等 I/O 密集型任务,而对于需要大量计算的应用,可能需要借助其他技术。但是,由于 Node.js 是单线程的,对于某些 CPU 密集型的任务(如图像处理、大规模计算等),可能会出现性能瓶颈。这种异步非阻塞特性,使得 Node.js 在处理高并发、I/O 密集型任务时,比传统的同步阻塞型语言(如 PHP、Java)具有更高的性能和效率。
2024-12-04 17:04:46
362
原创 diff算法
vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到第一个,从这点上来说vue的对比方式更加高效。vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。Vue的diff算法与React类似,但Vue通过模板编译生成虚拟DOM,再通过diff算法来比较每次更新的差异。
2024-12-02 17:00:15
427
原创 vue2和vue3的区别
具名插槽使用方式不同:vue2使用slot=‘’,vue3使用v-slot:‘’作用域插槽使用方式不同:vue2中在父组件中使用slot-scope=“data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default=”{data}"获取。
2024-11-08 08:45:01
817
原创 箭头函数和普通函数的区别
如果没有参数,就直接写一个空括号即可如果只有一个参数,可以省去参数的括号如果有多个参数,用逗号分割如果函数体的返回值只有一句,可以省略大括号。
2024-11-07 16:52:47
275
原创 jwt(token认证)
在介绍JWT之前,先回顾一下利用token进行用户身份验证的流程:1.客户端使用用户名和密码请求登录2.服务端收到请求,验证用户名和密码3.验证成功后,服务端会签发一个token,再把这个token返回给客户端4.客户端收到token后可以把它存储起来,比如放到cookie中5.客户端每次向服务端请求资源时需要携带服务端签发的token,可以在cookie或者header中携带6.服务端收到请求,然后去验证客户端请求里面带着的token,如果验证成功,就向客户端返回请求数据。
2024-11-06 09:54:50
2118
原创 vue和react的区别
Vue的核心思想是尽可能的降低前端开发的门槛,是一个灵活易用的渐进式双向绑定的MVVM框架。React的核心思想是声明式渲染和组件化、单向数据流,React既不属于MVC也不属于MVVM架构。RQ1:声明式是什么意思?声明式与之相对应的是命令式,命令式指的是通过DOM操作一步步把网页变成想要的样子,而声明式则是只需要通过状态去形容最后的网页长什么样子即可。RQ2:组件化是什么意思?
2024-10-31 17:06:50
971
原创 什么是闭包
可以在一个函数里面嵌套另外一个函数。嵌套(内部)函数对其容器(外部)函数是私有的。它自身也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的的表达式(通常是函数,因为ES6有了块级作用域的概念)。闭包在JavaScript高级程序设计(第3版)中是这样描述:闭包是指有权访问另一个函数作用域中的变量的函数。这样闭包的作用就很明显了可以在函数的外部访问到函数内部的局部变量。让这些变量始终保存在内存中,不会随着函数的结束而自动销毁。
2024-10-18 09:22:18
200
原创 防抖和节流
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时一个经典的比喻:想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制电梯第一个人进来后,15秒后准时运送一次,这是节流电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖。
2024-10-18 09:07:49
406
原创 原型和原型链
如果在原型链中找到了这个属性,就返回找到的属性值;如果整个原型链都没找到这个属性值,则返回 undefined,没找到方法直接报错(not a function)
2024-10-18 09:01:32
738
原创 使用vscode将本地项目代码用git管理上传到gitee中
当代码有重大变动的时候,执行 git add *和 git commit “” 这两条命令来查看当前代码。
2024-05-09 20:31:10
196
1
原创 js防抖节流
当持续触发事件 一定时间内没有再触发事件 事件处理函数才会执行一次如果设定的时间到来之前 又一次触发了事件 就重新开始延时触发事件 一段时间内 没有触发 事件执行 肯定是定时器(在设定的时间内 又一次触发了事件 重新开始延时 代表的就是重新开始定时器)(那么意味着上一次还没有结束的定时器要清除掉 重新开始)
2024-04-29 17:17:05
153
原创 手写实现call-apply()函数
函数中的this指向是在函数被调用的时候确定的,也就是执行上下文被创建时确定的。在一个执行上下文中,this由调用者提供,由调用函数的方式来决定。
2024-04-29 09:43:58
387
原创 Pinia
如何定义一个storestore是使用defineStore()定义的唯一名称,作为参数传递,作用是将store连接到devtools。返回函数统一使用usex作为命名方案。具体案例定义一个counter.js,在里面定义一个store使用store读取和写入state。
2024-04-14 17:47:41
300
1
原创 vuevuevue
在父组件写一个函数,将这个函数绑定在子组件(子组件的实例对象上)上并赋值给子组件的v-on的方法名上,然后在对应子组件用this.$eimt(v-on上的方法名 ,参数二可以是子组件要传给父组件的数据,例如this.name,然后父组件接受参数)触发这个事件。
2024-03-31 16:31:56
609
1
原创 使用vue3 + h5 canvas 绘制2d图片和文字
在html中添加画布,js通过ref获取画布实例,获取context进行绘制。canvas必须要指定width和height属性。js通过ref获取实例,ref()是typescript的写法,规定传入的是HTMLCanvasElement,方便之后调用此接口的属性和方法。使用nextTick防止还有html元素没加载完。getContext(‘2d’)获取context,用fillRect填充一个矩形,先提前指定填充样式为黑色。
2024-03-17 16:21:04
2525
1
原创 js优化判断条件
一般在遇到复杂逻辑判断时,第一时间想到的处理方案是用if/else/switch等来实现多个条件判断逻辑处理,但是随着判断条件的增多,代码中的判断条件会越来越来越臃肿,越来越不可读不可维护。
2023-11-06 16:06:46
149
原创 echarts使用问题
在需要显示的拐点数据中添加label,show:true。设置grid: {top: “0px”,left: “0px”,right: “0px”,bottom: “0px”,}tooltip在移动端显示的时候,会有显示不全,超出屏幕宽度,造成了显示不完全,这个时候需要添加confine属性tooltip: {confine:true, // 是否将 tooltip 框限制在图表的区域内}
2023-10-16 18:15:21
193
1
原创 小程序自定义navigationBar
将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle":“custom”,这样原生的导航栏就已经消失,甚至后退键也不会出现需要自定义。另外,早在2016年微信已经开始适配沉浸式状态栏,目前几乎所有的机型里微信都是沉浸式状态栏,也就是说去掉原生导航栏的同时,整个屏幕已经成为可编程区域。
2023-10-08 16:37:57
453
1
原创 路由懒加载
路由中通常会定义很多不同的页面,这些页面打包后被放在一个js文件中,但是这么多页面放在一个js文件中必然会造成页面非常大。如果我们一次性从服务器上请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还可能会出现短暂的空白情况,使用路由的懒加载就可以避免这种情况了。如果我们能把不同路由对应的组件分割成功不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。主要作用就是将路由对应的组件打包成一个个的js代码块,只有在这个路由被访问的时候才加载对应的组件。
2023-09-22 20:37:28
76
1
原创 React学习笔记
css中的一些几何属性【位置、大小、宽高】,一旦发生变化,浏览器会将几何属性重新计算,因为几何属性不光影响自己,还会影响周围元素。重新计算的过程就叫重排。重排之后就会进行重绘。渲染的过程就叫重绘。重排必然导致重绘。
2023-07-23 20:30:04
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人