从快照到时间序列：一次实时行情系统的结构演进与架构取舍
从快照到时间序列：一次实时行情系统的结构演进与架构取舍 在多数前端行情系统中，Ticker 快照接口足以支撑列表展示：最新价、涨跌幅、成交量定时刷新即可。 但当系统开始引入 K 线图表后，前端架构会发生一次实质性的结构变化。 这篇文章不讨论某个具体 API 如何调用，而是围绕一次真实的结构升级过程， ...
为什么 SVG 能在现代前端中胜出？
写在开头 点赞 + 收藏 学会 如果你关注前端图标的发展，会发现一个现象： 过去前端图标主要有三种方案： PNG 小图（配合雪碧图） Iconfont SVG 到了今天，大部分中大型项目都把图标系统全面迁移到 SVG。 无论 React/Vue 项目、新框架（Next/Rem ...
一个月，Vue四件套，专为移动端深度优化的第三方网易云 WebApp
这年代真的很魔幻：物价在涨、黄金在涨，人都在悄悄发福，更别说内存条蒸蒸日上。结果回头一看，音乐软件也跟着 “发福” 到离谱。 就拿网易云来说，十年间安装包膨胀十几倍，从一个纯粹的播放器，硬生生塞成了集直播、K 歌、社区、短视频、商城于一体的 “全能平台”。权限越要越多，体积越更越大，对于性能不怎么好 ...
为什么有些人边框不用border属性
写在开头 点赞 + 收藏 学会 1) border 会改变布局（占据空间） border 会参与盒模型，增加元素尺寸。 例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成： 200 + 1px(left) + 1px(righ ...
那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了
写在开头 点赞 + 收藏 学会 告别百分比计算：从文档流到 Flex 弹性布局的进化之路 在 CSS 的世界里，布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来 ...
用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”？Node.js：别不信！
写在开头 点赞 + 收藏 学会 前言 当你叩开 Node.js 的大门，会发现它的内核逻辑恰似一套精密的 “后端工具链”：http模块是搭建服务的 “基建脚手架”，以极简代码就能拉起可被浏览器访问的 Web 端点；https模块是对接外部世界的 “数据导管”，能安全拉取远程接 ...
Uni-app 性能天坑：为什么 v-if 删不掉 DOM 节点
写在开头 点赞 + 收藏 学会 在开发自定义 Swiper 或长列表组件时，为了优化性能，我们通常会给每一项加上懒加载逻辑： <view class="item"> <template v-if="shouldRender"> <slot :name="'slot-' + i ...
unibest：基于 Vite + Vue 3 的 Uni-app 开发终极方案
告别 HBuilderX？拥抱 unibest：基于 Vite + Vue 3 的 Uni-app 开发终极方案 在移动端跨平台开发领域，Uni-app 凭借其强大的跨端能力不仅统一了小程序和 App 的开发，更构建了庞大的生态。然而，传统的开发模式（依赖 HBuilderX、基于 Webpack ...
告别手写礼簿！一款开源免费的电子红白喜事礼簿系统！
gift-book —— 一款纯本地、零后端、完全本地运行的单页 Web 应用，旨在为各类红白喜事提供一个现代化、安全、高效的礼金（份子钱）管理解决方案。 ...
前端技巧：检测到省略号文本自动显示 Tooltip
写在开头 点赞 + 收藏 学会 前言 在前端开发中，我们经常会遇到接口返回的文本内容过长，无法完全显示的问题。为了处理这一问题，通常会设置固定的宽度并使用省略号样式（text-overflow: ellipsis）来隐藏超出的文本。然而，有时产品需求还希望用户能够通过悬停查看 ...
说一下 localhost 和127.0.0.1 的区别
写在开头 点赞 + 收藏 学会 localhost 是主机名（域名） ，属于应用层概念； 127.0.0.1 是IPv4 回环地址，属于网络层概念。 两者都用于访问本机服务，但 localhost 必须通过解析才能映射到具体 IP（默认是 127.0.0.1 或 IPv6 的 ...
三次握手四次挥手的具体过程
在HTTP通信中，三次握手和四次挥手是TCP（传输控制协议）建立和断开连接的过程。理解这些过程对于网络协议知识非常有帮助。以下是详细的解释： 三次握手（Three-Way Handshake） 三次握手是TCP连接建立的过程，确保双方都准备好进行数据传输。 第一次握手（SYN）： 客户端发送一个SY ...
数字人动画云端渲染方案
为优化拟我形象在多场景中的性能与接入，我们将其预先导出为视频/动图。通过对比，采用 Puppeteer + H5 渲染帧 + FFmpeg 合成方案，实现了效果一致、服务端批量处理与低成本接入，为规模化应用提供了可靠基础。 ...
从不足到精进：H5即开并行加载方案的演进之路
并行加载是 H5 即开 SDK 的加速技术，通过 native 层在用户打开页面时并行请求关键资源（如 index.html 和 CSR 模式 API），利用 webview 初始化时间窗口提前发起请求，减少加载耗时。其核心挑战是解决 webview 与并行任务间的资源交接问题。 ...
如何创建你的百Google度！！（实现双搜索引擎页面）
创建双搜索引擎页面 百Google度的网站被封了，但！！！这不影响我们创建属于自己的双搜索引擎页面！ 提前准备 找到你想添加的俩个搜索引擎对应的URI 和 它预先定义用于存储搜索关键词的参数名。 打开你想要的搜索引擎的网页，在当前搜索引擎里输入“关键词”，点击搜索，然后观察上面的网址，一般“？”前出 ...
JavaScript 中的 map、parseInt 与 NaN：一场关于类型转换与函数调用的深度解析
写在开头 点赞 + 收藏 学会 引言：一个看似简单的陷阱 在 JavaScript 的日常开发中，我们常常会遇到这样一段“经典”代码： console.log([1, 2, 3].map(parseInt)); // 输出：[1, NaN, NaN] 乍看之下，这段代码似乎应 ...
JavaScript性能优化：我从50ms降到5ms的7个关键技巧
写在开头 点赞 + 收藏 学会 引言 在现代Web开发中，性能优化是一个永恒的话题。随着前端应用的复杂度不断提升，JavaScript的执行效率直接影响用户体验。我曾面临一个关键功能的性能瓶颈——初始实现需要50ms完成的任务，通过一系列优化手段成功降至5ms。本文将分享这7 ...
前端工程化中Less第三方库中@Import的“~”和“@”用法
在前端工程化开发中经常会用到less第三方css库，其中@import指令中的~符号和@符号用于指定模块化路径，常见于Webpack等构建工具中。下面介绍使用方法： 路径解析规则： ~符号：表示模块请求，构建工具会将其解析为node_modules目录或配置的别名路径 。 @符号：通常指向项目源 ...
