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