学且思-优快云博客

原创 Chrome 控制台使用 Console Importer 使用 npm 库

使用 Console Importer 插件可临时调用第三方库函数，无需新建项目。安装后，通过 $i 命令直接引入如 lodash 等全局库，或以 import { xxx } from 'pkg' 方式加载无全局暴露的库（如 @faker-js/faker），便捷高效地在浏览器控制台测试代码。

2026-09-10 19:53:46 220

原创 vite 4 本地连https

通过本地生成证书使得 vite 可以连 https

2026-09-02 10:27:02 237

本文总结了Vue3+Vite项目中图片资源的使用最佳实践。在模板和样式中可直接使用@/别名路径，脚本中建议通过import或new URL()静态导入。动态图片数组推荐使用new URL()静态路径、ESM静态导入或import.meta.glob()批量导入方式，避免使用动态模板字符串拼接路径。对于需要动态路径的场景，可将资源放入public目录。核心原则是确保Vite能在编译时识别完整资源路径进行正确打包。最佳实践建议根据图片数量选择合适导入方式，少量图片用静态导入，大量图片用批量导入，动态路径场景用p

2026-06-10 11:12:26 354

原创 SSE 是 HTTP/2 的服务器推送？

本文介绍了SSE（Server-Sent Events）技术，指出它是基于HTTP/1.1持久连接的服务器推送技术，而非HTTP/2实现。SSE通过保持单一GET连接不关闭，以text/event-stream格式流式传输数据，适用于实时聊天等场景。与HTTP/2 Server Push相比，SSE是单向事件流，实现简单且浏览器兼容性更好（IE11需polyfill），而HTTP/2 Push主要用于资源预加载。两者协议层、使用场景和实现方式均有明显差异。

2026-06-04 15:40:09 318 1

原创 Vue3 Patch 算法深度解析：从原理到源码实现

Vue3的Diff算法（Patch算法）通过对比新旧虚拟DOM实现高效视图更新。核心流程包括：1）节点类型不同时直接替换；2）类型相同时深度对比属性和子节点。算法采用双端对比策略，结合最长递增子序列优化，通过双指针从首尾同步比对，中间乱序部分使用LIS算法复用节点。这种分层对比策略实现了O(n)时间复杂度，最小化DOM操作，保留组件状态，显著提升渲染性能。

2026-05-27 17:12:28 793 1

原创为什么做动画用transform比position更合适

transform和position均可实现元素动画，但性能差异显著。transform通过GPU加速的translate实现位移，不会触发重排和重绘；而position通过修改top/left属性，会引发页面回流和重绘。实验表明：1) transform动画更流畅，Chrome开发者工具的Paint flashing功能显示其无重绘标记；2) transform不受JS主线程阻塞影响，即使执行耗时任务仍保持流畅。实现高性能CSS动画应首选transform方案。

2026-04-01 15:50:27 363

原创使用import.meta.url实现传递路径动态加载资源

摘要在Vue monorepo项目中处理动态路由时，当子模块缺少vite配置时，通过传递import.meta.url参数解决组件路径转换问题。调用处传递当前模块URL，转换函数利用new URL()解析出基础路径，使动态导入能正确解析相对路径。这种方法确保了公共路由转换函数在不同子模块中的通用性，解决了无别名配置时的模块路径问题。

2026-03-18 20:15:11 107

原创类ChatGPT文字光标跟随

这段代码实现了一个文字光标跟随效果。主要功能是：在文本容器中自动逐字显示预设的文本内容，并有一个圆形光标跟随当前输入位置。技术要点包括：1) 使用CSS创建闪烁的光标动画；2) 通过JavaScript控制文字逐个显示；3) 动态计算光标位置，使其始终跟随最后一个字符；4) 使用Range API获取文本位置信息。代码结构清晰，包含HTML结构、CSS样式和JavaScript逻辑三部分，实现了类似打字机的视觉效果。

2025-12-23 10:56:48 813

原创 el-select 过滤大量数据卡顿

如果下拉数据量少没有问题，但如果下拉的数据量很大，会导致卡顿甚至卡死。

2024-08-06 20:01:48 963

原创 VS Code顶部显示项目路径

背景：用 VS Code 作为开发工具，我喜欢一个项目开一个窗口，这样 git 管理那里就比较纯粹，只显示这个项目的改变，而且项目专注度更高，不用担心会影响别的项目。但是也会带来新的问题，如果同时打开了几个窗口，并且文件夹的名称又相同，就不能很方便的区分项目。一、打开设置，路径：File > Preferences > Settings，或快捷键。在红框那里修改，上边有解释，可以根据需要自己调整。

2024-08-01 11:30:23 1765

原创 electron生成的app，在Windows11中关闭通知后无法再打开

在目录中找到你的软件名字点开（我这里electron.app.App），右侧会出现一个叫做Enabled的条目，最右边显示的值是0，也就是代表不显示通知。我试了改成1不行，我看了别的条目是没有Enabled的，删除后发现有效，右键删除这个名为Enabled的条目，其他的不用管。下载好解压打开，打开数据库，路径：C:\Users\（你的用户名）\AppData（看不到的话勾上显示隐藏文件）\Local\Microsoft\Windows\Notifications\wpndatabase.db。

2024-05-20 15:46:16 1549 1

原创 el-form中只有一个表单项，获取焦点回车刷新

做表单，发现有的获取焦点回车会刷新，有的不会。发现刷新的会在地址栏的后边加一个?，想到应该是触发默认提交了，要阻止默认提交行为，官网给出的有提示。原来是如果表单中只有一个表单项，获取焦点并回车会提交表单。

2024-05-16 16:32:14 375

原创 gap导致edge版本84.0.522.52高度很高问题

背景：使用flex布局，gap设置间隔，如果子节点是空的，在edge 84.0.522.52版本中，会导致高度很高，出现兼容问题，在edge 86.0.622.63中没问题。解决方案：在使用gap且内容可能为空的节点的样式中使用after，增加一个伪元素，如。

2024-05-11 17:03:27 457

原创登录页预加载首页

背景：采用动态路由，首页内容比较多，登录后跳转需要的时间长，通过网络请求发现请求的资源比较多，从而导致跳转占用的时间长。预加载首页，首页代码的加载就提前到了登录页，跳转时间就缩短了。如果影响到了登录页的加载速度，可以把。方案二：在路由页面通过。解决方案：登录页使用。

2024-04-12 14:35:08 270

原创 Chrome修改调试线上代码

点击 [Select folder for overrides]，会弹出资源选择器，这里选择一个要存放覆盖代码的文件夹，如果没有合适的，可以新建一个，我这里是新建的 debug，然后选中。也可以先执行第三步，即先找到要覆盖的代码，右键选择[Override content]，如果没有保存过文件，会提示选择文件夹，再按第二步的操作。一、打开[Souces] -> [Overrides]，如果看不到，点右侧箭头就可以看到了。找到要覆盖的代码，右键选择[Override content]，就跳到对应文件了。

2024-03-27 11:00:18 1708

原创 vite+vue3降级到vite+vue2.7来适配IE

因为我的项目中用到了web worker，web worker会打包成单独的文件，我已经装了web worker插件rollup-plugin-web-worker-loader，感觉应该好使，但是在IE中报错，开始以为是IE不认识web worker，折腾好久找loader，后来发现不是，因为我在webworker中使用的async await的原因，不知道为什么web worker中的async await IE不识别，而主线程代码的中就可以，这里的需要改成传统的回调函数。这是新的vue2.7写法。

2024-03-23 15:42:11 2929 6