- 博客(24)
- 收藏
- 关注
RSS订阅原创 【React中的闭包陷阱】
以下分析按照react的函数组件写法进行函数能够访问并记住其定义时所在作用域（即使该函数在定义的作用域外执行），这个函数 + 词法环境的整体就是闭包// 节流实现 - 闭包// 定时任务id// 存储尾参数if (!timerId) {}, dealy)const throttleEffect = throttle(throttleTarget, 500) // throttleEffect从throttle中返回，持有词法作用域变量timerId和targetArgs的引用，进而形成闭包。
2025-12-10 20:44:44
367
原创 【vue3 更新过程中VNode到真实DOM的过程及diff算法】
本文分析了Vue3中VNode更新到真实DOM改变的完整过程。首先介绍了响应式状态更新后，effect将任务推入队列的机制，以及通过queueFlush实现微任务调度。重点解析了diff算法的执行流程，包括双端对比中的左端和右端比较，以及三种可能的处理情况：新增节点、删除节点和复杂变化处理。文章还探讨了nextTick的实现原理，说明其如何确保回调在DOM更新后执行。整个过程展示了Vue3高效更新DOM的核心机制，通过编译时优化和运行时diff算法实现性能优化。
2025-12-07 17:30:55
729
原创 【Vue 渲染流程揭秘】
本文章以vue@3.5.22版本和组合式写法作为基准进行的调试分析，如为vue2或者setup的选项式的写法，请不要按照当前文章来参考，其实现的方式不同。其中所使用的代码和图片均以指引作用，会省略部分非关键代码。
2025-11-17 18:00:24
838
3
原创 【React的Fiber及中断-重启逻辑的设计】
react的循环渲染逻辑可以参考我的这篇文章。react循环渲染按照上述流程循环往复知道全部渲染完成。
2025-10-28 11:31:21
974
原创 【React渲染流程原理揭秘】
以下均在react@18版本下进行的分析,图片主要以入口或者较为关键代码的指引，关键代码可能会省略入参以及一些其它的相关代码。
2025-10-15 14:48:58
1084
原创 【vue2中watch与created执行时机导致的问题】
vue2项目，子组件watch设置immediate监听父组件传递的props，当有值的时候更新form信息，created会对这个form有一个初始化的操作。我在优化的时候发现接口数据已经返回了，但是表单信息回显的都是空的。
2025-09-28 11:42:10
351
原创 【循环依赖带来的问题】
当两个模块之前相互引用形成闭环的时候，我们就可以认为其产生了循环依赖。包括直接循环和间接循环两种。直接循环就是a，b两个模块互相依赖；间接循环相比于直接循环较为复杂，例如 a 依赖 b， b 依赖 c，c 依赖。因为整个项目的开发涉及到的人员和时间跨度非常广，不可避免的会出现循环依赖的产生。
2025-09-15 16:31:29
260
原创 【Css栅格布局-Grid】
到了box2设置了grid-column-start：1，所以会当前应当落位的位置从左到右，从上到下寻找最近的位于第一列的空位；grid-auto-rows与grid-auto-columns作用就是当grid-template-rows与grid-template-columns设置的行与列无法覆盖所有的时候，剩余的行和列默认使用的样式。grid-template-rows设置栅格行效果，grid-template-columns设置栅格列效果，这两个组合一起来进行使用，可以描绘出一个网格装的布局。
2025-09-11 18:10:42
1124
原创 【Vite构建原理与设计理念】
Vite内置了很多plugin用来扩展rollup打包，与webpack的plugin同理。vite在打包构建上主要依赖rollup提供的打包能力，vite主要起到上层封装以提供满足vue打包所需要的配置项。
2025-09-09 11:33:46
307
原创 【web worker优化canvas绘制，离屏渲染】
因为canvas一旦通过canvas.getContext()调用之后，就不能转到web-worker当中，像html2canvas第一步就是调用的canvas.getContext()项目中需要用到截图的功能，但是因为使用微前端的方式，像子应用是iframe的情况没有办法正确截图到子应用。提供了一个可以脱离屏幕渲染的 canvas 对象，调用方式canvas.transferControlToOffscreen()。通过离屏渲染的方式可以绕开在主线程中绘制canvas所带来的性能问题。
2025-09-04 20:09:25
1058
原创 【WuJie-腾讯无界微前端】
而对于子应用发起的请求能不能携带主应用下的cookie信息，我的理解是这样子的。wujie在创建过程中使用proxy代理子应用的window，location等，然后将代码执行时的location替换为代理后的proxyLocation对象，从而实现对子应用location的劫持，来返回子应用正确的location信息。img的src写的相对路径或绝对路径默认是按照当前浏览器的url来的，但是当中存在标签的时候，回按照base标签的herf属性作为相对的解析路径来请求资源。
2025-07-24 15:54:06
1154
原创 【Vite与Webpack的区别】
在浏览器发展的历程中逐渐实现了对ES6语法的支持，Vite在本地运行时正是借助浏览器对ES6语法糖的支持实现了有别于Webpack（Webpack产生的时代浏览器还不支持ES6这些语法糖，像模块导入导出的import/export）本地运行时的行为。Vite在浏览器请求资源的时候还借助强缓存与协商缓存来加速页面的展示。对于依赖（像node_modules这样子的不怎么会变的使用强缓存，而对于编译的源码部分则使用协商缓存）的请求通过使用本地的缓存来省掉了发起请求以及等待响应的时间。
2025-06-06 16:52:58
1364
原创 【Next服务端渲染学习-SSR】
官网文档使用浏览器api，或者dom事件，或者像客户端渲染时所用的useState,useEffect需要写入在客户端组件当中（也就是说这部分的内容逻辑必须要单独起一个文件来写，不能一个文件写到底了）客户端组件可以作为服务端组件的子组件，服务端父组件可以通过props将值传递给客户端子组件。但是服务端组件不能显示的作为客户端的子组件，只能以children的方式传递到客户端组件中，并且无法传递值给服务端子组件。
2025-05-28 17:54:23
883
原创 【强缓存与协商缓存】
浏览器在重新部署后仍使用旧版本的缓存资源，导致DOM中的data属性值与CSS文件中的不一致。问题主要涉及强缓存和协商缓存机制。强缓存通过Cache-Control和Expires头控制，而协商缓存则通过ETag和Last-Modified头实现。在问题中，由于ETag的弱类型导致协商缓存未能正确识别资源更新，浏览器继续使用本地缓存。解决方案建议对无哈希后缀的资源禁用缓存，确保每次请求都获取最新资源，而对带哈希后缀的资源则依赖哈希值的变化来更新缓存。
2025-05-18 17:56:11
655
原创 【Webpack构建原理与设计理念-浅显理解】
Webpack的设计原理基于模块化构建和事件驱动的机制。其核心流程包括获取配置、事件驱动挂载、开始构建、编译模块、借助插件和加载器处理模块，以及构建优化。Webpack通过webpack.config.js获取配置，并返回一个compiler对象，用于启动构建流程。构建过程中，Webpack利用tapable库实现事件驱动，通过hooks挂载插件和加载器，确保在正确的时机执行相应的任务。构建流程包括模块编译、依赖处理、代码分割、Tree Shaking等优化操作。Webpack的设计理念是通过发布订阅模式，
2025-05-15 16:57:52
1491
原创 js数组方法使用
数组方法妙用concat用concat打平二维数组concat特性：不改变原数组参数：一到多个作用：参数是数组，打平(一维)拼接；参数是类数组或其它类型的值，直接拼接。巧用:用concat打平二维数组const test = （arr）=> { for(let i = 0 ; i < arr.length; i++){ if(Array.isArray(arr[i])){ return Array.prototype.concat.
2022-08-22 23:06:36
102
原创 js当中的toString使用问题
js中的数值直接调用toString方法报错，浮点数使用toString()方法的结果并衍生生出浮点数精度丢失的问题
2022-08-21 12:45:38
626
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人