zz_jesse-CSDN博客

转载像高手一样调试程序

当然，打印不是最强大的调试手段，也不是最复杂的工具，有时候它不够用 —— 这时候你可以升级到更强的调试器。在日常工作中，我们很容易停留在自己熟悉的那一套工具里，不去了解别的选择，不去查看更新日志，也不知道其他人都在用什么工具解决类似的问题。有不少人告诉我，他们的同事说 “打印是不好的做法”，但在我讲完之后，也有人跑来和我说 “太高兴有人告诉我，打印其实不是错的”。我认为调试是一种双重技能：一方面是前面讲到的思维方式和流程，另一方面就是强大的工具，只有两者结合，才能高效地发现并解决问题。

2025-07-07 18:29:34 3

转载你以为的 Tailwind 并不高效，看看这些使用误区

Tailwind 写得越多，越觉得混乱”“组件样式重复一堆”“设计师完全看不懂这坨 className”…“blue-500” 具体代表什么品牌色？Tailwind CSS 被誉为“实用优先的 CSS 框架”，然而在实际项目中，对 UnoCSS 完全不了解（其实比 Tailwind 更自由，兼容性好）Tailwind 并不是魔法，它只是一个极致实用主义的 CSS 工具包。🎨 误区三：直接使用 Tailwind 默认色板，导致主题难以统一。✅ 正确的 Tailwind 使用思维：构建语义原子设计系统。

2025-06-18 19:41:47 27

转载 Vue3 + 一个冷门 API，实现了浏览器多屏投屏，效果太惊艳了！

看着这个图的第一时间我就去找产品掰扯，想让他把这个功能pass掉。我在想浏览器怎么访问到系统的参数。当我去翻阅文献的时候发现国外有大佬做出来了这个功能而且很全面。但是使用原生的html写的。我决定参考他的demo把他搬到大屏的项目里头。最近接了个大屏项目，产品想在不同的显示器上展示大屏项目不同的页面，做出来的效果图大概长这样。链接：https://juejin.cn/post/7490588889947865142。vue组件代码就很简单了就不展示了。在指定的显示器新开一个窗口。

2025-06-17 11:48:14 32

转载阿里员工发表万字离职帖，马云发帖回应，引发全网共鸣

最近阿里上热搜了，因为一位离职员工在阿里内网发布了一个万字长文贴谈阿里目前的一些问题，比如：战略不清、既要又要、注重短期和 KPI、真正做事的人变少了等等。离职的员工，根据网上爆料的消息来看，是钉钉的一位产研负责人，花名叫元安，在阿里干了好些年，职级大概在 P8 到 P9 之间。这个长文确实很长，也确实谈了很多问题，我大概看了 20 分钟，终于自己看完了，怎么讲呢？我只能说这位员工对阿里真的很有感情，写的情真意切，有一种恨铁不成钢的感觉。同时，这个帖子马云也看到了，并进行了回复：“元安同学好，谢谢你那么长的

2025-06-12 11:32:36 478

转载 Cursor 内部工作原理

Cursor 会将你的问题转为一个向量，然后在向量数据库中查找最相近的片段，可能包括多个文件中的函数调用、定义、注释等。即便你配置了自己的 OpenAI API 密钥，请求仍会先经过 Cursor 的后端，这样系统才能添加系统指令、代码上下文以及专属格式，确保模型理解你的需求。介绍了 Cursor，一个结合了 AI 技术的代码编辑器，它通过深度学习和语义索引的方式，提升了开发者的工作效率。Cursor 通过与 VS Code 相似的界面和功能，以及自己的 AI 特性，实现了代码的智能化编辑和错误检查。

2025-06-11 11:42:13 105

转载 MCP：AI界的“Type-C”——让AI模型和世界对话从此“零代沟”！

谷歌、OpenAI、阿里、百度等科技巨头已将MCP纳入技术战略，通过它提升AI服务的兼容性、扩展性与智能化水平，开发者可依托其开放生态快速构建插件化应用，企业亦能借此降低AI集成成本，加速业务创新。，为你提供详细的旅行规划，包括天气预报、行程安排等；作为云上托管 MCP 服务的最佳运行时，函数计算 FC 为阿里云百炼 MCP 提供弹性调用能力，用户只需提交 npx 命令即可“零代码”将开源 MCP Server 部署到云上，函数计算FC 会准备好计算资源，并以弹性、可靠的方式运行 MCP 服务。

2025-06-06 18:49:02 57 1

转载干了一年半的Vue3项目，总结出了16个代码规范

合理的使用响应性变量。数据量很大的对象或者数组，同时属性又是嵌套的对象，你的业务场景只需要第一层属性具有响应性，推荐使用shallowRef和shallowReactive定义响应性变量，这时不在推荐使用ref和reactive了。在项目或者开发过程中，尽量使用let或者const定义变量，可以有效的规避变量提升的问题，不在赘述，注意const一般用于声明常量或者值不允许改变的变量。另一个常见的问题是：console打印和debugger之类的，虽然说可以通过插件配置在打包的时候删除掉，但是官方提倡的是。

2025-06-03 14:52:24 161

转载一份完整的「高级前端性能优化」手册

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复执行后续解析。因此，我们可以将每个页面路由组件，拆成单独的一个个 chunk 文件，这样 main.js 文件体积降低，在首屏加载时，不会再加载其他页面的资源，从而提升首屏渲染速度。例举一个常见的场景：在 CSR 客户端渲染中，如果 main.js 资源体积过大，会导致在资源加载完成以前，页面会出现长时间的白屏。

2025-05-29 16:59:12 51

转载一文搞懂 Cursor 内部工作原理~

Cursor 会将你的问题转为一个向量，然后在向量数据库中查找最相近的片段，可能包括多个文件中的函数调用、定义、注释等。即便你配置了自己的 OpenAI API 密钥，请求仍会先经过 Cursor 的后端，这样系统才能添加系统指令、代码上下文以及专属格式，确保模型理解你的需求。介绍了 Cursor，一个结合了 AI 技术的代码编辑器，它通过深度学习和语义索引的方式，提升了开发者的工作效率。Cursor 通过与 VS Code 相似的界面和功能，以及自己的 AI 特性，实现了代码的智能化编辑和错误检查。

2025-05-21 18:08:32 712

转载 Nextjs首屏加载速度性能从80分优化到98分

css使用的tailwind.css库内部对css做了处理优化, 进行不使用style些内嵌样式,提高编译速度( 首屏不需要的组件可使用lazy-load包来做懒加载处理加快渲染速度 )google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化。在根文件加载脚本时如果当前时外部页面则不需要此wasm不加载它避免没必要的加载来优化首次加载速度。可以使用nextui提供的Image,它提供对图片进行不同屏幕的适配尺寸,以及懒加载功能。

2025-05-15 15:18:52 40

转载错怪 React 的半年-聊聊 KeepAlive

发现问题后，我去问日常开发Vue的童鞋们，因为我两年没写vue了，我说：你们是怎么实现tabs布局的，Vue的Keepalive是怎么实现只有显示哪个页面，别的组件存储而不运行watch的，然后说了一下我在react开发tabs的时候尴尬。注释掉的是正确的，这里不提一嘴，vue的console.log的体验感很ok，下面列的就是正确的，我还去百度了为啥Keepalive无效，直到截这张图写这文的时候才看到，人家都谢了，哈哈哈哈。

2025-05-06 18:55:44 41

转载微前端的实践总结

同时，需要注意不同框架可能存在的全局变量污染，比如Vue的全局组件、React的全局状态等，这时候需要沙箱隔离机制。可能需要使用externals配置，将公共库从子应用中排除，由主应用统一提供，但不同版本的库可能会有问题。主应用需要处理一级路由，子应用处理自己的子路由。最后考虑到现有的项目可能已有一定的配置，qiankun可能更容易上手，而Module Federation需要webpack5支持，可能需要升级构建工具，这一系列更繁杂。构建和部署方面，子应用需要独立部署，主应用只需加载子应用的入口文件。

2025-04-30 14:24:44 227

转载前端面试题：浏览器两个 tab 都是同域，如何在一个tab 向另一个 tab 发消息

兼容性良好（支持 Chrome 54+、Firefox 38+、Edge 79+）。选择方案时需根据具体需求（如兼容性、数据复杂度、窗口关系）权衡。通过 Service Worker 作为消息中转站，实现跨 Tab 通信。现代浏览器提供的专用通信 API，允许同源页面通过命名频道通信。事件，其他同源页面可以监听该事件实现通信。直接支持结构化数据（对象、数组等）。需要直接引用目标窗口对象（如通过。，只有其他 Tab 会收到事件。受同源策略限制，仅限同域页面。复杂场景（如离线、后台同步）

2025-04-25 18:13:13 61

转载 2025年10个强大 CSS 新特性

它们消除了许多 JavaScript 变通方法的需求，让你能够构建更简单、更快、更易于维护的布局和交互。CSS 持续进化，带来了许多新功能，让我们的工作更高效、代码更简洁、能力更强大。以下是十个你可以立即开始使用的亮点功能。这样的函数使得在 CSS 中进行直接的数学运算成为可能，减少了对预处理器或 JavaScript 的依赖。将自定义属性转变为具有类型、默认值和继承规则的完全声明的变量，使得它们可以用于动画等场景。(取余) 这样的新函数进行计算，从而避免了许多 JavaScript 或预处理器的技巧。

2025-04-21 15:35:14 175

转载 Figma MCP Server 介绍：专为 AI 编码工具设计的服务器

Figma-Context-MCP 是一个很有价值的工具，它通过为 AI 提供 Figma 设计的结构化信息，从而增强 AI 编码代理 (如 Cursor) 的能力。Figma-Context-MCP 是一个 MCP (Model Context Protocol) 服务器，旨在向 AI 编码代理 (例如 Cursor) 提供 Figma 文件的布局信息。透过提供结构化的 Figma 布局信息，Figma-Context-MCP 可以大幅改善 AI 的 "one-shot" 准确性。

2025-04-18 16:35:49 391

转载部署完DeepSeek之后，到底要怎么用好它？

同时，将大模型与数据体系紧密联系起来，探讨业务对数据体系的需求，以及经典数据中台解决方案的优劣，进而提出大模型带来的新机遇和全新的解决方案。看到业界对大模型应用的热切期盼，作者团队决定将自己的实践经验编撰成书，通过介绍项目中积累的技术体系与方法论，助力读者构建起体系化的思维模式，使读者可以具备全局化视野，提出系统化的解决方案。不少企业在信息化方面已经做了大量工作，会针对自身的业务特点构建一套经典数据中台，这对于沉淀好的已知需求的支撑性较好，尤其是大部分已经承载在数据应用系统中的需求，用户能够很方便地应用。

2025-04-16 15:56:43 572

转载 7种在 JavaScript 中分解长任务的技术

动画帧回调函数实际上拥有自己的 “队列”，在渲染阶段的特定时间运行，这意味着其他任务很难插队将其挤到队列的末尾。但它的问题是，没有技术上的保证来确定它何时或是否会运行。来看一个简单的例子：我们在屏幕上有一个用于递增计数的按钮，旁边还有一个大大的循环在执行一些繁重的工作。Scheduler 接口是 Chromium 浏览器相对较新的功能，旨在成为一种一流的工具，用于以更多的控制和更高的效率来安排任务。由它安排的所有任务都会被置于任务队列的前端，防止其他任务插队并延迟执行，尤其是在以如此快速的方式排队时。

2025-04-15 15:20:32 43

转载前端组件解耦利器：发布订阅模式

虽然像 Redux, Vuex, Pinia 这样的状态管理库有自己的机制，但有时在它们之外，或者在不使用这些库的小型项目中，可以使用 Event Bus 来响应某些状态相关的变化，通知相关组件更新。因此，在使用时需要权衡利弊，遵循最佳实践（特别是取消订阅），并避免滥用，将其用在最适合的场景（如复杂的跨组件通信、模块解耦等），才能真正发挥其价值。这些组件之间经常需要通信和协作。它通过引入一个中介（事件总线），使得组件间的通信可以间接进行，降低了组件之间的依赖关系，提高了代码的可维护性和可扩展性。

2025-04-12 10:25:30 64

原创到底用merge还是rebase?

，保留两条分支的原始路径。通过上面的对比，我认为rebase在团队合作中会存在一些风险，分支的最新状态，假装你的工作一直基于最新的代码，但。分支，他们的本地历史会与远程冲突，必须手动修复。的区别，帮助你理解它们如何影响提交的历史的。被丢弃（如果分支已推送，需要强制推送。**：其他人能看到一致的历史，直接。更安全的核心原因是不修改历史，而。• 个人分支整理（未推送的提交）。• 生成一个新的 **合并提交。• 公共分支协作（如团队开发）。• 需要保留完整的分支合并记录。**，明确记录分支交汇点。

2025-04-10 17:03:41 382

转载前端异常隔离：Proxy、Web Workers 与 iframe 的深度对比

Web Workers是浏览器提供的多线程机制，插件代码运行在独立的线程中，完全隔离于主线程，无法直接访问DOM或其他主线程资源。和Proxy的主要区别在于隔离的层次：Proxy是逻辑层面的隔离，而Web Workers是物理层面的线程隔离。iframe虽然提供了浏览器级别的隔离，每个iframe有独立的渲染进程和JavaScript执行环境，但它的资源消耗较大，每个iframe需要加载完整的文档环境，对于需要频繁创建和销毁的场景不合适。：终极隔离，但成本和复杂度较高，适合完全不可信内容。

2025-04-08 19:57:15 110

转载关于清明节假期延长至七天的通知

梦里啥都有祝大家愚人节快乐~

2025-04-01 18:00:09 33

转载深入解析前端插件机制：以埋点SDK与Webpack为例

最近在做前端监控的全链路项目, 刚好埋点SDK这边的架构设计需要用到插件机制, 就想着和之前学过的webpack插件机制进行一个类比, 看看有哪些共通和差异之处。在现代软件开发中，插件机制是实现系统扩展性和灵活性的核心设计模式之一。插件机制通过将核心功能与扩展功能分离，使得系统能够在不修改核心代码的情况下扩展能力。：ByteTop 的监控场景要求“永不中断”，Webpack 的构建场景允许“快速失败”。为例，深入探讨两者的插件机制设计异同，并揭示其背后的设计哲学。

2025-03-31 18:44:25 57

原创面试官最想听到的Vue和React区别

例如，可以仅使用核心库实现基础功能，再按需引入Vue Router（路由）、Vuex（状态管理）、Vue CLI（构建工具）等。：React拥有庞大的生态系统，包括React Router、Redux、Axios、Ant Design等，且持续引入创新方案（如React Query、Zustand）。：React强调“声明式UI”，通过JSX语法将UI描述为纯函数，开发者只需定义状态（State）和UI的映射关系，React自动处理UI更新。）等，语法更接近传统HTML，适合传统前端开发者。

2025-03-25 11:37:35 791

转载说说你对esbuild和swc的理解？

内置代码压缩、Tree Shaking 功能，支持 JS/TS/CSS 的简单处理（需插件扩展复杂功能）。：缺乏复杂资源处理能力（如图片、字体），需配合其他工具（如 Rollup）完成完整构建流程。实现，利用多线程并行处理和高效内存复用机制，性能远超传统工具（如 Webpack）。：不支持 ES5 降级（仅到 ES6）、装饰器语法，且无法操作 AST。：缺乏打包能力（swcpack 不成熟），需配合其他工具完成构建。：复用 AST 结构，避免传统工具链多次解析 AST 的开销。

2025-03-24 19:58:05 108

原创简单粗暴啊！对比SolidJs和React。。。

SolidJS 确实在设计上借鉴了 React 的诸多特性，但底层机制却有本质不同。欢迎自荐投稿到《前端技术江湖》，如果你觉得这篇内容对你挺有启发，记得。一、SolidJS 与 React 的相似与差异。：即使只有 1 个数据变化，也要重新渲染整个组件。3.1 React 更新流程（简化的伪代码）：先计算虚拟DOM差异，再操作真实DOM。：每个状态变化只更新对应的 DOM 节点。：直接操作真实DOM，无中间计算层。：提前确定状态与DOM的依赖关系。SolidJS（直接DOM）：提前建立状态与DOM的关联。

2025-03-21 12:22:49 407

转载如何在前端开发中实现零停机部署

在本文中，我们将探讨在前端开发中实施零停机部署的实用策略，帮助你平稳地交付更新，而不影响用户的体验。零停机部署是一种技术，通过这种技术，对应用程序或网站的更新可以在不造成任何服务中断的情况下进行部署。这种方法可以在不向所有用户暴露新功能的情况下，在实际环境中测试新功能，从而在管理新功能发布的同时实现零停机。功能标志，也称为功能切换，可以让你在不部署新代码的情况下控制新功能或更新的可见性。自动化有助于维持可靠且可重复的部署过程，从而实现更快更高效的更新，并最大限度地减少潜在的停机时间。

2025-03-19 19:39:56 83

原创破防了！原来Vue响应式设计的如此巧妙

Vue 响应式系统的巧妙之处在于：自动依赖收集：不需要手动声明依赖关系，Vue 会在数据被访问时自动建立依赖关系精确更新：只有真正依赖某个数据的视图才会在该数据变化时更新，而不是整个应用重新渲染深度响应：对象的嵌套属性也能被监听，因为 Observer 会递归地将嵌套对象也变成响应式的。Vue 的响应式系统是其最核心的特性之一，它让我们通过简单地声明数据与视图的关系，而不需要手动操作 DOM。Watcher 就像是一个"侦探"，负责监视数据的变化，并在变化时执行特定的操作，如更新视图。

2025-03-18 17:30:58 583

原创 30分钟扩展七牛云图片上传功能

https://developer.qiniu.com/kodo/manual/upload-token），我整理了一个简单可用代码，在node下执行就可以输出token。自己做网站、做小程序时我一般都用七牛来存储图片，如果产品日常更新有较多图片，那么直接使用七牛上传就会很麻烦。我希望能尽量的省事儿，不需要登录，可以直接从剪贴板上传图片，上传后能直接得到cdn的地址。token的获取必须通过服务端拿到，前端无法获取。只要有上传token就可以把图片上传到自己的七牛空间里。（其实调教AI撸一个）

2025-03-17 17:39:48 272

原创 cursor已经到这种地步了？2分钟开发一个AI生图功能

接口文档 @https://docs.siliconflow.cn/cn/api-reference/images/images-generations。上面的页面布局和功能开发，如果纯手写需要多久？然而cursor2分钟就搞定了。这次用cursor开发一个ai生图功能，基本上一句话就能把整体功能完成80%。（当然这不重要，出图质量和提示和模型都有关系，目前使用的是免费模型）在xxx目录内实现输入prompt就能生成图片的功能，然后再对细节布局和功能进行调整就可以。或者点击左下角阅读原文。

2025-03-14 19:51:58 302

空空如也

空空如也