- 博客(13)
- 收藏
- 关注
RSS订阅原创 MutationObserver：通过异步方式监测 DOM 变化
MutationObserver 是用于异步监测 DOM 变化的 Web API，相比传统事件更高效。它支持批量处理变化，可精确监听节点、属性和文本内容的变化。通过配置观察选项，开发者能针对性地监测特定 DOM 变动。实际应用包括动态内容加载监测、表单验证和广告跟踪等。使用时应注意精确配置观察范围并及时断开连接以优化性能。MutationObserver 采用异步通知机制，避免阻塞主线程，同时自动处理垃圾回收，是现代 Web 开发中监测 DOM 变化的理想方案。
2025-10-20 09:02:56
386
原创 ResizeObserver监听元素尺寸
ResizeObserver是现代前端开发中监听元素尺寸变化的高效API，相比传统方法具有更好的性能和精准度。本文介绍了其基本用法、浏览器兼容性，并重点展示了在Vue项目中的实现方案，包括通用封装、自定义指令和组件集成。通过实际应用场景如响应式图表和自适应布局组件，说明了ResizeObserver如何解决元素尺寸监听问题，帮助开发者构建更灵活的用户界面。
2025-10-17 09:22:26
456
原创 IntersectionObserver：现代前端可视区域检测的利器
IntersectionObserver 使用指南 IntersectionObserver API 用于高效检测元素与视口的交叉状态，适用于懒加载、无限滚动和视口动画等场景。核心用法包括创建观察器、配置选项（root、rootMargin、threshold）及手动解除观察（disconnect/unobserve）。 关键应用： 懒加载图片：替换 data-src 为实际 src 无限滚动：提前触发加载回调 视口动画：元素可见时添加动画类 注意事项： 必须手动解除观察避免内存泄漏 现代浏览器广泛支持，旧
2025-10-16 15:30:33
300
原创 window.open() 窗口复用与焦点控制详解
通过的窗口名称参数，我们可以实现强大的窗口复用功能。窗口复用：相同名称的窗口会被浏览器自动复用焦点控制：需要显式调用focus()方法控制窗口焦点状态检查：使用closed属性检查窗口状态用户体验：合理使用可以显著提升用户体验这种技术在现代Web应用中非常实用，特别是在需要精确控制窗口行为的复杂系统中。通过合理运用，可以避免不必要的窗口重复打开，提升应用的专业性和用户体验。📌作者寄语：希望本文能帮助大家更好地理解方法的窗口复用机制。在实际开发中，合理运用这些技术可以显著提升用户体验。
2025-10-16 14:55:24
888
原创 Nginx 优化后端服务响应大数据量处理
Nginx 代理响应压缩优化方案 问题：Nginx 默认只压缩静态内容，不压缩后端服务的代理响应，影响大数据传输效率。 解决方案： 配置 gzip_proxied any 指令启用对代理响应的压缩 设置反向代理时清除原始编码头（proxy_set_header Accept-Encoding ""） 完整配置需包含 gzip 基础参数和代理路径 关键点： 仅对文本类内容（JSON/XML等）启用压缩 设置最小压缩长度（如1024字节） 压缩会消耗CPU，需平衡性能与效率 该方案通过 Ng
2025-08-25 11:53:54
470
原创 web项目实现用户退出网页前向后端发送请求
摘要：文章讨论了网页编辑权限锁定的问题及解决方案。当用户意外关闭页面时，手动释放编辑权限容易失败。为此，作者建议使用window.navigator.sendBeacon()API，在页面卸载时自动发送请求释放权限。该方法相比传统XMLHttpRequest更可靠，适用于关闭/刷新页面的场景。文中还提供了代码示例，并提醒开发者注意本地调试时需用localhost而非127.0.0.1，以避免浏览器限制问题。该方案有效解决了权限占用问题，提升了用户体验。
2024-02-05 10:01:12
868
1
原创 基于Vue的项目更新发版时，用户如何无感刷新页面加载最新资源
在开发的过程中经常会遇到页面更新发版后，用户访问的页面还是缓存中的页面，即使打包的文件名使用了内容哈希（根据文件内容生成哈希，并将其合并到文件名中（比如），这提供了一种识别更改的可靠方法。即使对文件进行微小的更改也会产生新的哈希值，并随后产生新的文件名），如果用户不手动刷新页面，访问的依然是旧的资源文件，特别是App应用，不像浏览器有刷新按钮，App每次都要手动清除缓存再进入应用才能访问最新应用。1. 用户访问页面时检测当前版本与服务器版本是否一致，若不一致，可以强制浏览器从服务器重新加载页面。
2024-02-04 17:50:19
4115
3
原创 用Vue实现封装一个八爪鱼图组件
人力资源管理系统中需要对一些职位的发展进行规划和跟踪，希望以可视化的方式进行展示。这时候可以借助八爪鱼图的形式来展示职位的发展，有助于个人对自己的职业发展进行跟踪和评估，以及调整自己的发展策略和目标。
2023-11-14 20:00:00
236
原创 Vue keep-alive 动态控制缓存页签
Vue 的 keep-alive 是一个抽象组件，用于缓存动态组件或组件树，以减少组件的重复渲染。使用 keep-alive 可以提高应用的性能。想要动态的控制页签的缓存，也就是在页签导航栏切换页签的时候不改变页面的状态，但是在右键刷新页签或关闭页签重新从左边菜单栏打开页签的时候，希望能够重新加载新页面。
2023-11-13 20:30:00
740
原创 Vue2+electron开发桌面端应用并实现自动更新
打包安装默认是直接装在c盘的新建vue.config.js},nsis: {allowToChangeInstallationDirectory: true, //自定义安装路径},win: {url: "http://127.0.0.1:5502" //更新包地址}],},productName: 'electronDemo' //项目名（应用名）})
2023-11-11 09:00:00
806
3
原创 Vue h5项目如何在本地调试和打包成app
打包成APP也可以通过Hbuilder的5+APP进行打包，直接修改刚刚manifest.json的应用入口页面地址为你上线后的项目地址即可，项目可保持现有的模式部署在远程服务器上。打包成功后在项目目录的unpackage->release->apk 可找到生成的apk文件，右键选择安装到连接的手机上。的plus.android实现的，而普通浏览器不具备plus环境，不可直接运行到浏览器里，那在本地如何调试该功能呢？报错：遇到没有权限的报错，要把手机的蓝牙和应用的位置权限打开。可开始调试蓝牙功能~
2023-11-10 14:00:37
619
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人