- 博客(37)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 使用CSS创建带三角形指示器的气泡框
本文介绍了如何使用纯CSS创建带三角形指示器的气泡框。通过HTML基础结构和CSS样式实现，包括圆角矩形容器和利用边框技巧生成的三角形。关键点在于使用::after伪元素、边框属性设置以及精确定位技术。这种方法无需JavaScript或图片，简单高效，适合网页提示框、对话框等UI元素。文章还提供了完整代码示例并建议了可能的改进方向，如响应式设计、动画效果等。这种纯CSS实现方案轻量且易于定制。
2025-06-24 17:34:16
851
原创 使用JavaScript检测网络连接状态与性能指标
摘要：本文介绍了JavaScript中Navigator API的网络检测功能，包括基础在线状态检查和详细网络信息获取。通过navigator.onLine检测连接状态，利用navigator.connection获取网络类型、下载速度等参数。文章提供了完整示例代码展示实时网络监控的实现，并列举了自适应内容加载、离线提示等应用场景。同时指出需注意浏览器兼容性、隐私保护和数据准确性等问题。这些技术有助于开发响应式Web应用，特别适用于媒体密集型或需要离线支持的场景。
2025-06-10 00:22:10
612
原创 在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制
在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目中实现两种暗黑模式控制方式：系统自动适配和手动切换。
2025-06-07 10:27:42
972
原创 使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
这篇文章介绍了一个纯CSS实现的3x3彩色格子网格交互效果。当鼠标悬停任意格子时，所在行和列会放大显示。主要技术点包括：CSS Grid布局构建基础网格，SASS循环生成9种不同颜色，利用:has()选择器监听悬停状态，结合SASS数学模块和列表操作动态调整行列比例。整个效果仅需少量HTML和SASS代码，无需JavaScript，但需注意:has()在Firefox的兼容性问题。该方案展示了现代CSS结合预处理器的强大表现力。
2025-06-01 00:32:15
812
原创 浏览器强缓存还未过期，但服务器资源已经变了怎么办？
本文探讨了前端开发中浏览器强缓存机制带来的经典问题：当服务器资源更新但浏览器仍在缓存有效期内时，用户无法获取最新版本。文章首先回顾了强缓存的原理，然后分析了问题场景及其原因，进而提供了三种解决方案：使用文件名hash（最佳实践）、缩短缓存时间+协商缓存、请求参数版本号。最后给出了不同资源的缓存策略推荐，强调通过资源唯一标识和合理缓存策略来兼顾性能与更新。核心要点是：文件名加hash可彻底解决问题，同时实现长期缓存和即时更新。
2025-05-24 23:47:04
919
原创 Flexbox中的flex-shrink和flex-grow属性
flex-shrink 和 flex-grow 是 CSS Flexbox 布局中的两个关键属性，分别用于控制弹性项目在容器空间不足或有多余空间时的行为。flex-shrink 定义了项目在空间不足时的收缩比例，数值越大，收缩越多，默认值为 1，设置为 0 可禁止收缩。flex-grow 则定义了项目在有多余空间时的伸展比例，数值越大，伸展越多，默认值为 0，设置为 0 可保持初始宽度。通过合理使用这两个属性，可以实现灵活且自适应的布局，确保页面在不同屏幕尺寸下保持良好的显示效果。
2025-05-16 16:25:19
720
原创 node.js事件循环详解
Node.js 中的事件循环是一个高效的异步处理机制，它允许 Node.js 在单线程中处理大量的并发 I/O 请求，而不会阻塞程序的执行。理解事件循环的机制对于优化 Node.js 应用程序的性能至关重要，尤其是在处理大量 I/O 操作时。通过合理使用异步 API 和微任务、宏任务的优先级，可以确保应用程序能够高效地执行并响应请求。
2025-04-23 00:22:03
1223
原创 详解Node.js中的setImmediate()函数
setImmediate()的主要作用是将回调函数推送到事件循环的"Check"阶段。无论延迟时间是多少，它都会在当前事件循环周期的末尾执行，而不是等到下一个事件循环周期。
2025-04-23 00:08:27
1031
2
原创 深入理解 setTimeout：原理、问题与最佳实践
本文全面讲解了 JavaScript 中 setTimeout 的使用方法，包括语法、定时器 ID 管理、常见的 this 指向问题及其解决方案，分析了延迟不准确的原因，如事件循环和最小延迟限制，并展示了其在防抖、任务分片和动画控制中的实际应用，最后总结了常见问题和优化建议，帮助开发者更高效地使用定时器处理异步任务。
2025-04-21 09:52:28
324
原创 requestAnimationFrame() 详解：优化动画性能
requestAnimationFrame()是实现高效流畅动画的首选 API。它与浏览器的刷新机制深度集成，能够最大限度地减少性能开销，并自动暂停后台任务，有效节省资源。无论是简单的 UI 动画，还是复杂的游戏渲染，都能提供卓越的性能表现。
2025-04-21 09:29:50
1022
原创 浏览器重绘 vs 重排：性能优化必须懂的两大概念
在这篇博客中，深入探讨了浏览器渲染过程中两个关键概念——重绘（Repaint）和重排（Reflow）。解释了这两者的区别、它们如何影响页面性能，以及为何transform属性的使用可以有效提高页面渲染效率。通过理解这些基础知识，开发者可以优化网页表现，避免不必要的性能瓶颈。
2025-04-19 20:18:06
696
原创 详细解释浏览器是如何渲染页面的？
浏览器渲染页面的整个流程从接收到HTML文本开始，经过 HTML 解析、样式计算、布局、分层、绘制、光栅化 等多个阶段。每个阶段通过不同线程协作，确保页面高效渲染。
2025-04-19 20:01:26
895
原创 深入理解前端安全：CSRF与XSS攻击详解
CSRF（Cross-Site Request Forgery，跨站请求伪造），听起来像个高大上的术语，但其实它就是恶搞用户的日常操作。攻击者通过引诱已认证用户访问恶意网站，利用用户的身份发起未授权请求。结果？用户可能会无意中执行一些危险操作，比如转账、修改密码等。XSS（Cross-Site Scripting，跨站脚本攻击）就像是Web页面上的“病毒”，攻击者通过注入恶意脚本到网页，借此窃取数据或执行不法行为。不同于CSRF，它直接攻击浏览器环境，让用户的浏览器成为攻击的“战场”。
2025-04-19 17:44:02
2165
原创 JavaScript 原型链深度解析：继承与属性共享的核心机制
原型链的本质：对象通过__proto__连接形成链式结构，从而实现属性和方法的继承。最佳实践避免直接操作__proto__，推荐使用和来处理原型。在构造函数中定义引用类型属性，避免多个实例共享同一原型属性。对于类的继承，建议使用class语法，它是对原型链继承的封装，使得代码更简洁易懂。
2025-04-17 11:12:18
1054
原创 深入理解CSS定位：一文搞懂Static、Relative、Absolute、Fixed、Sticky的应用与区别
CSS定位是网页布局的核心技术之一，掌握各种定位方式对于前端开发者至关重要。本文将详细介绍CSS中的五种主要定位方式：静态定位、相对定位、绝对定位、固定定位和粘性定位，并通过实例展示它们的应用场景和差异。
2025-04-16 15:07:35
1067
原创 使用 Sass 打造动态星空背景效果
在前端开发中，视觉效果越来越受到重视。本文将通过一个生动的示例，讲解如何利用 Sass 构建一个具有动态星空滚动效果的背景页面，同时也系统介绍 Sass 的核心功能与实践技巧。
2025-04-15 14:35:37
888
原创 Vite到底是构建工具还是脚手架？前端工程化的“厨子”和“菜谱”
如果你还在用Webpack，试试Vite吧——毕竟，谁不想吃上秒上的菜呢？别急，我们就用“做饭”的比喻，轻松搞懂它们的区别！因为Vite把两者结合得太好了！刚学前端时，你是不是也被各种工具名词绕晕过？
2025-04-14 23:22:26
1173
原创 用Webpack 基础配置快速搭建项目开发环境
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，但是Webpack有大量的配置项，对新手不太友好，但是我们可以根据的init命令根据项目需求快速生成webpack的配置文件，本文将手把手教你如何用 Webpack 和 npm 快速搭建一个基础开发环境。
2025-04-14 22:49:10
671
原创 Webpack中的文件指纹：给资源戴上个“名牌”
文件指纹就像是给你的资源穿上了“高科技外衣”，不仅能让浏览器和CDN精确识别文件版本，还能避免因缓存问题带来的各种麻烦。无论是Hash、Chunkhash还是Contenthash，各有千秋，你只需选出最适合你项目的那一款。快乐构建，从有“名牌”的资源开始！
2025-04-12 17:23:34
1038
原创 Vue2和Vue3响应式的基本实现
在 Vue 框架中，数据的响应式是其核心特性之一。当页面数据发生变化时，我们希望界面能自动更新，而不是手动操作 DOM。这就需要对数据进行监听，并在数据变更时触发 UI 重新渲染。Vue2 和 Vue3 在实现响应式的方式上有所不同，Vue2 主要依赖，而 Vue3 则引入了Proxy，大大优化了响应式系统的性能和灵活性。它们都是通过函数来封装响应式对象，方便读取或更新数据时能够进行其他的操作。
2025-03-30 13:56:13
630
原创 React+Ant Design的Layout布局实现暗黑模式切换
Ant Design 的 theme 允许开发者通过配置颜色、字体、布局、组件样式等来调整 Ant Design 组件的外观，我们可以用其控制网站切换不同颜色风格。
2025-03-20 18:44:22
1089
原创 MySQL自增ID
自增ID不仅是数据库表中一个简单的“自动编号器”，更是提升数据库性能、优化查询及管理数据的关键技术手段。然而，它也不是万能的，面对高并发和分布式数据场景时，必须权衡利弊，选择合适的方案。
2024-01-07 22:57:03
936
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人